CSSだけで次のことを実現したい

• 特定要素の選択を禁止にしたい
• 全テキスト要素を選択禁止にしたい

そういった選択禁止は簡単にできます。

僕自身も使う場面が多いと思うので、
CSSだけでテキスト選択禁止にする方法を紹介！

たった数行のコードを追加するだけです。

特定クラス要素のテキストを選択禁止にする方法

初めに特定要素の選択禁止について

例えば次のような要素があるとしましょう。

▼ 特定のクラス名(unselectable)を持つ

この要素は class="unselectable"  というクラス名を持ち、それを持つ要素に対してテキスト選択禁止効果を付けたいという状況です。

その場合、次のCSSコードでできます、

▼ 数行のコードを追加するだけ

重要なことは次の２点

• user-select: none
  ユーザーがテキスト選択できるかどうか。MDNの解説（https://developer.mozilla.org/ja/docs/Web/CSS/user-select）では「テキストを範囲選択できるかどうかを制御」と書いてあるが、Ctrl+Aでの全選択も含まれる。これを none  に設定する
• ::selection{background:none;}
  ユーザーが (テキストをマウスでクリックやドラッグすることで) 選択した文書の一部にスタイルを適用できる疑似要素。これを背景なしにしている

たったこれだけで選択禁止にできます。

マウス・タッチ操作に関わらず有効です。

全要素のテキストを選択禁止にする方法

お次は一部の要素に対してではなく、

• テキストをすべて選択禁止にする
• 例外なく全テキスト要素を選択禁止に

こういうケースも極まれにあるはずです。

そういう場合は先ほどのCSSを少し改造します。

▼ このようなCSSコード追加でOK

上記コードのアスタリスク（ * ）は全ての要素をあらわしてます。どんな要素だろうが例外なく適用されるという意味ですね。

ちなみにinput要素・textarea要素に対しても有効であり、カーソルは表示されるけど選択が一切できない不思議な感じになります。

これら方法は選択禁止でありコピー禁止ではない

以上の方法について少しだけ補足

これはテキスト選択禁止にできるだけです。

▼ こういう場面では全く役立たない

• テキストのコピーを禁止にしたい
• 文章の盗用などを防ぎたい

というかそもそも……

テキストコピー禁止とか技術的に不可能です。

▼ 上辺だけ選択禁止にしても抜け道は無限にある

• Ctrl+Uでソース開いてコピペ
• F12から開発者ツール開いてコピペ

もし本当にコピー・盗用されたくないなら、そんなコンテンツは世の中に出さないほうがいいです。頭の中に大事にしまっておく方がいい(笑

コピペ禁止なんて全く意味がありません。

テキスト選択禁止は不便さが生じることもある

テキスト選択禁止は限定的に使うべきです。
全テキスト選択禁止とかやると不便になります。

あと部分的にはコピー可にしたいテキストもあります。

そういう時はコピーボタンとか作ると便利です。

▼ 詳しい作り方はこの記事で書いた

PisukeCode - Web開発まとめ

 

1 Pocket

jQueryでテキストコピーボタンを数行で実装する手順

https://pisuke-code.com/jquery-way-to-make-copy-text-btn

ボタンを押すと、テキストがコピーされる的な・・・そういうボタンを作りたいことってないですか？実を言うと、jQuery ならそういうのでも数行くらいで作れます。ここでは忘備録も兼ね、そういうテキストコピーボタンを jQuery で作る手順まとめました。長いテキストをストレスなくコピーしてもらいたいとか、そういう時に役立つはずです。手順１．まずはjQueryを読み込もうまず jQuery が必須なので、最低限読み込みあとレイアウト調整に便利なので Bootstrap とかも読み込んどきます。(任意)<script src="https://cdnjs.clou...

簡単に作れるので必要なら試してみてください。