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

相互作用ユーティリティ(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="#">このリンクは</a>クリックすることはできません。 ただし、<a href="#" class="pe-auto" tabindex="-1" aria-disabled="true">このリンクには</a> <code>pe-auto</code> クラスがあるのでクリックできます。</p>
【設定】
  • 使用したい要素に .pe-{auto|none} を入れる
アクセシビリティの設定】
  • .pe-{auto|none} と同じ要素に、tabindex="-1"(リンクにキーボードフォーカスを受け取らないようにする)と aria-disabled="true"(支援技術に要素が無効の状態であることを伝える)を入れる
【変更履歴】
  • 【v5.0.0-alpha2】
    • アクセシビリティの設定を追加