テキスト選択させない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;
}

参考になれば幸いです。

フロントエンド専門制作会社が教える速く正確なWeb制作のための実践的メソッドワークフロー構築、コーディング規約、制作&ディレクションTipsなど、高品質な制作を支える現場の仕事術

posted with ヨメレバ

株式会社モノサス/コーディングファクトリーマイナビ出版 2017-04-28

Amazon

楽天ブックス

∞Tadashi Suyama∞

user-select selection css アプリ

テキスト選択させないCSS

テキスト選択させないCSS

機能紹介

サイト内検索

最近の投稿

Perlで500エラー！原因は文字コードだけでなく改行コード

WordPressの標準メールアドレスの変更方法

LibSass（node-sass）からDartSassに移行の手順

明けましておめでとうございます

そろそろvuejs始める

ブログアーカイブ

ブログカテゴリー

著者

タグクラウド