テキスト選択させないCSS

Apr 30, 2017

テキスト選択させないCSS

2017-04-30 最終更新日:2017-04-30
user-select selection css アプリ

今回は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∞

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

Similar Posts

最近の投稿

アイキャッチ
画像加工・写真編集が簡単にできるアプリfotorのご紹介

今回は画像加工や編集ができるfotorのご紹介です。アプリの方が有名ですが、実はサイトからも使えるというのはご存じだったでしょうか?公式サイトはコチラ⇒[画像加工・写真編集|Fotor - 無料...

20 May 2017

アイキャッチ
使いやすいメモツールDropBoxPaper

軽量なメモ帳はGoogleKeepを使っておりましたが[クラウド時代にオススメしたいメモアプリ](/blog/memo/2016/03/12/cloud-memo.html)で感想を述べておりま...

15 May 2017

アイキャッチ
みろくの里 ダイナソーパーク

行ってみた率直の感想は蒜山高原センタージョイフルパークと感じは似ています。昔ながらのアトラクションといった感じです。いつか来た道という昭和30年代の昔ながらの道といったところもあります。こどもは...

07 May 2017

アイキャッチ
テキスト選択させないCSS

今回はcssのプロパティのご紹介です。 サイトによってですが選択できないサイトとかを見たことがないでしょうか?あれ?選択できないぞ。。。 これはCSSで制御しているからなんです。いやJava...

30 Apr 2017

アイキャッチ
GIF Brewery3の使い方をご紹介

GIF Brewery3のご紹介です。Macしかないアプリです。そして有料です。600円 ビデオファイルからgifファイルを作成することができ、また、iOSやMac画面録画からGIFを作成する...

25 Apr 2017

著者

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

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

タグクラウド

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