テキスト選択させないCSS

テキスト選択させないCSS

  • 2017-04-30  最終更新日:2017-04-30

今回はcssのプロパティのご紹介です。

サイトによってですが選択できないサイトとかを見たことがないでしょうか?あれ?選択できないぞ。。。

これはCSSで制御しているからなんです。いやJavascriptかもしれませんが。。。

最近は(すでに数年前からできますが。。) CSSで制御できるのでそのCSSをご紹介します。


スポンサーリンク


機能紹介

実際にCSSでdiv要素をボタンにしてあります。普通はクリックすると文字が選択されてしまうのですが、user-select:noneにすれば選択されないようになります。

選択無効ボタン
選択されるボタン
.cssbutton {
	width:200px;
	margin:15px auto;
	text-align:center;
	background-color: #333;
	border: 2px solid #ccc;
	border-radius: 10px;
	color: #fff;
	box-shadow:0 5px 0 #ccc;
	line-height: 50px;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
}

逆にテキスト選択したときの色などを変える方法もご紹介します。::selection疑似要素でできます。

ここのテキストを選択すると色背景色が赤で文字が白色になります。
.select::selection {
	background: red;
	color: white;
}
.select::-moz-selection {
	background: red;
	color: white;
}

参考になれば幸いです。


∞Tadashi Suyama∞

user-select selection css アプリ
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

サイト内検索

最近の投稿

アイキャッチ
大江の郷ヴィレッジにいってきました

正月明けの3連休に大江ノ郷ヴィレッジに行ってきましたのでその感想を述べたいと思います。 * [大江ノ郷自然牧場](http://www.oenosato.com/coco_top.html) ...

13 Jan 2018

アイキャッチ
明けましておめでとうございます

明けましておめでとうございます。 本年もよろしくお願いします。 今年の初詣は比較的天候も良く人も多かった気がしますね。 昨年に引き続き勝田神社の夜中に行って参りました。大晦日深夜の初詣は昨...

05 Jan 2018

アイキャッチ
年末年始のお知らせ

今年ももう終わりですね。 当事務所は12/29〜1/4までお休みでございます。 1/5日から営業開始いたします。 よろしくお願いします。 ### 年末年始の営業時間 12/29-1...

29 Dec 2017

アイキャッチ
JPEGデータを拡大してもキレイに保存する方法

オンラインで画像を高画質化かつ拡大してくれるとても便利なサイトです。粗い画像でお困りの方は個々で解決できます。結構すごいです。何がすごいってボケボケの画像がシャープにスッキリになります。小さい画...

23 Dec 2017

アイキャッチ
ワードプレスで各カテゴリーページの先頭に固定表示

ワードプレスの先頭に固定表示機能は便利で特定の記事を固定しておく場合にはとても便利です。この機能って基本的にトップページにしか反映されないのでカテゴリーページにも対応できたらと思い設置してみまし...

16 Dec 2017

著者

ウェブエンジニアのSUYAMAのブログです。

WEBに関することや個人的に関心のあることについて書きます。主に技術系ブログです。

タグクラウド

user-select selection css アプリ
フッターイメージ