CSS選択範囲非表示対応

CSS

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


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

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

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

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

実際に遭遇した例

　閲覧数:965　投稿日: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/5/23 0:10 更新
週間人気ページランキング ／ 5-15 → 5-21
順位 ページタイトル抜粋 アクセス数
1 「属性」「プロパティ」「アトリビュート」の違い | CSS 4
1 RGBの種類 ／ ビットカラー | RGB(色) 4
1 Chromeでmhtml保存を選択できなくなったので、拡張機能「Save Page State」を導入 | Chrome 拡張機能 4
1 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 4
1 favicon.ico の問題 | HTML 4
1 「Firebug Lite for Google Chrome™」アンインストール 4
2 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 3
2 Design 0 3
2 HSV → RGB 計算方式の違い | 色変換(色) 3
2 アイコン | 3系(Bootstrap) 3
2 ｢レイヤー」＋「レイヤー効果」をコピーして新規psdにペースト | Photoshop 3
2 ドロワーメニューが表示されない理由 | モバイルデザイン(デザイン) 3
3 「max-width:100%;」は原寸画像幅までしか拡大しない ／ 「width:100%;」は要素幅まで拡大する 2
3 textareaのスクロールバーが横へはみ出す場合は、「box-sizing:border-box;」を指定する | CSS 2
3 CSS 「id」「class」名 に関する調査履歴 1 | 命名規則(コーディングルール) 2
3 私の「Google Chrome」設定 | Google Chrome(ブラウザ) 2
3 チェック柄　斜め線 | CSS 2
3 Sleipnir | ブラウザ 2
3 スキップリンク | アクセシビリティ(UI) 2
3 「Create Link」復活 | Create Link(Chrome 拡張機能) 2
2026/5/22 5:05 更新