IT系技術ブログ

【CSS】サイト内のテキストを選択できないようにしたい

PCだとマウスでテキストをダブルクリックや、

基点となる箇所をクリックしてマウスを動かして範囲選択ができる。

スマホだと基点となる箇所をタップし、テキストを指でなぞることで範囲選択ができる。

コピーされたくない文字や画像などのコンテンツがある場合、

サイト側でCSSを設定することで、文字や画像の選択を防ぎコピーを禁止することができます。

対処方法

選択させたくないコンテンツを持つ要素にCSSで「user-select」を設定してやります。

以下のコードをCSSで設定します。

※1{
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

※1:選択させたくないテキストを子に持つ要素(div, p, td)など

サンプル

テキスト

選択できる文字

選択できない文字
※半透明や青色にならず、範囲選択されません。

画像

選択できる画像

選択できない画像
※半透明や青色にならず、範囲選択されません。

余談

余談1

ブラウザの開発者モードでソースを覗かれたりページ丸ごとダウンロードされる場合なんかにはコピーされることを防ぐことはできません。

右クリックの操作を制御したり、開発者モード起動のショートカットキーを潰したりすることでページ表示後にちょっとした対処はできますが、完全に防ぐことは不可能だと思ってください。

余談2

table要素でカレンダーを作ったりした際、連続する日付(td)をクリックとドラッグで選択するようなJavaScriptを組んだりする場合にテキストを選択させたくない時なんかにも使えます。

余談3

テキストをコピー及び印刷させない対策といえば思い出すのは「歌詞を載せているサイト」。

コピー・印刷をさせないことで、サイト訪問者が著作権者(JASRAC)の著作権を侵害しないようにしている(らしい)。

なおかつ、歌詞が載せれるサイトJASRACがサービス締結しているサイト、ブログサイト、もしくは個人ブログでJASRACに許諾手続きをしたサイトだけので注意したほうがいい。

参考:利用許諾契約を締結しているUGCサービスの一覧

モバイルバージョンを終了