HTMLテキストを簡単に非選択可能にする！CSSとJavaScriptで実現
HTML テキストを非選択可能にする方法（HTML、CSS、クロスブラウザ対応）
CSS の user-select プロパティを使用する
user-select プロパティは、ユーザーが要素内のテキストを選択できるかどうかを制御します。このプロパティには、以下の3つの値を設定できます。
none: テキストを選択不可にします。all: デフォルト値。テキストとその他のコンテンツを選択できます。
HTML テキストを非選択可能にするには、以下の CSS を使用します。
.unselectable {
user-select: none;
}
この CSS を p 要素に適用すると、その要素内のテキストは選択できなくなります。
<p class="unselectable">このテキストは選択できません。</p>
JavaScript を使用して、ユーザーが選択したテキストを解除することもできます。以下のコードは、選択範囲を空にすることで、ユーザーが選択したテキストを解除します。
function unselectText() {
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (document.selection) {
document.selection.empty();
}
}
このコードを onclick イベントハンドラーに割り当てると、ユーザーがクリックした要素内のテキストが選択解除されます。
<p onclick="unselectText()">このテキストは選択できません。</p>
クロスブラウザ対応
user-select プロパティは、すべてのブラウザでサポートされているわけではありません。古いバージョンの Internet Explorer などでは、-moz-user-select や -webkit-user-select などのベンダープレフィックスを付ける必要があります。
.unselectable {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
注意点
user-select: noneを使用すると、ユーザーがテキストをコピーすることもできなくなります。- JavaScript を使用する場合は、ライブラリを使用するとコードを簡略化できます。
上記以外にも、画像を非選択可能にする方法や、特定のキーのみを選択可能にする方法などがあります。詳細は、以下のリソースを参照してください。
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML テキストを非選択可能にする</title>
<style>
.unselectable {
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
</style>
</head>
<body>
<p class="unselectable">このテキストは選択できません。</p>
<p onclick="unselectText()">このテキストも選択できません。</p>
<script>
function unselectText() {
if (window.getSelection) {
window.getSelection().removeAllRanges();
} else if (document.selection) {
document.selection.empty();
}
}
</script>
</body>
</html>
説明
- このコードは、
p要素にunselectableクラスを適用して、その要素内のテキストを非選択可能にします。 onclickイベントハンドラーを使用して、ユーザーがクリックした要素内のテキストを JavaScript で選択解除します。
実行方法
- このコードを HTML ファイルに保存します。
- ブラウザでその HTML ファイルを開きます。
結果
- ユーザーは、
p要素内のテキストを選択できません。 - ユーザーが
p要素をクリックすると、その要素内のテキストが選択解除されます。
- このコードは、単なる例です。必要に応じて、コードを自由にカスタマイズできます。
user-selectプロパティは、すべてのブラウザでサポートされているわけではありません。古いバージョンのブラウザでは、ベンダープレフィックスを付ける必要がある場合があります。
HTML テキストを非選択可能にするその他の方法
readonly 属性は、入力フィールドを編集不可にするために使用されますが、HTML テキストを非選択可能にするのにも使用できます。
<p readonly>このテキストは選択できません。</p>
<pre> タグは、テキストを整形せずに表示するために使用されます。このタグを使用すると、ユーザーがテキストを選択できなくなります。
<pre>このテキストは選択できません。</pre>
コンテンツセキュリティポリシー (CSP) を使用する
CSP は、Web サイトで実行できるスクリプトを制限するために使用できます。CSP を使用して、user-select プロパティを none に設定するスクリプトを許可することで、HTML テキストを非選択可能にすることができます。
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted-script.example.com; style-src 'self' https://trusted-style.example.com; user-select none;">
画像を使用する
テキストを画像に変換して表示することで、ユーザーがテキストを選択できなくなります。ただし、この方法は、テキストの編集が困難になるという欠点があります。
注意事項
上記の方法を使用する場合は、以下の点に注意してください。
readonly属性と<pre>タグは、すべてのブラウザでサポートされているわけではありません。- CSP は、複雑な設定が必要になる場合があります。
- 画像を使用すると、テキストの編集が困難になります。
HTML テキストを非選択可能にする方法はいくつかあります。どの方法を使用するかは、状況によって異なります。
- 編集を許可する必要がある場合:
readonly属性を使用する - テキストの書式を保持する必要がある場合:
<pre>タグを使用する - 高度な制御が必要な場合: CSP を使用する
- テキストの編集が不要な場合: 画像を使用する
どの方法を選択する場合でも、ユーザーにとって使いやすく、アクセスしやすいことを確認することが重要です。
html css cross-browser
