다음을 통해 공유

CSS user-select を使用して選択を制御する

  • 아티클

本記事は、マイクロソフト本社の IE チームのブログ から記事を抜粋し、翻訳したものです。 

【元記事】Controlling Selection with CSS user-selectJanuary 12, 2012 7:18 PM

IE10 Platform Preview 4 リリースには、新しい CSS プロパティである -ms-user-select (英語) のサポートが組み込まれています。Web 開発者は、このプロパティを使うと、比較的簡単に Web サイトで選択できるテキストを正確に制御できます。私には、コンピューターで文章を読むときに、テキストを選択する癖があります。このような読み方をするのは、私だけ (英語) ではありません (英語)。インターネット上のテキストを選択することが重要な場面は、他にも多くあります。

例として、典型的なニュース Web サイトを考えてみましょう。ほとんどのページにはニュースの記事が含まれています。ユーザーがテキストを選択しながら読む場合や、内容を共有したいと思う場合があるので、記事の内容は選択できる必要があります。また、ニュース Web ページには、メニューやサイトの他の部分へのリンクもあります。このような項目をユーザーが選択しなければならないケースは、あまりないでしょう。そこで -ms-user-select を使用すると、ニュース記事ではテキストを選択できようにして、メニューではテキストを選択できないようにすることができます。

IE Test Drive サイト (英語) に、このような指定を行うサンプルがあります。

-ms-user-select のマークアップ パターンの 1 例を示す、Test Drive の user-select のデモのスクリーンショット。

ページ全体に -ms-user-select:none を設定してから、ブログ記事を含む要素に -ms-user-select:element を設定することで、ブログ記事の内容のみを選択できるようにしています。-ms-user-select:element は、IE によって初めて導入された新しいプロパティで、多くの場面で役立つのではないかと思います。要素に -ms-user-select:element を設定すると、その要素のテキストをユーザーは選択できますが、選択できるのは、この要素の範囲内に制限されます。ユーザーがニュース記事のコンテンツを選択する場合に、記事のすぐ下にあるフッター要素まで選択したいと思うことはないでしょう。要素に -ms-user-select:element を設定すると、マウスで選択範囲を正確に指定できているかどうかを気にせずに、記事の内容だけを簡単に選択できるようになります。

-ms-user-select に設定できる値は、次の 4 つです。

  • text – テキストを選択できます。
  • element – テキストは選択できますが、指定した要素の範囲内に制限されます。
  • none – テキストを選択できません。
  • auto – 要素に、input 要素や contenteditable 要素などの編集可能なテキストが含まれる場合は、テキストを選択できます。そうでない場合は、親ノードの値によって選択できるかどうかが決まります。

auto は、-ms-user-select の既定値です。

テキストの選択を無効にするには、-ms-user-select に none を設定します。IE では、テキストの設定が -ms-user-select:none の場合、このテキスト ブロック内の任意の位置を起点にしてテキストを選択することはできません。ただし、ユーザーが同じページの別の領域を起点にテキストを選択した場合は、-ms-user-select が none に設定されている領域も含め、ページの他の領域も併せて選択できます。Firefox では、–moz-user-select:none を設定すると、設定されている領域内から選択を開始することはできず、他の領域から選択を開始してもこの領域を含めることはできません。Webkit では、–webkit-user-select:none を設定すると、テキストは選択されていないように見えますが、コンテンツをコピーして貼り付けてみると、テキスト コンテンツは選択されていることがわかります。

user-select は、もともと CSS3 のユーザー インターフェイス (英語) モジュールで提唱されたものです。このモジュールは、その後 CSS3 基本ユーザー モジュール (英語) に置き換えられましたが、新しいモジュールでも、まだこのプロパティの定義は確定していません。Mozilla (英語) と Webkit (英語) は、このプロパティの独自の標準化前バージョンをサポートしています。ただし、前に述べたように、実装に違いがあります。

ぜひ、IE Test Drive サイト (英語) のサンプルを試し、ご意見をお寄せください。

— Internet Explorer 担当グループ プログラム マネージャー Sharon Newman