こんにちは！フロントエンド・アーキテクチャの世界へようこそ。
日々、数え切れないほどのCSSと格闘している私ですが、今日はCSSのちょっとした、でも知っていると「おっ」と周りに差をつけられる便利な魔法についてお話ししますね。
今回スポットを当てるのは、`:read-only` と `:read-write` という2つの擬似クラスです。
「なんだか名前が難しそう……」「英語だし、エラーが出たらどうしよう」なんて思っていませんか？
大丈夫です！安心してください。今日の記事を読み終える頃には、この2つの魔法を自由自在に操れるようになっていますよ。身近な例えを交えながら、ゆっくり優しく紐解いていきましょう。
—
1. 身の回りの「書けるもの」と「書けないもの」
私たちの身の回りには、文字を書き込めるものと、書き込めないものがたくさんありますよね。
- ノートのページ（シャープペンで自由に書き込める！）
- 美術館の展示物の解説プレート（ガラスケースに入っていて、触っても書けない！）
Webサイトの入力フォームやテキストエリアもこれと全く同じです。
「ユーザーが自由に入力できる場所（`input`や`textarea`など）」もあれば、「今は見てほしいだけで、触ってほしくない（読み取り専用の）場所」もあります。
CSSの `:read-write` は「自由に書き込めるノート」、`:read-only` は「ガラスケースに入った解説プレート」を、それぞれ自動で見つけてスタイルを当ててくれる優秀な管理人さんなのです。
—
2. 実践！ノートとプレートを色分けしてみよう
百聞は一見にしかず。まずは実際にコードを見てみましょう。
HTMLには、普通の入力欄（書き込める）と、`readonly` という魔法をかけた入力欄（読み取り専用）を用意しました。
お買い物の入力フォーム
ブラウザでこれを開いてみると、上のお名前欄は「しっかり書けそう！」という青い枠で、下の注文番号欄は「あ、これは触っちゃいけないんだな」とひと目でわかるグレーの破線で表示されます。
わざわざ `.is-readonly` のようなクラス名をHTMLに書かなくても、ブラウザが「あ、これ `readonly` がついてるから `read-only` だな！」と勝手に判断してCSSを適用してくれるのです。便利だと思いませんか？
—
3. ここで一歩進んだ極意：`contenteditable` との出会い
さて、ここからが少しディープで面白いお話です。
「入力フォーム（`input`や`textarea`）」以外でも、実はこの `:read-only` と `:read-write` は使えます。
それが、HTMLの超便利属性 `contenteditable` です。
これを使うと、普通の段落（`
`タグ）や見出し（`
`タグ）を、まるでメモ帳のようにブラウザ上で直接グリグリと編集できるようになります。
「えっ、じゃあ編集できるようになった `
` タグは、`:read-write` の仲間になるの？」
大正解です！よく気が付きましたね。
以下のコードを見てみてください。
メモ帳エリア
この文章はただ読むだけのセクションです。編集はできません。
ここはあなたが自由に書き換えられるメモエリアです！クリックして文字を打ってみてね。
ブラウザで試すと、下の段落をクリックした瞬間にふわっと黄色く光り、「さあ、好きなように書いていいよ！」と語りかけてくるようなインターフェースが作れます。
JavaScriptを1行も書かずに、CSSの擬似クラスだけで「今の要素の状態」に合わせたデザインの切り替えができるのです。これぞプロの技ですね。
—
4. 初学者がつまずきやすいポイントと優しいアドバイス
ここで、初心者の人がよくハマりがちな「落とし穴」をそっとシェアしておきますね。
つまずきポイント：「あれ？ `disabled` をつけたのに、`:read-only` が反応しない！」
HTMLには、入力を完全に無効化する `disabled` という属性もあります。
「入力できないんだから、`read-only` と同じでしょ？」と思ってしまいがちですが、CSSの世界では全く別物として扱われます。
- `readonly` ＝ 「中身は読めるし、フォーカスも当たる（選択してコピーもできる）」 $\rightarrow$ `:read-only` の対象
- `disabled` ＝ 「存在そのものが無効化されている（触ることも許されない）」 $\rightarrow$ `:disabled` の対象
もし「入力できない見た目」にしたい要素に `disabled` を使っている場合は、`:read-only` ではなく `:disabled` でスタイリングしてあげてくださいね。ここ、テストに出るくらい大事なポイントです！
—
おわりに
CSSの `:read-only` と `:read-write`、いかがでしたでしょうか？
難解な専門用語の裏側には、ユーザーにとって「今、何ができるのか」を視覚的に優しく伝えるための、温かい工夫がたくさん詰まっています。
「HTMLの属性が変わると、CSSも連動して表情を変えてくれる」
この面白さが伝わったら、チーフアーキテクトとしてこれ以上の喜びはありません。
最初は「おや？」と思うこともあるかもしれませんが、手を動かしてコードを書いていけば、必ずあなたの心強い味方になってくれます。
焦らず、自分のペースで楽しくコードを書いていきましょう！それでは、また次の現場でお会いしましょう。
コメント