Bootstrap
Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【イメージ編】
2019年09月15日 8:00
おはようございます!社員Aです👩
連載しております「Bootstrapシリーズ」ですが、第9回目になりました!
Bootstrap4基本の使い方シリーズ
Bootstrap4基本の使い方【入門編】 Bootstrap4基本の使い方【ボタン編】 Bootstrap4基本の使い方【アラート編】 Bootstrap4基本の使い方【文字の装飾編】 Bootstrap4基本の使い方【表示・非表示編】 Bootstrap4基本の使い方【バッジ編】 Bootstrap4基本の使い方【ページ送り編】 Bootstrap4基本の使い方【パンくずリスト編】 Bootstrap4基本の使い方【イメージ編】
複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。
第9回目の今回は「イメージ編」!Bootstrap4でイメージを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか?
もくじ
Bootstrap4 レスポンシブイメージ
Bootstrap4では、画像にもクラスを付与することで様々なカスタマイズやレスポンシブ対応ができます。
まずはレスポンシブイメージから。
基本のルールについて
- Bootstrapの画像は、クラス名「.img-fluid」を付与することででレスポンシブになります。
- max-width:100%;, height:auto; で表示され、親要素と同じ大きさになるように画像に適用されます。
表示
ソース
<img src="#" class="img-fluid">
Bootstrap4 イメージのサムネイル
画像に枠線を付けて表示したい場合は、イメージのサムネイルを使うことで表現できます。
基本のルール
- クラス名「.img-thumbnail」を付与することで、画像に丸みを帯びた1pxの境界線のスタイルが適用されます。
表示
ソース
<img src="#" class="img-thumbnail">
Bootstrap4 イメージの配置
画像を中央揃えにしたり、位置を指定することができます。
基本のルール
- 「.mx-auto」「.d-block」のクラスを付与することで、画像を中央揃えにできます。
- 「.float-left」のクラスを付与することで、画像を左揃えにできます。
- 「.float-right」のクラスを付与することで、画像を右揃えにできます。
表示
中央揃え
左揃え・右揃え
ソース
中央揃え
<img src="#" class="mx-auto d-block">
左揃え・右揃え
<!-- 左揃え --> <img src="#" class="float-left"> <!-- 右揃え --> <img src="#" class="float-right">
Bootstrap4 ピクチャ
<picture>要素を使用すると、指定したビューポートに応じて写真を変えることができます。
PC・SPで画像を切替えたいときにおすすめです。
基本のルール
- <picture>要素の中で<source media=”(min-width:00px)” srcset=”test.jpg”>の形で記述すると、指定したビューポートに応じて画像を切り替えできます。
表示
1000pxで見た時
800pxで見た時
800px以下で見た時
ソース
<picture> <source media="(min-width: 1000px)" srcset="画像A.jpg"> <source media="(min-width: 800px)" srcset="画像B.jpg"> <img src="画像C.jpg"> </picture>
関連記事
この記事を書いた人
universe