HTMLページで選択不可にする方法


  1. CSSのuser-selectプロパティを使用する方法:

    <style>
    .unselectable {
    user-select: none;
    }
    </style>

    この方法では、選択したい要素に「unselectable」というクラスを追加します。例えば、テキストを選択不可にする場合は、次のようにします:

    <p class="unselectable">選択不可のテキスト</p>
  2. JavaScriptを使用して要素を選択不可にする方法:

    <script>
    function disableSelection(element) {
    if (typeof element.onselectstart != "undefined") {
    element.onselectstart = function() { return false; };
    } else if (typeof element.style.MozUserSelect != "undefined") {
    element.style.MozUserSelect = "none";
    } else {
    element.onmousedown = function() { return false; };
    }
    }
    </script>

    この方法では、選択不可にしたい要素に対してdisableSelection関数を呼び出します。例えば、次のようにします:

    <p onclick="disableSelection(this)">選択不可のテキスト</p>

これらの方法を組み合わせて使用することもできます。また、CSSを使用する方法は比較的新しいブラウザでのみ動作する場合があるため、JavaScriptの方法を選択することもあります。

以上がHTMLページで要素の選択を不可にするいくつかの方法です。適切な方法を選択し、必要に応じてコードをカスタマイズしてください。