CSS3:文字や画像を選択できなくする

goto_jp 429views 更新:2014年10月17日

ブラウザ上の文字をドラッグしたり、ブラウザ上をWクリックすると選択状態になりますが、「user-select」プロパティを使うことでその選択をできなくします。

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

下記のテキストは実際に選択できなくさせてみた例です。

選択できないテキスト。

ピンポイントには選択できなくても、画面全体を選択してコピーされれば普通にコピーされるので、コピペ禁止に使えるわけではありません。

UIなどはテキスト選択できない方が「UIっぽい」感じもするので、見た目を調整する面で利用できます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません