今回は、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>

今回は以上です。
ご覧いただきありがとうございました(^^)
続きはこちら↓
コメント