CSS選択範囲非表示対応

CSS

　状態:- 　閲覧数:4,334 　投稿日:2013-03-25 　更新日:2013-03-25

やりたいこと


・CSSによる選択範囲を表示させたくない

対応


user-select: none; /* CSS3 */
-moz-user-select: none; /* Firefox */
-webkit-user-select: none; /* Safari、Chromeなど */
-ms-user-select: none; /* IE10かららしい */
・IEに対応するためには、以下のようにunselectable属性を指定
<div id="content" unselectable="on">
</div>


どういう時に利用するか？

　閲覧数:946　投稿日:2013-03-25　更新日:2013-03-25
文字や画像をダブルクリックされると、選択状態になってしまう。

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

ダブルクリックしたときやマウスを使って選択しようとしたときに、選択状態にならないようにできる？
・この内容を読んで初めて気が付いたんだけど、「文字や画像をダブルクリックすると、選択状態になる」というのは、ブラウザのデフォ仕様なんだね
・てっきり、自分は、aタグ絡みの何かかと思っていたよ
・普通のテキスト文字列でも、ダブルクリックされると、選択状態になるのね(無意識に利用してはいたけど、改めて読むまで全く気が付かなかったわ)

実際に遭遇した例

　閲覧数:974　投稿日:2013-03-25　更新日:2013-03-25

調査のきっかけ


・詳細はこちらに記載しているが、調査したきっかけは以下の通り

1.ページ内容から目次を自動生成
2.生成した目次を、ボタン一つで「オープン」「クローズ」できるよう変更
3.ところが、実際に試してみたところ、何回もクリックしている内に、不定期で、目次範囲が全選択されてしまう不具合があることに気が付く
※この時点で、「文字や画像をダブルクリックすると、選択状態になる」ということを知らなかった
4.調査して初めて「user-select: none;」というプロパティがあることを知る

感想


・2010年時点でこの件に関するエントリー書いている人は凄いと思う
・知らないCSSプロパティ多過ぎ＞オレ

親要素の背景色を、CSSで打ち消したい

「マウスオーバー」「ロールオーバー」「ホバー」の違い



類似度ページランキング
順位 ページタイトル抜粋 ％
1 CSS選択範囲非表示対応 92
2 SVG表示サイズ 30
3 OOCSS 24
4 PC画面で、モバイル表示確認 23
5 「Illustrator CS3」で出力範囲指定 22
6 CSS仕様書 22
7 CSS色指定 22
8 色空間の範囲 22
9 Chromeデバッグする際CSSが()で表示される 22
10 CSSセレクタ 21
11 マウスオーバーで「リンク画像」拡大表示をCSSで実装 21
12 「兄弟要素の兄要素を選択するCSSセレクタ」は存在しない 20
13 スマートフォン対応 19
14 Photoshop CS3 「全てのメニュー項目を表示する」 19
15 以前のHTML対応 19
16 Firefox8.0で、Cookieを表示 18
17 トリミングする際、範囲を決定する入力ボックスが表示されなかったら 18
18 CSSで出来ないこと 18
19 フォーム要素に対する(私の)CSS適用ルール 18
20 画像の上にテキスト表示 17
2026/6/21 2:04 更新
週間人気ページランキング ／ 6-13 → 6-19
順位 ページタイトル抜粋 アクセス数
1 Design 0 6
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
3 キャラクター無料着せ替えジェネレーター Dress up game ／ オンラインサービス | イラスト参考(デザイン) 4
4 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 3
4 RGBの種類 ／ ビットカラー | RGB(色) 3
4 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
4 Adobe Camera Raw 4.0 | Photoshop 3
5 Firebug過信は危険 | CSS 2
5 resizeが効かない場合は、min-heightを設定してみる | CSS 2
5 １ 2
5 Flickrがサポートするライセンス 9 ＋ 特別なライセンス 2 | 画像著作権(画像) 2
5 画像縦横比の問題 | 画像 2
5 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません | Google Chrome(ブラウザ) 2
5 UI カテゴリー 2
5 MediBang Paint | ソフトウェア 2
5 _notesフォルダ削除 | Dreamweaver8(Dreamweaver) 2
6 「OOCSS」とは別の考え方？ | 命名規則(コーディングルール) 1
6 Chromeブックマークを誤って削除しても、前日のChromeブックマークバックアップは自動取得している ／ Chromeブックマーク自動でバックアップ | Chromeブックマーク(ブラウザ) 1
6 ダウンロードしたモックアップベクター素材の感想を書いてみる予定のエントリー | Photoshop CS3(Photoshop) 1
6 Firefox5.0 ／ ブラウザ関連メモ | Firefox(ブラウザ) 1
2026/6/20 5:05 更新