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

HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

HTML DOMのuserSelectプロパティは、HTMLドキュメント内で要素のテキストがユーザーによって選択可能かどうかを取得・設定するためのプロパティです。このプロパティを活用することで、Webページ上のテキストのコピーやドラッグによる選択を柔軟に制御できます。

構文

userSelectプロパティの基本的な構文は以下のとおりです。

userSelectの値を取得する場合

object.style.userSelect

userSelectの値を設定する場合

object.style.userSelect = "value";

設定できる値

valueには以下のいずれかの値を指定できます。

値説明
autoブラウザの既定の設定に従って、ユーザーによるテキスト選択を許可します。
noneユーザーによるテキスト選択を禁止します。
textユーザーがテキストを選択できるようにします。
allダブルクリックではなく、シングルクリックだけでテキスト全体を選択できるようにします。

サンプルコード

ここでは、HTML DOMスタイルのuserSelectプロパティを使用した具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        background: lightblue;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
    .show {
        margin: 1rem 0;
    }
</style>
</head>
<body>
<h1>DOM Style userSelect プロパティの例</h1>
<p style="direction:ltr">これはダミーテキストを含む段落要素です。</p>
<button onclick="add()" class="btn">userSelectを設定</button>
<div class="show"></div>
<script>
    function add() {
        document.querySelector('p').style.userSelect = "none";
        document.querySelector('.show').innerHTML = "上の段落のテキストは選択できなくなりました";
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のような画面が表示されます。

HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

「userSelectを設定」ボタンをクリックすると、段落要素に対してuserSelectプロパティの値として「none」が設定されます。

HTML DOMスタイルのuserSelectプロパティとは？テキスト選択の制御方法を解説

ボタンをクリックした後は、ページ上部の段落テキストをマウスでドラッグしても選択できなくなっていることが確認できます。このように、userSelectプロパティを使えば、JavaScriptから動的にテキストの選択可否を切り替えることが可能です。

  1. HTML DOM スタイルの whiteSpace プロパティとは？使い方と設定値を解説

    HTML DOM の style.whiteSpace プロパティは、HTML ドキュメント内の要素テキストにおけるタブ・改行・空白文字の表示方法を取得および設定するために使用されます。テキストの折り返しや空白の扱いを動的に制御したい場合に便利なプロパティです。 構文（シンタックス） whiteSpace プロパティの基本的な構文は以下の通りです。 whiteSpace の値を取得する場合 object.style.whiteSpace whiteSpace の値を変更する場合 object.style.whiteSpace = value 設定できる値 whiteSpace プロパティには、

  2. HTML DOMのstyle.directionプロパティとは？テキスト方向の指定方法を解説

    HTML DOMのstyle.directionプロパティは、要素内のテキストの流れる方向（文字方向）を取得・設定するために使用されるプロパティです。デフォルト値は「ltr」となっています。この記事では、directionプロパティの基本的な使い方から、設定できる値、実際に動作するコード例までをわかりやすく解説します。directionプロパティの構文directionプロパティをJavaScriptで設定する場合、以下のような構文を使用します。object.style.direction = ltr|rtl|initial|inherit;設定できる値の一覧directionプロパティには、