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

比率ヘルパー(Ratios) v5.0.0-alpha2設定変更、クラス名変更 v5.0.0-alpha2動画の埋め込みより名称変更

生成された疑似要素を使用して、選択したアスペクト比を維持する要素を作成。親要素のビューポート幅に基づいてビデオやスライドショーの埋め込みをレスポンシブに処理するのに最適。

概要(About)

比率ヘルパーを使用して、<iframe>, <embed>, <video>, <object> などの外部コンテンツのアスペクト比を管理。これらのヘルパーは、標準のHTML子要素(<div><img> など)でも使用可能。スタイルは、親要素の .ratio クラスから子に直接適用。

アスペクト比はSassマップで宣言され、CSS変数を経由して各クラスに組み込まれるため、カスタムのアスペクト比も使用可能。

 

実例(Example)v5.0.0-alpha2設定変更

<iframe> などの埋め込みを、.ratio とアスペクト比のクラスを持つ親要素で囲む。ユニバーサルセレクタ .ratio > * により、直接の子要素のサイズが自動的に設定される。

見本
Bootstrap5.xの設定例 緑背景が変更箇所
<div class="ratio ratio-16x9">
	<iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTubeビデオ" allowfullscreen></iframe>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
<div class="embed-responsive embed-responsive-16by9">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTubeビデオ" allowfullscreen></iframe>
</div>
【設定】
  • .ratio.ratio-**x* > [<iframe>,<embed>,<video>,<object> のいずれか]
    .ratio.ratio-**x* は下記の「アスペクト比の種類」から選択
  • フルスクリーン表示に対応するため <iframe>[allowfullscreen] を入れる
    ※設定していない場合は、YouTubeでは「全画面表示はご利用いただけません」との表示が出る
アクセシビリティの設定】
  • <iframe> に明示的なタイトルとして [title] を入れる
【変更履歴】
  • 【v5.0.0-alpha1】
    • [title] の設定を追加
  • 【v5.0.0-alpha2】
    • .embed-responsive.embed-responsive-**by* > iframe.embed-responsive-item.ratio.ratio-**x* > <iframe>
      • .embed-responsive.ratio
      • .embed-responsive-**by*.ratio-**x*
      • 子要素のクラス設定は不要になり、.embed-responsive-item は廃止

 

アスペクト比(Aspect ratios)v5.0.0-alpha2クラス名変更

アスペクト比は、修飾子クラスでカスタマイズ可能。デフォルトでは、以下の比率クラスを提供:

見本 見やすいよう色を付けています
1x1
4x3
16x9
21x9
設定例
<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>

【変更履歴】

  • 【v5.0.0-alpha2】
    • 1:1のアスペクト比:.embed-responsive.embed-responsive-1by1.ratio.ratio-1x1
    • 4:3のアスペクト比:.embed-responsive.embed-responsive-4by3.ratio.ratio-4x3
    • 16:9のアスペクト比:.embed-responsive.embed-responsive-16by9.ratio.ratio-16x9
    • 21:9のアスペクト比:.embed-responsive.embed-responsive-21by9.ratio.ratio-21x9

 

比率のカスタマイズ(Custom ratios)v5.0.0-alpha2新設、v5.0.0-beta2変更

.ratio-* クラスには、セレクタにCSSカスタムプロパティ(またはCSS変数)が組み込まれている。このCSS変数を上書きして、カスタムアスペクト比をその場で作成すれば、簡単な計算が可能。

たとえば、2x1のアスペクト比を作成するには、.ratio--bs-aspect-ratio: 50% を設定する。

見本 見やすいよう色を付けています
2x1
設定例
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>

このCSS変数を使用すると、ブレークポイント全体のアスペクト比が簡単に変更可能。以下は極小では4x3だが、中程度のブレークポイントで2x1に変更するカスタム方法。

見本 見やすいよう色を付けています
4x3, 次に 2x1
設定例
Sass.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1の設定
  }
}
HTML<div class="ratio ratio-4x3">
  <div>4x3, 次に 2x1</div>
</div>

【変更履歴】

  • 【v5.0.0-beta2】
    • --aspect-ratio--bs-aspect-ratio(他のカスタムプロパティとの一貫性を保つために名称変更)

 

Sassマップ(Sass map)v5.0.0-alpha2設定変更

scss/_variables.scss 内で使用するアスペクト比が変更可能。以下は $ratio-aspect-ratios マップの例。必要に応じてマップを変更し、Sassを再コンパイルすれば使用可能。

デフォルトの設定
scss/_variables.scss 内 aspect-ratios の設定$aspect-ratios: (
  "1x1": 100%,
  "4x3": calc(3 / 4 * 100%),
  "16x9": calc(9 / 16 * 100%),
  "21x9": calc(9 / 21 * 100%)
);

【変更履歴】

  • 【v5.0.0-alpha1】
    • リストからSassマップに変更
  • 【v5.0.0-alpha2】
    • $embed-respond-aspect-ratio マップから $ratio-aspect-ratios に変更