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

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

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

概要(About)

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

 

実例(Examples)

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

見本
Placeholder
カードのタイトル

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

カードのボタン
設定例
<div class="card">
  <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">
  <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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
  </div>
</div>

 

使い方(How it works)

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

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

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

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

幅(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}(上記の「アニメーションの種類」から選択)で囲む

 

Sass

変数(Variables)

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