複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。第9回目の今回は「イメージ編」!Bootstrap4でイメージを設定する方法を解説していきたいと思います。レスポンシブイメージBootstrap4では、画像にもクラスを付与することで様々なカスタマイズやレスポンシブ対応ができます。レスポンシブイメージから。基本のルールについてBootstrapの画像は、クラス名「.img-fluid」を付与することででレスポンシブになります。表示され、親要素と同じ大きさになるように画像に適用されます。イメージのサムネイル画像に枠線を付けて表示したい場合は、イメージのサムネイルを使うことで表現できます。基本のルールクラス名「.img-thumbnail」を付与することで、画像に丸みを帯びた1pxの境界線のスタイルが適用されます。画像を中央揃えにしたり、位置を指定することができます。基本のルール「.mx-auto」「.d-block」のクラスを付与することで、画像を中央揃えにできます。「.float-left」のクラスを付与することで、画像を左揃えにできます。「.float-right」のクラスを付与することで、画像を右揃えにできます。ピクチャ<picture>要素を使用すると、指定したビューポートに応じて写真を変えることができます。PC・SPで画像を切替えたいときにおすすめです。srcset=”test.jpg”>の形で記述すると、指定したビューポートに応じて画像を切り替えできます。フロントエンドエンジニア・デザイナーの社員Aです。株式会社ユニバースです。ホームページデザイン、ECサイトデザインなどWEB制作のトータルサポートを行っております。ホームページ制作やネットショップ運営代行などwebに関するご相談・お見積は、お気軽にお問い合わせください。人気記事Posting....。