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

プレースホルダ(Placeholders) v5.1.0新設

コンポーネントやページの読み込みプレースホルダを使用して、何かがまだ読み込まれている可能性があることを示す。

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

概要(About)

プレースホルダを使用して、アプリケーションの体感を向上させることができる。HTMLとCSSのみで構築されているため、JavaScriptで作成する必要はない。ただし、表示を切り替えるには、カスタムJavaScriptが必要。それらの外観、色、サイズは、ユーティリティクラスを使用して簡単にカスタマイズできる。

実例(Examples)v5.3.1設定変更

次の例では、一般的なカードコンポーネントを使用して、プレースホルダを適用して"ローディングカード"を作成。サイズと比率は2つの間で同じ。

見本
Placeholder
カードのタイトル

カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。

カードのボタン
設定例
<div class="d-flex justify-content-around">
  <div class="card" style="width: 18rem;">
    <img src="..." alt="..." class="card-img-top">
    <div class="card-body">
      <h5 class="card-title">カードのタイトル</h5>
      <p class="card-text">カードのタイトルに基づいて作成し、カードのコンテンツの大部分を構成する簡単なサンプルテキスト。</p>
      <a href="#" class="btn btn-primary">カードのボタン</a>
    </div>
  </div>

  <div class="card" aria-hidden="true" style="width: 18rem;">
    <img src="..." alt="..." class="card-img-top">
    <div class="card-body">
      <h5 class="card-title placeholder-glow">
        <span class="placeholder col-6"></span>
      </h5>
      <p class="card-text placeholder-glow">
        <span class="placeholder col-7"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-4"></span>
        <span class="placeholder col-6"></span>
        <span class="placeholder col-8"></span>
      </p>
      <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
    </div>
  </div>
</div>
【変更履歴】
  • 【v5.3.0】
    • ボタンリンクが無効の場合:a.btn.btn-primary.disabled.placeholder から href="#", tabindex="-1" を削除
  • 【v5.3.1】
    • ボタンリンクが無効の場合:a.btn.btn-primary.disabled.placeholderaria-disabled="true"(支援技術に要素が無効の状態だと伝える)の設定を追加

使い方(How it works)v5.3.1設定変更

.placeholder クラスとグリッド列クラス(例:.col-6)を使用してプレースホルダを作成し、width を設定。要素内のテキストを置き換えることも、既存のコンポーネントに修飾子クラスとして追加することもできる。

height が尊重されるように、::before を経由して .btn に追加のスタイルを適用。必要に応じてこのパターンを他の状況に拡張したり、要素内に   を追加して、実際のテキストがその場所にレンダリングされるときの高さを反映させられる。

見本
設定例
<p aria-hidden="true">
  <span class="placeholder col-6"></span>
</p>

<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
【設定】
  • span.placeholder.col-*a.btn.btn-{themecolor}.disabled.placeholder.col-* を入れる
アクセシビリティの設定】
  • 親要素(場合によっては同じ要素)に aria-hidden="true" 属性(スクリーンリーダー等での読み上げをスキップさせる)を入れる
アクセシビリティの設定】
  • ボタンリンクが無効の場合:a.btn.disabled.placeholder と同じ要素に aria-disabled="true"(支援技術に要素が無効の状態だと伝える)を入れる
【変更履歴】
  • 【v5.1.1】
    • ボタンリンクが無効の場合:a.btn.disabled.placeholdertabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)が抜けていたので追加
  • 【v5.3.0】
    • ボタンリンクが無効の場合:a.btn.disabled.placeholder から href="#", tabindex="-1" を削除
  • 【v5.3.1】
    • ボタンリンクが無効の場合:a.btn.disabled.placeholderaria-disabled="true"(支援技術に要素が無効の状態だと伝える)の設定を追加

幅(Width)

width は、グリッド列クラス、幅ユーティリティ、インラインスタイルを経由して変更できる。

見本
設定例
グリッドクラスで設定<span class="placeholder col-6"></span>
割合幅ユーティリティクラスで設定<span class="placeholder w-75"></span>
インラインスタイルで設定<span class="placeholder" style="width: 25%;"></span>
【設定】

カラー(Color)

デフォルトでは、placeholdercurrentcolor を使用。これは、カスタムカラーかユーティリティクラスで再定義できる。

背景色の種類

Primary:.placeholder.bg-primary

Secondary:.placeholder.bg-secondary

Success:.placeholder.bg-success

Danger:.placeholder.bg-danger

Warning:.placeholder.bg-warning

Info:.placeholder.bg-info

Light:.placeholder.bg-light

Dark:.placeholder.bg-dark

black:.placeholder.bg-black

デフォルト:.placeholder

設定例
<span class="placeholder col-12 bg-primary"></span>
【設定】

サイズ(Sizing)

.placeholder のサイズは、親要素の文字体裁スタイルに基づいている。サイズ修飾子を使用して .placeholder-lg, .placeholder-sm, .placeholder-xs にカスタマイズ:

サイズの種類

太め:.placeholder-lgmin-height: 1.2em

デフォルト(min-height: 1em

細め:.placeholder-smmin-height: 0.8em

更に細め:.placeholder-xsmin-height: 0.6em

設定例
太め<span class="placeholder col-12 placeholder-lg"></span>
細め<span class="placeholder col-12 placeholder-sm"></span>
更に細め<span class="placeholder col-12 placeholder-xs"></span>
【設定】
  • .placeholder.placeholder-{size}(上記の「サイズの種類」から選択)を追加

アニメーション(Animation)

.placeholder-glow, .placeholder-wave を使用してプレースホルダをアニメーション化し、何かがアクティブにロードされているという認識をより適切に伝える。

アニメーションの種類

発光型:.placeholder-glow

波長型:.placeholder-wave

設定例
発光型<p class="placeholder-glow">
  <span class="placeholder col-12"></span>
</p>
波長型<p class="placeholder-wave">
  <span class="placeholder col-12"></span>
</p>
【設定】
  • .placeholder.placeholder-{style}(上記の「アニメーションの種類」から選択)で囲む

CSS v5.3.0Sassから名称変更

Sass変数(Sass variables)v5.3.0変数から名称変更

デフォルトの設定
scss/_variables.scss 内 placeholders の設定$placeholder-opacity-max:           .5;
$placeholder-opacity-min:           .2;