CSS によるテキスト選択の防止
CSS には、要素に変更を加えるために使用できる属性がたくさんあります。 ここで、変更という言葉は、要素のスタイリング、または要素のさまざまな制御の付与または削除を指します。
CSS user-select 属性を使用してテキストの選択を防止する
Web ページをデザインするとき、通常、段落、表内のデータ、フォーム内のラベルなどのテキストを追加します。そのテキストが Web ページに表示されると、それらを表示する人はテキストを選択して、さまざまなアクティビティのためにコピーできます。 .
たとえば、Web ページにアクセスした人は、このページからテキストを選択し、コピーして使用することができます。 ただし、Web ページの所有者の中には、それを好まない人もいます。 それを防ぐために、テキストの選択をブロックできます。
CSS は、user-select 属性であるテキスト選択を防止する属性を提供します。 この属性を使用して、ユーザーがテキストを選択できないようにすることができます。
しかし、私たちは皆、さまざまな種類の Web ブラウザーを使用しています。 異なる種類の Web ブラウザーを使用する場合は、この属性の使用方法を変更する必要があります。
以下に、さまざまな Web ブラウザーで user-select 属性を使用する方法を示しました。
構文：
-webkit-user-select: none; /*Standard method. Can be used in Safari*/
-moz-user-select: none; /*Standard method. Can be used in Firefox*/
-ms-user-select: none; /*Standard method. Can be used in Internet Explorer or Edge*/
user-select: none; /*Standard method. Can be used in Google Chrome*/
最初の方法は、デフォルトのブラウザーが Safari であるため、iOS および Mac ユーザー向けです。 Firefox ユーザーは 2 番目の方法を使用でき、Internet Explorer または Edge を使用するユーザーは 3 番目の方法を使用できます。
ブラウザとして Google Chrome を使用している場合は、4 番目の方法を使用できます。
上記の構文には、user-select 属性の値に割り当てることができるいくつかのオプションがあります。
| オプション | 説明 |
|---|---|
auto |
auto 値は、user-select 属性が使用するデフォルト値です。 ブラウザーで許可されている場合は、テキストを選択できます。 |
none |
このオプションを使用すると、ユーザーはテキストを選択できなくなります。 つまり、テキストの選択を妨げています。 |
text |
これを使用して、ユーザーがテキストを選択できるようにします。 |
all |
このオプションを使用すると、ダブルクリックではなくシングルクリックでテキストを選択できます。 |
この記事では、ユーザーがテキストを選択できないようにする user-select 属性の none オプションについて説明します。
テキストに user-select: none を追加
この概念を簡単に理解するために、次のように Web ページに簡単なテキストを追加してみましょう。
<div>
<p class="unselect">This is a text</p>
</div>
テキストにスタイルを追加する
見やすくするために、このテキストにいくつかの CSS スタイルを追加してみましょう。
.unselect{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
ここでは、テキストに font、font-size、および padding を指定しました。 このように表示され、テキストを選択できます。
ご覧のとおり、通常どおりテキストを選択できます。
none 値を持つ user-select 属性を追加する
スタイルを追加した後、user-select 属性を設定して、テキストの選択を防ぐことができます。 以下に示すように、属性の値として none を使用します。
.unselect{
user-select: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
<div>
<p class="unselect">This is a text</p>
</div>
ご覧のとおり、テキストは選択できなくなりました。
ただし、上記のコードは、Google Chrome Web ブラウザーを使用している場合にのみ機能します。 上記のコードを変更して、他の Web ブラウザーで使用することができます。
.unselect{
user-select: none; /*Standard method. Can use in Google Chrome*/
-webkit-user-select: none; /*Standard method. Can use in Safari*/
-moz-user-select: none; /*Standard method. Can use in Firefox*/
-ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 30px;
color: navy;
padding-left: 10px;
}
<div>
<p class="unselect">This is a text</p>
</div>
テーブル内のテキストに user-select 属性を追加する
では、この属性を試すためのテーブルを作成してみましょう。 作成するテーブルには、First Name と Last Name の 2つの列と、関連データを含む 2つの行があります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
ご覧のとおり、テーブルを作成しましたが、スタイルはありません。 CSS を使用してテーブルのスタイルを設定しましょう。
table {
background-color: rgb(243, 150, 253);
font-family: arial, sans-serif;
border-collapse: collapse;
width: auto;
}
td, th {
border: 1px solid #000000;
text-align: left;
padding: 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
結果に示すように、テーブルのスタイルが設定されました。 テーブル内のテキストを選択できることもわかるので、無効にしてみましょう。
前の例のように、user-select 属性をテーブルに追加できます。 テーブル全体に追加することも、選択したセルのみに追加することもできます。
テーブル ヘッダーにのみ user-select 属性を追加します。 以下のコード チャンクを同じ CSS コードに追加できます。
th{
user-select: none; /*Standard method. Can use in Google Chrome*/
-webkit-user-select: none; /*Standard method. Can use in Safari*/
-moz-user-select: none; /*Standard method. Can use in Firefox*/
-ms-user-select: none; /*Standard method. Can use in Internet Explorer or Edge*/
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="Styles.css">
<title>HTML prevent text selection</title>
</head>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
<tr>
<td>Jamie</td>
<td>Anderson</td>
</tr>
</table>
</body>
</html>
コードを実行すると、以下のような結果が得られます。
ご覧のとおり、ヘッダーのテキストのみを選択することはできません。
まとめ
この記事では、テキスト選択の防止と、CSS の user-select 属性がそれを実現するのにどのように役立つかについて説明しました。 学習したように、さまざまな Web ブラウザーでこの属性を使用するさまざまな方法があります。
テキスト選択を防止する基本的なことを明確にするために、2つの例を取り上げました。 他にも方法はありますが、CSS はこれを実現する簡単な方法を提供します。
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.