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

相互作用ユーティリティ（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-none（pointer-events: none）

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

●クリック可能（デフォルトの動作と同じ）：.pe-auto（pointer-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,
    ),