CSS選択範囲非表示対応

CSS

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


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

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

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

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

実際に遭遇した例

　閲覧数:986　投稿日: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/7/19 23:25 更新
週間人気ページランキング ／ 7-12 → 7-18
順位 ページタイトル抜粋 アクセス数
1 Design 0 5
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 5
2 「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 | AI画像生成 4
2 SeaMonkey 2.7.2 4
3 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する | Google Chrome(ブラウザ) 3
3 絶対パス | HTML 3
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 3
4 ブックマークアイコンをクリックした際、最初から編集画面を出す方法を知りたい | Google Chrome(ブラウザ) 2
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
4 RGBの種類 ／ ビットカラー | RGB(色) 2
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 2
4 「CSSプロパティ」書く順番 | コーディングルール 2
4 Illustrator CS3(Illustrator) カテゴリー 2
5 Chrome で右クリックから保存しようとするとフリーズする → フォルダーオプションで「別のプロセスでフォルダーウィンドウを開く」 | Google Chrome(ブラウザ) 1
5 IrfanView 1
5 「ログイン情報を保持」の名称 1
5 Chromeで(TikTokなど)特定Webサイトの音を消すには、該当タブを右クリック後、「サイトをミュート」をクリックします。 | Google Chrome(ブラウザ) 1
5 「transform:translate3d();」でスマホ実機画面が一瞬だけチラつく → 「backface-visibility:hidden;」指定すると解消される | CSSトラブル対応(CSS) 1
5 Chrome コンソール画面で CSSの:hover 適用スタイルを確認 | Google Chrome(ブラウザ) 1
5 検索エンジンなら画像掲載はOKなの？ | 画像著作権(画像) 1
2026/7/19 5:05 更新