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

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