[翻訳] CSS を使用してテキスト選択を無効にする_html/css_WEB-ITnose

原文: CSS でテキスト選択を無効にする

Web ページ上のテキストの一部が選択されないようにする必要がある場合があります。ユーザー選択 CSS 機能を使用すると、この要件を達成できます。

例

以下は、disable-selection クラスを使用するスタイル ルールです。これが HTML 要素に適用されると、この要素を選択できなくなります。

.disable-selection{    -moz-user-select:none; /* Firefox */     -ms-user-select:none; /* Internet Explorer */   -ktml-user-select:none; /* KHTML浏览器（比如：Konqueror） */ -webkit-user-select:none; /* Chrome,Safari,and Opera */   -webkit-touch-callout:none; /* Disable Android and IOS callout */}

これらのスタイルに関するいくつかの詳細の説明:

• -webkit-user-select は Chrome、Safari、Opera 用です (-o-user-select を使用する必要はありません)。

• 接頭辞のないuser-selectは意図的に省略されています。

• -webkit-touch-callout 属性は、モバイルデバイスでのタッチ後のポップアップを無効にできます。以下のように、非表示にすることができます。

デモ

デモを見る

常に覚えておいてください

1 つの罠: user-select は W3C 仕様の標準 CSS 機能ではありません。ただし、user-select はブラウザ接頭辞を追加することでブラウザを適切にサポートします。

前の例では、接頭辞なしの user-select 属性宣言を使用しませんでした。これは、この属性が Web 標準に存在しないためです。これは、IE 独自の CSS プロパティ ms-filter または -ms-text-kashida-space の使用と同様に使用できます。

その他の注意事項:

• user-select は バグが多く不安定 です。特に、テキストの選択がブロックされていないテキストの部分から選択を開始する場合は、テキストを選択できる場合があります。

• [すべて選択] ショートカット キーを使用すると、ブロックされたテキスト が選択されてしまうことがあります (Win: Ctrl+A/Mac: Cmd+A)。 IE11 ではこの状況がよくわかります。

• これは、テキストが選択されないようにする確実な戦略ではありません。 CSS は簡単にブロックできます。この手法は非標準の CSS 機能に依存しているため、将来的にこのプロパティの持続可能なサポートについては多くの不確実性があります。

• テキスト選択をブロックするのは迷惑です。 私は段階的な改善プロセスの一環としてこのテクニックを使用します。このユーザー選択機能をサポートするブラウザーとデバイスを使用しているユーザーのユーザー エクスペリエンスが向上する場合にのみ使用してください。ただし、all セレクター (*) や body のような広範囲の CSS セレクターには決して設定しません。

• このユーザー選択属性はスタイルシートを壊す可能性があります。標準への準拠が非常に重要な場合、この属性を使用すると、CSS 検証サービスの使用などの標準テストを使用するときに問題が発生します

ブラウザのサポート

更新日: 2015 年 3 月

ブラウザ	サポートされているバージョン (上記)
Chrome	6
Firefox	2
IE	10
Safari	3.1

モバイル版

ブラウザ	サポートされているバージョン (上記)
Chrome(Android)	2.1
Safari(IOS)	3.2