CSS選択範囲非表示対応

CSS

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


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

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

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

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

実際に遭遇した例

　閲覧数:966　投稿日: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/30 19:48 更新
週間人気ページランキング ／ 5-23 → 5-29
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 4
2 方式1.色相H0°～360°、彩度S0%～100%または0～255、明度V0%～100%または0～255 3
2 RGBの種類 ／ ビットカラー | RGB(色) 3
2 「属性」「プロパティ」「アトリビュート」の違い | CSS 3
2 キャラクター無料作成ジェネレーター ／ FLASH ／ オンラインサービス | イラスト参考(デザイン) 3
2 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 3
2 RGB → HSL | 色変換(色) 3
3 画像縦横比の問題 | 画像 2
3 ツールチップ | 3系(Bootstrap) 2
3 HTML5で画像ファイル存在判定 | HTML5(HTML) 2
3 今後について 2
3 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 2
3 RGB最大値基準 2
3 RGB → HSL 彩度S 計算方式の違い 2
3 HSL → RGB 計算例 Wikipedia ／ HSL 206.6, 89.7, 54.1 → RGB 33, 150, 243 2
3 RGB → 色相H … 最小値基準 × 図形 の考え方 | 色変換(色) 2
3 考え方A.長さの比率で角度６０°を分割 ／ R≧B≧G 2
3 RGB → 色相H … 最大値基準 × 図形 の考え方 | 色変換(色) 2
3 方式1.色相H0°～360°、輝度L0～100(固定) 2
3 font-size | フォント 2
2026/5/30 5:05 更新