CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのuser-selectプロパティとは？テキスト選択を制御する方法と実例

CSSの user-select プロパティを使うと、要素内のテキストがユーザーによって選択可能かどうかを制御できます。たとえば、ボタンのラベルやナビゲーションメニューなど、誤って選択されたくないテキストに対して「選択不可」に設定することで、より快適なユーザー体験を提供できます。

user-selectプロパティの主な値

  • none … テキストを選択できなくします
  • auto … ブラウザの既定動作に従います（初期値）
  • text … テキストを選択可能にします
  • all … 要素をクリックすると、その内容全体が選択されます

使用例

次の例では、<div> 要素内のテキストに user-select: none; を指定しているため、ユーザーはそのテキストを選択することができません。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        user-select: none;
      }
    </style>
  </head>
  <body>
    <h2>これはデモ見出しです</h2>
    <div>これはデモテキストです。この部分は選択できません。</div>
  </body>
</html>

ブラウザ対応について

user-select プロパティは主要なモダンブラウザでサポートされていますが、古いバージョンのChromeやSafariではベンダープレフィックス（-webkit-user-select など）が必要な場合があります。幅広い環境に対応させたい場合は、次のように記述すると安心です。

div {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox（旧版） */
  -ms-user-select: none;     /* IE10以降 */
  user-select: none;
}

このように user-select プロパティを活用することで、コピー防止やUIの操作性向上など、目的に応じたテキスト選択の制御が簡単に実現できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります