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; で表示され、親要素と同じ大きさになるように画像に適用されます。

 

表示

 

ソース

 

 



Bootstrap4 イメージのサムネイル

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

 

基本のルール

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

 

表示

 

ソース

 

 

Bootstrap4 イメージの配置

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

 

基本のルール

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

 

表示

中央揃え

左揃え・右揃え

 

ソース

中央揃え
 

左揃え・右揃え
 

 

Bootstrap4 ピクチャ

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

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

 

基本のルール

  1. <picture>要素の中で<source media=”(min-width:00px)” srcset=”test.jpg”>の形で記述すると、指定したビューポートに応じて画像を切り替えできます。

 

表示

1000pxで見た時

800pxで見た時

800px以下で見た時

 

ソース

 

 

関連記事

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!