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

相互作用ユーティリティ(Interactions)

ユーザーがWebサイトのコンテンツと対話する方法を変更するユーティリティクラス。

テキスト選択(Text selection)

ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。

選択の種類

●全選択:.user-select-all (user-select: all)

この段落は、ユーザーがクリックすると全て選択する。

●自動選択(デフォルトの動作と同じ):.user-select-auto (user-select: auto)

この段落は、デフォルトの選択動作を行う。

●選択不能:.user-select-none (user-select: none)

この段落は、ユーザーがクリックしても選択できない。

設定例
全選択<p class="user-select-all">この段落は、ユーザーがクリックすると全て選択する。</p>
自動選択<p class="user-select-auto">この段落は、デフォルトの選択動作を行う。</p>
選択不能<p class="user-select-none">この段落は、ユーザーがクリックしても選択できない。</p>
【設定】
  • 使用したい要素に .user-select-{all|auto|none} を入れる

 

ポインタイベント(Pointer events)v5.0.0-alpha1新設、v5.0.0-alpha2設定変更

Bootstrapは、要素の相互作用の防止や追加をするために .pe-none.pe-auto クラスを提供。

見本

●クリック不能:.pe-nonepointer-events: none

このリンクはクリックできない。

●クリック可能(デフォルトの動作と同じ):.pe-autopointer-events: auto

このリンクはクリックできる。

●入れ子の動作:

pointer-events プロパティはその親から継承されているため、このリンクはクリックすることはできない。ただし、このリンクには pe-auto クラスがあるのでクリックできる。

設定例
クリック不能<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">このリンクは</a>クリックできない。</p>
クリック可能<p><a href="#" class="pe-auto">このリンクは</a>クリックできる。</p>
入れ子の動作<p class="pe-none"><code>pointer-events</code> プロパティはその親から継承されているため、<a href="#" tabindex="-1" aria-disabled="true">このリンクは</a>クリックすることはできない。ただし、<a href="#" class="pe-auto">このリンクには</a> <code>pe-auto</code> クラスがあるのでクリックできる。</p>

.pe-none クラス(とそれが設定する pointer-events CSSプロパティ)は、ポインタ(マウス、スタイラス、タッチ)との相互作用を防ぐだけ。.pe-none を使用したリンクとコントロールは、デフォルトでは、フォーカスとキーボードユーザーの操作ができる。キーボードユーザーでも完全に無効化されるようにするには、tabindex="-1"(キーボードフォーカスを受け取らないようにするため)や aria-disabled="true"(など)のような属性を追加する必要がある場合がある。それらが支援技術に効果的に無効化されているという事実を伝え、JavaScriptを使用してそれらが実行可能になるのを完全に防止する。

可能であれば、より簡単な解決策は以下のとおり:

  • フォームコントロールの場合は、disabled HTML属性を追加
  • リンクの場合は、href 属性を削除して、非相互作用なアンカーかプレースホルダリンクにする
【設定】
  • 使用したい要素に .pe-{auto|none} を入れる
アクセシビリティの設定】
  • .pe-none 内の <a> 要素に、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)と aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • アクセシビリティの設定を追加

 

Sass v5.0.0-beta3追加

ユーティリティAPI(Utilities API)

相互作用ユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらを参照。

デフォルトの設定
scss/_utilities.scss 内 utils-interaction の設定    "user-select": (
      property: user-select,
      values: all auto none
    ),
    "pointer-events": (
      property: pointer-events,
      class: pe,
      values: none auto,
    ),