Webサイトを構築する際、特定のテキストをユーザーが選択できないようにしたい場合があります。例えば、コピーを防ぐためや特定のデザイン要件を満たすためなどです。この記事では、CSSを使ってテキスト選択を無効にする方法を紹介します。
user-selectプロパティとは？
user-selectは、CSSでユーザーがテキストを選択できるかどうかを制御するためのプロパティです。このプロパティにnoneを指定することで、テキスト選択を無効にすることができます。
基本的な使い方
次のコードは、user-selectプロパティを使ってテキスト選択を無効にする方法を示しています。
.no-select {
user-select: none;
/* 必要に応じてベンダープレフィックスを追加 */
-webkit-user-select: none; /* Safari用 */
-moz-user-select: none; /* Firefox用 */
-ms-user-select: none; /* Internet Explorer/Edge用 */
}このスタイルをクラスに適用し、そのクラスを指定した要素に追加することで、その要素のテキスト選択を無効にすることができます。
HTMLへの適用例
以下は、上記のCSSクラスをHTMLに適用した例です。
<p class="no-select">
このテキストは選択できません。
</p>この例では、<p>タグ内のテキストが選択不可となります。これにより、ユーザーがこのテキストをコピーしたり、選択することができなくなります。
サンプル
このテキストは選択できません。
ベンダープレフィックスについて
user-selectプロパティは、ブラウザによってサポート状況が異なるため、ベンダープレフィックスを追加することで、さまざまなブラウザに対応させることができます。特に古いバージョンのSafari、Firefox、IE/Edgeでは、-webkit-、-moz-、-ms-といったプレフィックスが必要になる場合があります。
使い方の注意点
テキスト選択を無効にすることは、ユーザーエクスペリエンスに影響を与える可能性があるため、適用場所には注意が必要です。全体のデザインやユーザーの利便性を考慮した上で、必要な部分にのみ適用することをお勧めします。
