ウェブサイトでテキストのハイライトを無効にする方法


  1. CSSを使用した方法: テキストのハイライトを無効にするには、CSSのuser-selectプロパティを使用します。次のスタイルをテキストに適用することで、ハイライトを無効にすることができます。
.no-highlight {
  user-select: none;
}

上記のスタイルを適用したいテキストの要素にno-highlightクラスを追加します。

<p class="no-highlight">ハイライトを無効にするテキスト</p>
  1. JavaScriptを使用した方法: JavaScriptを使用して、テキストの選択を無効化する方法もあります。以下は、JavaScriptを使ったハイライトの無効化の例です。
const element = document.getElementById('myElement');
element.addEventListener('mousedown', (event) => {
  event.preventDefault();
});

上記のコードでは、myElementというIDを持つ要素のマウスダウンイベントをキャプチャし、デフォルトの動作を無効化しています。

  1. jQueryを使用した方法: jQueryを使用する場合は、以下のようなコードでテキストのハイライトを無効化できます。
$('#myElement').on('mousedown', function(event) {
  event.preventDefault();
});

上記のコードでは、myElementというIDを持つ要素のマウスダウンイベントをキャプチャし、デフォルトの動作を無効化しています。

これらの方法を使用すると、ウェブサイト上のテキストのハイライトを無効にすることができます。適用したい要素に対応する方法を選んで実装してください。