メインコンテンツへスキップ

図表(Figures)

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

図表の設定

任意のキャプションでイメージのようなコンテンツを表示する必要があるときは、いつでも <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>
【設定】
  • <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

 

Sass v5.0.0-beta3追加

変数(Variables)

デフォルトの設定
scss/_variables.scss 内 figure-variables の設定$figure-caption-font-size:          $small-font-size;
$figure-caption-color:              $gray-600;