SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

画面上の文字や画像を選択できないようにする

問題

文字や画像をダブルクリックされると、選択状態になってしまう。

文字やリンクや画像に、onclickで何らかの処理をするスクリプトを作っているのだが、カチカチクリックされたときやドラッグされたとき選択状態になると、どうにもかっこ悪い。

ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる?

答え

CSS3では以下のように書ける。

user-select: none;

ただ、だいぶ普及した角丸をするborder-radiusのようには広く実装されていないようなので、現状では各ブラウザの独自実装にも合わせておく必要がありそう。

以下のように、各実装にあわせた記述をしておく。

user-select: none; /* CSS3 */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari、Chromeなど */
-ms-user-select: none; /* IE10かららしい */

さらにIEに対応するためには、以下のようにunselectable属性を指定する。

unselectable="on"

IEだといまひとつ期待したようにかっちり効いてくれないので、必要な場合は選択イベントが発生したときに選択を解除するJavascriptも追加する方法もあるが、あまり改善されない。

onSelectStart="return false;"

IEに関してはIE10に期待しておくことにする。

デモ

↓「user-select: none;」のみを指定したspan要素。

(サンプルテキスト)CSS3で指定した、選択させないようにしたテキスト。

↓さらに、各実装にあわせてスタイルシートに記述を追加

(サンプルテキスト)CSS3と各ブラウザ向けの指定をした、選択させないようにしたテキスト。

↓さらに、unselectable=”on”も追加

(サンプルテキスト)IE独自属性も追加して、選択させないようにしたテキスト。

↓さらに、onSelectStart=”return false;”も追加

(サンプルテキスト)IE対策のスクリプトも追加して、選択させないようにしたテキスト。

関連するメモ

コメント(4)

困った探求者 2012年8月17日 23:22

色々書いてくれていますが、
IE9だけはどうしても良い方法が見つかりませんでした。
IE9は曲者ですから、ここでお教え願えましたJavaScript で対処するしかないのかもしれませんね。

IE9について、CSS だけを用いて選択できなくする方法が御座いましたら、
是非またお教え下さいませ。

情報ありがとう御座いました。

匿名 2017年1月12日 23:40

右クリック禁止と同類のバカw

匿名 2017年8月29日 11:17

↑こいつはドラッグドロップ実装する時、どうしてんだろ?

匿名 2020年9月19日 21:08 匿名 2020年9月19日 21:08

↑2 意図せず選択した時の見映えの問題だぞ