こんにちは！日々Webのコードと向き合っている皆さん、今日もお疲れ様です。CSSの世界へようこそ！
Webサイトを作っていると、お問い合わせフォームやマイページなど「ユーザーに文字を入力してもらう場所」を作る機会がよくありますよね。そのとき、こんな経験はありませんか？
「この入力欄は自由に書き換えてほしいけれど、こっちの会員ID欄は書き換えられたくないな…」
「でも、デザインで『ここは書き込めませんよ』ってパッと見で伝わらないと、ユーザーが混乱しちゃうかも…」
大丈夫、心配いりません！CSSには、その要素が「今、書き込める状態か？ それとも読むだけ（編集不可）の状態か？」を賢く見分けて、自動でデザインを変えてくれる魔法の疑似クラスを用意してくれています。
それが、今回ご紹介する `:read-write` と `:read-only` です。
一見すると難しそうな英語ですが、仕組みさえ分かれば「なんだ、こんなに便利だったんだ！」と膝を打つこと間違いなしです。初心者の方でもスッと頭に入るように、身近な例えを交えながら優しく紐解いていきましょう！
—
1. 例え話でイメージしよう！「ノート」と「額縁」
まずは、難しいコードのことは一度忘れて、身の回りの道具でイメージしてみましょう。
例えば、目の前に2つのアイテムがあるとします。
1. 自由になんでも書ける「新品のノート」
2. 大切な写真が入っていてガラスで覆われた「額縁（がくぶち）」
ノートは、ペンを持っていればいつでも文字を書いたり消したりできますよね。
これが `:read-write`（読み・書きOK） の状態です。
一方、額縁はどうでしょう？ 中に入っている文字や写真を「読む（見る）」ことはできますが、ガラスの上から直接ペンで文字を書き換えることはできませんよね。
これが `:read-only`（読むことだけOK / 編集不可） の状態です。
ネットショッピングの画面を思い出してみてください。
- 「お届け先住所の入力欄」＝ 書き込める（ノート＝ `:read-write`）
- 「変更できない注文番号や合計金額」＝ 読むだけ（額縁＝ `:read-only`）
CSSの `:read-write` と `:read-only` は、「君はノートかな？ 額縁かな？」とブラウザが判定して、それぞれに合ったステキな見た目（スタイル）を自動で着せ替えさせてくれる仕組みなんです。
—
2. それぞれの疑似クラスを詳しく見てみよう
それでは、具体的にCSSでどう使うのかを順番に見ていきましょう！
① `:read-write` —— 「ここは書き込めますよ！」のサイン
ユーザーが自由に入力・編集できる要素に反応します。
- 対象になるもの：
- 通常の入力欄（`` や `