【Bootstrap】画像とキャプションのあつかいについて紹介

今回は、figure 要素を使った図表のあつかいについて紹介します(^^)

図表の基本となるスタイリング
図表キャプションの整列

図表の基本となるスタイリング

figure 要素やfigcaption 要素に、figure クラス・figure-img クラス・figure-caption クラスを追加して図表をつくります。

figure 要素内の画像をレスポンシブ対応するには、img 要素に img-fluid クラスを追加する必要があります。

<figure class="figure">
  <img src="https://picsum.photos/400/300" class="figure-img img-fluid" alt="">
  <figcaption class="figure-caption">キャプション</figcaption>
</figure>

図表キャプションの整列

text-{ 位置 } クラス（プロパティには left、center、right が入ります）を追加することでキャプションを整列させることができます。

<figure class="figure">
  <img src="https://picsum.photos/200/200" class="figure-img img-fluid" alt="">
  <figcaption class="figure-caption text-left">text-left</figcaption>
</figure>
<figure class="figure">
  <img src="https://picsum.photos/200/200" class="figure-img img-fluid" alt="">
  <figcaption class="figure-caption text-center">text-center</figcaption>
</figure><figure class="figure">
  <img src="https://picsum.photos/200/200" class="figure-img img-fluid" alt="">
  <figcaption class="figure-caption text-right">text-right</figcaption>
</figure>