コニファ・ロゴ

ツール集:[CSS]「user-select:none」によるコンテンツ選択制限について

CSSの「user-select:none」を使って、一部または全部のコンテンツを選択できなくしているサイトをたまに見かけます。コンテンツをコピーしてほしくないという意思表示だと思いますが、現実的にはwebで不特定多数を対象に公開しているものについてコピーを防ぐ手段はほとんどありません。JavaScriptを利用した選択制限、コピー制限は、閲覧側がJavaScriptを無効にすれば効果はありませんし、「user-select:none」を使っていてもページのソースを見れば、コンテンツのありかがすべてhtmlに書かれています。結局のところ、制限をかけてもwebに少し詳しい閲覧者に対しては心理的効果しか望めませんし、ユーザビリティ的にも閲覧者側の行動を制限するというのは好ましいものではありません。

CSSのuser-selectプロパティについては、次のページでやや詳しく解説しています。
関連ページ CSS 「user-select」を使って、ユーザー側のテキスト選択可能なエリアを制限

user-selectプロパティの効果

ブラウザごとに挙動がやや違うようです。最も顕著なのは、WindowsのInternet Explorer11です。ベンダープレフィックス付きの「-ms-user-select」プロパティを使用しますが、このプロパティでnoneを指定した箇所は選択できなくなるものの、他のコンテンツと一緒に選択、または全体を選択すると、効果が無くなり選択できてしまいます。
同じくWindowsのEdgeですが、こちらも以前はIE11と同じような挙動と言われていましたが、現在は他のコンテンツと一緒に選択しようとしても選択できないようです。

user-selectプロパティを使ったサンプル

ここは、user-selectプロパティを使ったサンプルです。

上の薄い緑色の背景のテキスト部分は、次のソースのようにuser-selectプロパティを指定した確認用サンプルです。Internet Explorer11やEdgeを使って、この部分だけ選択、あるいは他の部分と一緒に選択すると、挙動の違いが確認できます。

サンプルのCSSソース(user-select関連以外省略)

div.us-none {
	user-select: none; 
	-moz-user-select: none; 
	-webkit-user-select: none; 
	-ms-user-select: none; 
	}

user-selectプロパティの選択できない状態を解除するブックマークレット

JavaScriptなどでuser-selectプロパティの値を初期値のautoに変更すれば、選択できない状態を動的に解除できます。このブックマークレットは、CSSのuser-selectとそれの各ベンダープレフィックス付きのプロパティの値を初期値のautoに書き換え、読み込み直すものです。

使い方:

  • 下側の背景が薄い青色のリンク部分をブラウザのブックマークバーにドラッグし、表示させます。
  • もし名前を付けるよう言われたら名前を付けます。
  • user-selectプロパティが使われているページに移動します。このページのままでもOKです。
  • ブックマークレットをクリックします。
  • user-selectプロパティの値がautoに変わり、選択できない状態が解除されます。

 

 

 

戻るボタン