メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

図表（Figures）

関連する画像とテキストをBootstrapに表示するための解説と例。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目

図表の設定

任意のキャプションでイメージのようなコンテンツを表示する必要があるときは、いつでも <figure> の使用をご検討下さい。

.figure, .figure-img, .figure-caption を使用して、HTML5の <figure> 要素や <figcaption> 要素に基本的なスタイルを提供する。figure内のイメージには明示的なサイズがないので、レスポンシブに対応するには、<img> に .img-fluid を追加して下さい。

見本
プレースホルダ400x300
上の画像のキャプション
設定例
<figure class="figure">
  <img src="..." alt="一般的な角丸イメージ" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption">上の画像のキャプション</figcaption>
</figure>
fig.figure>img.figure-img.img-fluid.rounded+figc.figure-caption
【設定】
  • <figure> に .figure, <img> に .figure-img, <figcaption> に .figure-caption を入れる

キャプションの配置 v5.0.0-beta1設定変更

Figureのキャプションをテキストユーティリティで簡単に整列させられる。

見本
プレースホルダ400x300
上の画像のキャプション
Bootstrap5.xの設定例 緑背景が変更箇所
<figure class="figure">
  <img src="..." alt="一般的な角丸イメージ" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption text-end">上の画像のキャプション</figcaption>
</figure>
※Bootstrap4.xの設定例 赤背景が変更箇所
<figure class="figure">
  <img src="..." alt="一般的な角丸イメージ" class="figure-img img-fluid rounded">
  <figcaption class="figure-caption text-right">上の画像のキャプション</figcaption>
</figure>
【設定】
  • .figure-caption に .text(-{breakpoint})-{side} を追加（追加するクラスは文字の配置 に記載）
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 文字の行頭揃え：.text(-{breakpoint})-left ⇒ .text(-{breakpoint})-start
      • 文字の行末揃え：.text(-{breakpoint})-right ⇒ .text(-{breakpoint})-end

CSS v5.0.0-beta3追加、v5.3.0Sassから名称変更

Sass変数（Sass variables）v5.3.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 figure-variables の設定$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              var(--#{$prefix}secondary-color);