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

Similar Posts

最近の投稿

アイキャッチ
バックドア型ウィルスにかかった時のワードプレスセキュリティ対策

今回はセキュリティについてご紹介したいと思います。ワードプレスでのセキュリティ対策って何をすれば良いの?という方も多いかと思います。相談が多かったので記事にしました。 ほんとうは怖いワードプレ...

14 Sep 2017

アイキャッチ
ワードプレスでJSのインラインスクリプト設置方法

今回はワードプレスにインラインスクリプトを入れる場合の対処方法です。 jQueryなどでオプション指定したりタグなどを入れ込んだりするときに有効です。 結構簡単です。割と最近なんですがそれ用...

02 Sep 2017

アイキャッチ
ブートストラップv3からv4の変更点をご紹介

ようやくv4のβ版が登場しました。あれから2年です。。。長いですね。 あとはβ版が何個か出たら正式リリースするようなのでもう少しで正式版はリリースしそうです。 多少変わるところはあるかもしれ...

27 Aug 2017

アイキャッチ
電話番号の正規表現をJavaScriptを使ってチェック

さて今回はフォームの中での電話番号正規表現についてご紹介します。 電話番号を入力する際に携帯と固定電話どちらでも入力可能の場合にどちらの場合でも桁数チェックができるようにしたいと思います。今回...

19 Aug 2017

アイキャッチ
画面共有中だけ通知を一時的にオフ機能のMac用アプリMuzzle

本日はアプリのご紹介、画面を共有しているときやビデオ通話などをしているときに通知を一時的にオフにするアプリのご紹介です。 プレゼンの発表中などスクリーン共有やビデオ通話などの際に役立ちます。S...

13 Aug 2017

著者

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

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

タグクラウド

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