Bootstrap 画像
このページでは、Bootstrap で画像を使用する方法について説明します。これには、定義済みの画像クラスの使用方法、レスポンシブ画像、画像のサムネイルなどが含まれます。
1. 画像クラス
Bootstrap は、画像のスタイルを設定するための定義済みのクラスを提供しています。
1.1 .img-fluid
.img-fluid クラスは、画像が親コンテナの幅いっぱいに広がり、アスペクト比を維持するようにします。これは、画像がコンテナからはみ出してレイアウトが崩れるのを防ぐために役立ちます。
<img src="..." class="img-fluid" alt="...">
1.2 .img-thumbnail
.img-thumbnail クラスは、画像に丸みを帯びたボーダーとわずかなパディングを追加して、サムネイルのように見せます。
<img src="..." class="img-thumbnail" alt="...">
1.3 クラスの組み合わせ
これらのクラスは組み合わせて使用することができます。例えば、レスポンシブなサムネイル画像を作成するには、次のようにします。
<img src="..." class="img-fluid img-thumbnail" alt="...">
2. レスポンシブ画像
<img> タグに .img-fluid クラスを使用すると、レスポンシブな画像を作成できます。これにより、画像のサイズが画面サイズに合わせて自動的に調整されます。
3. 画像のサムネイル
.img-thumbnail クラスを使用して、画像のサムネイルを作成できます。これは、ギャラリーやリストで画像を表示する場合に便利です。
グリッドシステムでサムネイルを使用する例:
<div class="row">
<div class="col-md-4">
<img src="..." class="img-thumbnail" alt="...">
</div>
<div class="col-md-4">
<img src="..." class="img-thumbnail" alt="...">
</div>
<div class="col-md-4">
<img src="..." class="img-thumbnail" alt="...">
</div>
</div>
4. SVG
Bootstrap は SVG 画像もサポートしています。ただし、SVG の詳細については、他の資料を参照してください。
よくある質問
.img-fluid と .img-thumbnail の違いは何ですか？
.img-fluid は画像をレスポンシブにし、親要素に合わせてサイズ調整します。一方、.img-thumbnail は画像に丸みを帯びたボーダーとパディングを追加して、サムネイルのように見せます。
レスポンシブ画像を作成するにはどうすればよいですか？
<img> タグに .img-fluid クラスを追加するだけです。
Bootstrap で SVG 画像を使用できますか？
はい、Bootstrap は SVG 画像をサポートしています。