CSSで特定のテキストを選択不可にする！ユーザーインターフェースの設計と実装
2024-04-02
CSSで特定のテキストを選択不可にする方法
CSSの user-select プロパティを使用することで、特定のテキストを選択不可にすることができます。これは、著作権保護されたテキストや、ユーザーが編集すべきではないテキストを保護するために役立ちます。
方法
以下のコードは、すべてのテキストを選択不可にします。
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
注意点
- このコードはすべてのテキストに適用されるため、部分的に選択不可にしたい場合は、セレクタを変更する必要があります。
- 一部のブラウザでは、
user-selectプロパティに対応していない場合があります。 - この方法を使用しても、JavaScriptを使用してテキストを選択することは可能です。
部分的にテキストを選択不可にする
特定の要素のみを選択不可にする場合は、以下のコードを使用します。
.my-class {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
上記コードでは、my-class クラスを持つ要素のみを選択不可にしています。
補足
user-selectプロパティには、noneの他にtextとautoという値があります。text: テキストのみ選択可能auto: ブラウザのデフォルトの動作に従う
user-selectプロパティは、IE 10 以降、Firefox 4 以降、Chrome 1 以降、Safari 5 以降でサポートされています。
例
以下の例では、h1 要素のみを選択不可にしています。
<h1>これは選択不可なテキストです</h1>
<p>これは選択可能なテキストです</p>
h1 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
この方法の利点
- 実装が簡単
- すべてのブラウザで動作する
- 一部のユーザーにとっては使いにくい
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>すべてのテキストを選択不可にする</title>
</head>
<body>
<h1>これは選択不可なテキストです</h1>
<p>これも選択不可なテキストです</p>
</body>
</html>
* {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>部分的にテキストを選択不可にする</title>
</head>
<body>
<h1>これは選択不可なテキストです</h1>
<p>これは選択可能なテキストです</p>
</body>
</html>
h1 {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
上記コードを実行すると、すべてのテキストを選択することができなくなります。部分的に選択不可にする場合は、h1 要素のように、選択不可にしたい要素をセレクタで指定します。
user-select プロパティ以外にも、JavaScriptを使用してテキストを選択不可にする方法があります。
CSS 以外で特定のテキストを選択不可にする方法
const element = document.querySelector('.my-class');
element.addEventListener('mousedown', (event) => {
event.preventDefault();
});
element.addEventListener('selectstart', (event) => {
event.preventDefault();
});
- この方法は、JavaScript を有効にしていないブラウザでは動作しません。
user-select プロパティ以外にも、JavaScriptを使用して特定のテキストを選択不可にすることができます。JavaScript の方が柔軟性がありますが、ブラウザの互換性や使いやすさに注意する必要があります。
css
