Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【イメージ編】

         

Bootstrap

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【イメージ編】

2019年09月15日 8:00 

Webデザイン初心者でも簡単に使える!Bootstrap4基本の使い方【イメージ編】

おはようございます!社員Aです👩

連載しております「Bootstrapシリーズ」ですが、第9回目になりました!

Bootstrap4基本の使い方シリーズ

複数記事に分けてWEB制作でよく使うBootstrapの機能や意外と知られていない便利な機能なども紹介していきますので、初めてBootstrapにチャレンジされる方も、既にBootstrapを使って開発をされている方にも読んでいただけると嬉しいです。

第9回目の今回は「イメージ編」!Bootstrap4でイメージを設定する方法を解説していきたいと思います。Webデザイン初心者の方でも簡単に使えるので、ぜひこの機会にBootstrap4の使いかたをマスターしてみませんか?



 

Bootstrap4 レスポンシブイメージ

Bootstrap4では、画像にもクラスを付与することで様々なカスタマイズやレスポンシブ対応ができます。

まずはレスポンシブイメージから。

 

基本のルールについて

  1. Bootstrapの画像は、クラス名「.img-fluid」を付与することででレスポンシブになります。
  2. max-width:100%;, height:auto; で表示され、親要素と同じ大きさになるように画像に適用されます。

 

表示

 

ソース

<img src="#" class="img-fluid">

 

 



Bootstrap4 イメージのサムネイル

画像に枠線を付けて表示したい場合は、イメージのサムネイルを使うことで表現できます。

 

基本のルール

  1. クラス名「.img-thumbnail」を付与することで、画像に丸みを帯びた1pxの境界線のスタイルが適用されます。

 

表示

 

ソース

<img src="#" class="img-thumbnail">

 

 

Bootstrap4 イメージの配置

画像を中央揃えにしたり、位置を指定することができます。

 

基本のルール

  1. 「.mx-auto」「.d-block」のクラスを付与することで、画像を中央揃えにできます。
  2. 「.float-left」のクラスを付与することで、画像を左揃えにできます。
  3. 「.float-right」のクラスを付与することで、画像を右揃えにできます。

 

表示

中央揃え

左揃え・右揃え

 

ソース

中央揃え
<img src="#" class="mx-auto d-block">

 

左揃え・右揃え
<!-- 左揃え -->
<img src="#" class="float-left">

<!-- 右揃え -->
<img src="#" class="float-right">

 

 

Bootstrap4 ピクチャ

<picture>要素を使用すると、指定したビューポートに応じて写真を変えることができます。

PC・SPで画像を切替えたいときにおすすめです。

 

基本のルール

  1. <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>

 

 

関連記事

この記事を書いた人

社員A

入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています!トレンドの情報を発信できるようにがんばります☺