「あれ、ここだけコピーできない？」を解決！CSSの `user-select` でテキスト選択を操る魔法
Webサイトを見ているとき、ふと「この文章、コピーしようとしたのに選択できないな？」と感じたことはありませんか？ あるいは、逆に「ボタンの文字をドラッグして変な青色になっちゃうのが嫌だな…」と思ったことはないでしょうか。
実はそれ、CSSにある `user-select` というプロパティが裏で働いているおかげなんです。
今日は、HTMLのインライン要素（`span` や `a` タグなど）を題材に、この「テキスト選択」をコントロールする魔法について、一緒に学んでいきましょう！
—
そもそも「テキスト選択」って何だろう？
スマートフォンの画面を指で長押ししたり、PCでマウスをぐいっと動かして文字に色をつけたりする動作のことですね。普段は「当たり前」すぎて意識しませんが、Webサイトの制作者にとって、この「選択できる・できない」を制御することは、ユーザー体験を磨き上げる大切な技術の一つなんです。
たとえば、こんな場面を想像してみてください。
- コピーさせたい場所： 記事の本文や、住所、メールアドレスなど。
- コピーさせたくない場所： ボタンのラベル、デザインの一部として配置したアイコン、著作権表記など。
ここをあえて「選択できないようにする」だけで、Webサイトはグッとプロっぽく、そして使いやすくなります。
—
`user-select` プロパティの基本
使い方はとってもシンプル。CSSに数行書き加えるだけでOKです。
/ 基本的な書き方 /
.element {
/ ここに魔法を書きます /
user-select: none; / 選択できなくする設定 /
}
この `user-select` には、主に使う値がいくつかあります。
1. `none`：テキストを選択不可にします。（ドラッグしても反応しません！）
2. `text`：テキストを選択可能にします。（初期値はこれです）
3. `all`：一度クリックするだけで、要素内のすべてのテキストを一気に選択状態にします。
—
実践！インライン要素で試してみよう
例えば、Webサイトによくある「コピーボタン」や「装飾用の記号」をイメージしてみましょう。
ここからは普通の文章です。コピーできますよ！
【注意：ここは選択できません】
次のコードは、クリック一発で全選択されます：
npm install my-awesome-library
/ CSSで制御します /
.no-select {
/ 選択不可にする /
user-select: none;
color: #888;
cursor: default; / マウスを乗せてもカーソルが変わらないようにする配慮 /
}
.all-select {
/ クリックすると一気に全選択される /
user-select: all;
background-color: #f0f0f0;
padding: 2px 4px;
}
なぜこれが必要なの？
「別に全部選択できてもいいじゃん！」と思うかもしれません。ですが、例えば「コピーボタン」のようなUIにおいて、クリックした瞬間に文字が青く反転してしまうと、ユーザーは「あ、これコピーしなきゃいけないのかな？」と迷ってしまいますよね。
こうした細かな「迷い」を消すことが、親切なWebサイトへの第一歩なんです。
—
現場で気をつける「たった一つの約束」
ここで一つだけ、お伝えしておきたい注意点があります。
`user-select: none;` を使いすぎないこと。これが最も重要です。
「このテキストはコピーさせたくない！」という意図で設定しても、ユーザーがその情報をメモしたいとき、コピーできないとストレスになってしまいます。
「本当に選択させない必要がある箇所なのか？」
この問いかけを自分自身にするだけで、あなたの作るWebサイトは、ずっと優しくて使いやすい場所になりますよ。
—
最後に：小さなこだわりが、大きな信頼に
いかがでしたか？ `user-select` は、HTMLの小さなパーツを影で支える、地味ながらも非常に強力なツールです。
「ここ、ちょっと触りにくいな」と感じたとき、ぜひこの魔法を思い出してみてください。最初はうまくいかなくても大丈夫。少しずつコードを書いて、自分だけの使いやすいWebサイトを育てていきましょう。
また分からないことがあったら、いつでも聞きに来てくださいね。あなたのWeb制作ライフを、これからも応援しています！
コメント