相互作用ユーティリティ（Interactions）

テキスト選択（Text selection）

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

選択の種類

設定例

全選択<p class="user-select-all">この段落は、ユーザーがクリックすると全て選択する。</p>

自動選択<p class="user-select-auto">この段落は、デフォルトの選択動作を行う。</p>

選択不能<p class="user-select-none">この段落は、ユーザーがクリックしても選択できない。</p>

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

Bootstrapは、要素の相互作用の防止や追加をするために .pe-none と .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 属性を削除して、非相互作用なアンカーかプレースホルダリンクにする

CSS

SassユーティリティAPI（Sass utilities API）v5.0.0-beta3追加、v5.3.0ユーティリティ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,
),