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

相互作用ユーティリティ（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-{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,
		),