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

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>




今回は以上です。

ご覧いただきありがとうございました(^^)
続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました