CSS を使って Web ページにおけるテキスト選択を防ぐ (または有効にする) 方法

新しいカスケード スタイル シート (CSS) プロパティである -ms-user-select プロパティでは、JavaScript を使った Windows ストア アプリや Web ページでユーザーがテキストを選択できる場所を Web 開発者やアプリ開発者が制御できます。 このトピックでは、Web ページに -ms-user-select プロパティを実装する方法について説明します。(まったく同じ方法で、JavaScript を使った Windows ストア アプリに -ms-user-select プロパティを実装します。)このトピックは次のセクションで構成されます。

  user-select プロパティは、現在はどの World Wide Web Consortium (W3C) CSS 仕様にも含まれていません。当初は User Interface for CSS3 モジュールで提案されましたが、その後このモジュールが、user-select プロパティを含まない CSS3 Basic User Interface Module に取って代わられました。他の主要ブラウザーでは、このプロパティの独自のプレフィックス付きバージョンがサポートされています。これらの 3 つの実装の間には多少の相違があるため、アプリケーションを複数のブラウザーでテストするようにしてください。

はじめに

Web ページでテキストを選択できる機能は、多くのユーザー シナリオで重要です。一般的なニュース サイトを考えてみます。ほとんどのページにニュース記事が記載されており、ユーザーはその内容を共有するために選択したいと考えます。しかし、ページには、ユーザーが必要としない、または選択したいとは考えない、メニュー、広告、およびサイトの他の部分へのリンクも含まれている場合がます。Internet Explorer 10 の新しい -ms-user-select CSS プロパティのサポートにより、たとえば、ニュース記事の本文ではテキスト選択を許可し、メニューでは許可しないように指定できます。

-ms-user-select の使用

-ms-user-select プロパティでは 4 つの値を指定できます。

キーワード説明

element

指定された要素内で選択を開始するときに、テキストを選択できます。ただし、テキスト選択はその要素の境界に制限されます。

none

指定された要素内で選択を開始するときに、テキストを選択できません。ただし、指定された要素の外で開始されるテキスト選択では、引き続き要素を入力できます。

text

指定された要素内で選択を開始するときに、テキストを選択できます。テキスト選択はその要素の境界に制限されず、境界を越えて拡張できます。

auto

これは初期値です。要素に input 要素などの編集可能テキストが含まれる場合、または contenteditable が "true" に設定された要素の場合、テキストは選択可能です。それ以外の場合、選択は親ノードの -ms-user-select プロパティの値によって決定されます。

 

ニュース サイトのシナリオに戻ると、たとえば、ページ全体に対して -ms-user-select を "none" に設定して、その後、主要記事に対して -ms-user-select を "element" に設定できます。こうすることで、記事のテキストのみを選択可能にすることができます。ニュース記事の内容を選択したいと考える人は、おそらく、記事の直後のフッター要素を選択したいとは考えません。このため、-ms-user-select を"element" に設定することで、ユーザーはカーソルを正確な位置に置くことに気を使うことなく、記事の内容のみを簡単に選択することができます。これは特に、タッチでナビゲートするユーザーに当てはまります。

-ms-user-select を "none" に設定することで、任意のページ要素内でテキスト選択をオフにすることができます。ユーザーは指定されたテキスト ブロック内では、選択を開始できません。ただし、ページの別の領域でテキスト選択を開始した場合、-ms-user-select が "none" に設定されている領域も含め、ページのどの領域まででも選択し続けることができます。

実装例

IE Test Drive には、動作する -ms-user-select プロパティの実践的なデモンストレーションがあります。デモでは、複数の個別のテキスト コンテンツ領域のあるブログ投稿のモックアップを示します。ブログ全体 ("#blog") は、ブログ投稿 ("#blogPost") と複数のコメント (".comment") で構成されます。各領域は、inputtextarea 要素、および contenteditable プロパティが "true" に設定された要素を含む、さまざまな種類のテキスト要素で構成されます。

IE Test Drive の user-select デモのスクリーン ショット

ページ左側のポップアップ メニューには、ページ要素に -ms-user-select を設定するためのいくつかのオプションがあります。デモのポップアップ メニューに表示されている各オプションについて、簡単に説明します。

Normal selection (標準の選択)

このオプションは、ページのどの要素にも -ms-user-select が設定されていないことを示します。ユーザーは、選択する任意の要素で自由にテキストを選択できます。

Turn off selection except in editable content (編集可能なコンテンツ以外は選択をオフにする)

このオプションは、ブログ全体に対して -ms-user-select を "none" に設定します。名前フィールドやコメント フィールドなど、編集可能領域内のテキスト以外は、何も選択できません。


#blog { 
  -ms-user-select:none;
} 

Turn off selection everywhere (すべての場所で選択をオフにする)

このオプションは、ユーザー入力フィールド (inputtextarea 要素) や contenteditable が true に設定されたその他の要素も含め、すべてに対して -ms-user-select を "none" に設定します。編集可能領域内のテキストを含め、何も選択できません。


#blog, #blog input, #blog textarea, #blog *[contenteditable=true] { 
  -ms-user-select:none;
}

Select blog post content only (ブログ投稿内容のみを選択)

このオプションは、ブログ全体には -ms-user-select を "none" に設定し、"blogPost" ID を持つ要素には -ms-user-select を "element" に設定します。 つまり、ブログ投稿テキストのみ選択可能です。


#blogPost {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Select comments only (コメントのみを選択)

このオプションは、ブログ全体には -ms-user-select を "none" に設定し、"comment" クラスを持つ要素には -ms-user-select を "element" に設定します。 つまり、コメント テキストのみ選択可能です。


.comment {
  -ms-user-select:element;
} 

#blog { 
  -ms-user-select:none;
}

Selection starts in blog post or comments but can extend (選択はブログ投稿またはコメントで開始するが、拡張可能)

このオプションは、ブログ全体には -ms-user-select を "none" に設定し、"blogPost" ID または "comment" クラスを持つ要素には -ms-user-select を "text" に設定します。つまり、テキスト選択はブログ投稿またはコメント内でのみ開始可能ですが、これらのどちらの領域の外にも拡張できます。ただし、ブログ投稿またはコメントの外ではテキスト選択を開始できません。


#blogPost, .comment { 
  -ms-user-select:text;
} 

#blog { 
  -ms-user-select:none;
}

他のブラウザーのサポート

現時点では、Mozilla と WebKit では、user-select プロパティの独自のプレフィックス付きバージョンがサポートされています。ただし、その実装には、いくつかの相違点があります。最新情報については、次のいずれかのリンクをご覧ください。

関連トピック

IE Test Drive デモ: User-Select
Internet Explorer 10 のサンプルとチュートリアル

 

 

表示:
© 2014 Microsoft