【56】ユーザーのテキスト選択などを制御する user-selectプロパティ

最終更新日:2020年04月15日  (初回投稿日:2020年04月15日)

user-selectプロパティは、ユーザーが要素内のテキストや画像をどのように選択できるか指定します。

user-selectは、W3C の Basic User Interface Module Level 4 で登場するプロパティで、2020年4月現在まだドラフトですが、たいていのブラウザがベンダープレフィックスを付ければ反応するようです。(参考:Can I use 2020年4月記)

本日のINDEX
  1. user-selectプロパティの値
    1. user-selectプロパティのベンダープレフィクス
  2. user-selectプロパティを使ってみる

参考:
CSS Basic User Interface Module Level 4 | W3C Working Draft
user-select - CSS | MDN

user-selectプロパティの値

user-selectプロパティの値は以下のものがあります。

user-selectプロパティの値
キーワード auto がデフォルト値。
text、none、contain、all
グローバル値 resize: inherit; 親の値を継承
resize: initial; 継承した親の値を解消しデフォルト値に戻す
resize: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作
値の継承 しない 適用できる要素 すべての要素
疑似要素「::before 」「::after」

user-selectプロパティのベンダープレフィクス

user-selectプロパティは、ベンダープレフィクスを付けて対応するブラウザがけっこうあります。 (参考:Can I Use | 2020年4月記)

IE と Edge18 までは「-ms-」が必要です。
Safari(iOS Safari 含む)は「-webkit-」が必要。
古いFirefox と Firefox for Android は「-moz-」が必要。

ということで、3つのベンダープレフィックス付きと、標準仕様を書けば、今のところ間違いなさそう。

.sample {
  -ms-user-select: all;      /*IE / Edge*/
  -moz-user-select: all;     /*Firefox*/
  -webkit-user-select: all;  /*Safari*/
  user-select: all;          /*標準仕様*/
  }

user-selectプロパティを使ってみる

それぞれのキーワードを使ったサンプルです。

<div>要素(黄色のボックス)に user-selectプロパティを指定しました。
その中に「テキスト」と、子要素として <input>要素(チェックボックス)を入れています。

サンプルのテキスト(チェックボックスのテキストも)を選択してみてください。

auto
要素内のテキストはブラウザのデフォルトに従って選択されます。
疑似要素「::before 」「::after」に指定した場合は「none」と同じ扱いになります。
見本(テキストを選択してください)
none
テキストの選択ができません。チェックボックスは選択できます。
見本(テキストを選択してください。できないかもだけど)
W3C仕様書は「コピー防止機能ではない」と明記しています。ブラウザは ユーザーがテキストを選択する代替方法を提供する場合があります。
text
要素内のテキストが選択ができます。
見本(テキストを選択してください)
all
1クリック(1タップ)で、要素内のすべてのテキストが一発で選択できます。
見本(テキストを選択してください)
contain
その要素内で開始された選択を、その要素の外まで続かないようにします。
(その要素内で選択が終わる。外のテキストまで選択できない)
見本(テキストを選択してください)
*これは元々IEの独自仕様で、IE、Edgeのみサポートしています(2020年4月記)
element値は、IE独自のもので contain と同じです。

サンプルのHTMLはこちら。

<dl>
  <dt>auto</dt>
  <dd>
    <div>
      見本(テキストを選択してください)<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>none</dt>
  <dd>
    <div class="us-none">
      見本(テキストを選択してください。できないけど)<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>text</dt>
  <dd>
    <div class="us-text">
      見本(テキストを選択してください)<br>
     <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>all</dt>
  <dd>
    <div class="us-all">
      見本(テキストを選択してください)<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>

  <dt>contain</dt>
  <dd>
    <div class="us-contain">
      見本(テキストを選択してください)<br>
      <label><input type="checkbox"> チェックボックス</label>
    </div>
  </dd>
</dl>

サンプルのCSSはこちら。

.us-none {
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;}
.us-text {
	-moz-user-select: text;
	-webkit-user-select: text;
	-ms-user-select: text;
	user-select: text;}
.us-all {
	-moz-user-select: all;
	-webkit-user-select: all;
	-ms-user-select: all;
	user-select: all;}
.us-contain {
	-moz-user-select: contain;
	-webkit-user-select: contain;
	-ms-user-select: element;
	-ms-user-select: contain;
	user-select: contain;}

次回予告

今回で UI(ユーザーインターフェイス)のためのプロパティは終わりです。

次回からは マルチカラム(段組み)レイアウトをやってみよう。
まずは、マルチカラムの「カラムの数」を決める column-countプロパティから使ってみましょう。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2020/07 | 08
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31 -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.