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

最近の投稿

アイキャッチ
chromeのデフォルト機能でキャッシュ削除する方法

つい先日、クロームのcache killerというエクステンションが使えなくなりました。。。常にキャッシュを削除してくれるので良かったのですが、代わりの物を探していたらデフォルトでキャッシュを削...

11 Nov 2017

アイキャッチ
MacのイラストレータデータをPDFに変換した容量を削減

なぜかMacのイラストレーターからPDFに保存した際ってほとんど容量変わらないですよね。とりあえず適当にイラストレーターデータを作ってみました。画像を入れてイラストデータ入れてtestdata....

04 Nov 2017

アイキャッチ
Macで画像の変換やリサイズ一括処理の方法

Mac標準で画像一括処理が出来るんです。フォルダアクションを使うことでjpgからpngやpngからjpgが可能です。 やり方は簡単です。アクションを加えたいフォルダを右クリックでサービスからフ...

27 Oct 2017

アイキャッチ
有名なアイコンフォントをpngで使う方法

サイトのカンプを作るときに最近ではアイコンフォントを使うことはもう当たり前になっていますが、アイコンフォントをフォトショップやスケッチに埋め込むときに便利なサイトをご紹介します。 fa2png...

20 Oct 2017

アイキャッチ
500 Internal Server Errorのcgiエラーの対処方法

久しぶりにcgiのフォームを使いました。昔はよくフォームならcgi(perl)だったのですが最近はほとんどワードプレスのプラグインだけで行うことが多くなりましたがまだ少なからず対応する機会がある...

14 Oct 2017

著者

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

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

タグクラウド

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