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