Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。
相互作用ユーティリティ(Interactions) v4.5.0新設
ユーザーがWebサイトのコンテンツと対話する方法を変更するユーティリティクラス。
テキスト選択(Text selection)
ユーザーがコンテンツを操作するときのコンテンツの選択方法を変更。InternetExplorerとLegacyEdgeは user-select
の all
値をサポートしていないため、.user-select-all
は両方のブラウザともサポートされていないので注意。
見本
●.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}
を入れる