こんにちは！フロントエンドの現場を長年フラフラと……もとい、最前線で駆け抜けてきたチーフアーキテクトの私です。
CSSって、最初は「文字の色が変わる！楽しい！」からはじまるんですが、実務をやりだすと「あれ、なんでここ効かないの？」「この状態のときだけデザイン変えたいのに！」って、まぁ泥沼にハマるんですよね。よく分かります。私も昔は夜な夜なディスプレイに向かってコーヒーを何杯も飲み干したものです。
さて、今回はそんなCSSの引き出しの中でも、ちょっと地味だけど「知っているとフォームのデザインが劇的にスマートになる」隠れた名優、`:read-only`（リードオンリー）疑似クラスについてお話ししますね。
難しい専門用語はなるべく置いておいて、身近な例えを交えながら、優しく紐解いていきましょう。大丈夫、一歩ずつ見れば絶対すぐに使いこなせるようになりますから！
—
1. 「さわれない」フォーム要素って、なんだろう？
いきなりコードを書く前に、少し身の回りの景色を思い出してみてください。
例えば、ネット通販で買い物をして、最後の確認画面に進んだときを想像してほしいんです。「お届け先のご住所」や「お名前」が画面に表示されていますよね。
あのとき、住所の文字って、パチパチと新しく書き換えることはできますか？……できませんよね。「表示されているだけ」で、カーソルを入れても編集できないようになっています。
Webの世界では、このように「ユーザーが中身を見ることしかできず、文字を入力したり変更したりできない状態」の入力欄（`` や `