CSS選択範囲非表示対応

CSS

　状態:- 　閲覧数:4,238 　投稿日: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>


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

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

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

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

実際に遭遇した例

　閲覧数:929　投稿日: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/2/22 0:27 更新
週間人気ページランキング ／ 2-14 → 2-20
順位 ページタイトル抜粋 アクセス数
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 7
2 RGBの種類 ／ ビットカラー | RGB(色) 4
2 似顔絵ジェネレーター : 似顔絵メーカー ／ NIGAOE MAKER 4
2 「bgcolor」「background-color」「background」の違い | CSS 4
2 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
3 「.epsファイル」はあらゆるグラフィックソフトで編集できるとは限らない | Fireworks 8(Fireworks) 3
3 RGB ⇔ Lab | 色変換(色) 3
3 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
3 Create Link(Chrome 拡張機能) カテゴリー 3
3 Design 0 3
3 画像縦横比の問題 | 画像 3
3 「東京都」のカラーコード取得は難しい | カラーコード(色) 3
4 Chrome のタイプ 及び 設定 | Google Chrome(ブラウザ) 2
4 Google Chrome拡張の基礎 | Chrome 拡張機能 2
4 「max-width:100%;」と「width : 100%;」の違い | CSS 2
4 「Photoshop CS3」で、レイヤーを他のPSDへコピーする方法 | Photoshop 2
4 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません | Google Chrome(ブラウザ) 2
4 数値データ型(CSS) カテゴリー 2
4 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 2
4 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 2
2026/2/21 5:05 更新