図表キャプション:figure

図とキャプション:figure-caption


図表の画像
図表キャプション

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption">図表キャプション</figcaption>
  </figure>

svg図とキャプション:figure-caption


svg image 400x300
svgのサンプルimageの例

  <figure class="figure">
    <svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300"
      xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300"
      preserveAspectRatio="xMidYMid slice" focusable="false">
      <title>svg image</title>
      <rect width="100%" height="100%" fill="#868e96" /><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text>
    </svg>
    <figcaption class="figure-caption">svgのサンプルimageの例</figcaption>
  </figure>

図表キャプション左寄せ(デフォルト):figure-captionとtext-start


図表の画像
図表キャプション左寄せ(デフォルト)(text-start:デフォルト)

  <figure class="figure">
    <!-- textユーティリティーを適用して配置場所を設定できる -->
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-start">図表キャプション左寄せ(デフォルト)(text-start:デフォルト)</figcaption>
  </figure>

図表キャプション中央寄せ:figure-captionとtext-center


図表の画像
図表キャプション中央寄せ(text-center)

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-center">図表キャプション中央寄せ(text-center)</figcaption>
  </figure>

図表キャプション右寄せ:figure-captionとtext-end


図表の画像
図表キャプション右寄せ(text-end

  <figure class="figure">
    <img src="https://via.placeholder.com/400x300/FFFF00/000000?text=img" class="figure-img img-fluid" alt="図表の画像">
    <figcaption class="figure-caption text-end">図表キャプション右寄せ(text-end</figcaption>
  </figure>