【入門編】編集可能擬似クラス :read-write – CSS実践ガイド

こんにちは！Web制作の世界へようこそ。フロントエンドの現場を長年歩んできたチーフアーキテクトの私ですが、今日はCSSのちょっと便利な隠し味、`:read-write`（リード・ライト）擬似クラスについてお話ししますね。

CSSを勉強し始めると、`a:hover`（マウスが乗ったとき）とか、`input:focus`（入力欄を選択したとき）といった「状態」を表す言葉にたくさん出会うと思います。なんだか英語の専門用語っぽくて身構えてしまうかもしれませんが、大丈夫ですよ。一つひとつ、身近な例えと一緒に紐解いていけば、すんなり頭に入ってきますからね。

今日は、「今、自由に書き換えができる状態かどうか」をこっそり見分けてくれる優しい番人、`:read-write`の世界へご案内します。

—

1. 身近な例えでイメージしてみよう：「鍵のかかったノート」と「自由帳」

想像してみてください。
本棚に入っている辞書や、誰かが書いた看板って、パッと見て「あ、これは読むだけだな（＝書き換えちゃダメだな）」って分かりますよね。これをCSSの世界では `:read-only`（読取専用） と呼びます。

反対に、あなたの机の上にある「自由帳」や、スマホのメモアプリの入力画面はどうでしょう？「いつでも文字を書いていいよ、消してもいいよ」という状態ですよね。この、ユーザーが自由に文字を書いたり編集したりできる状態のことを、CSSでは `:read-write`（読み書き可能） と呼ぶんです。

Webサイトを作っていると、「今まさにユーザーが文字を入力できる状態のときだけ、入力欄をちょっと可愛くしたり、分かりやすく色をつけたい！」という場面に出くわします。そんなとき、この `:read-write` が魔法のようにサッと手助けしてくれるんですよ。

—

2. `:read-write` って、具体的にどんな要素を選ぶの？

「編集できる状態」と言われても、ピンとこないかもしれませんね。主に以下のようなおなじみの要素たちがこの対象になります。

`` などのテキスト入力欄
``（複数行の文章を書く欄）</li> <li>そして、ちょっと裏技的ですが、人間が「編集可能だよ」と指定した普通の段落（`contenteditable`属性がついた要素）などなど。</li> </ul> <p>ただし、ここで一つ注意です。世の中には「disabled（無効化）」されていて、カチカチにロックされて入力できない入力欄もありますよね。あいつらは「編集不可」なので、`:read-write` の仲間には入れてもらえません。あくまで「今、自由に触れる子」だけが対象です。</p> <p>—</p> <h3><span id="toc3">3. 実際に書いて・動かしてみよう（サンプルコード）</span></h3> <p>百聞は一見にしかず。実際にどんな風に動くのか、エディタにペタッと貼り付けて試せるコードを用意しました。</p> <p><!DOCTYPE html><br /> <html lang="ja"><br /> <head><br /> <meta charset="UTF-8"><br /> <title>:read-writeの優しい世界</title></p> <style> / ページ全体のベースの見た目を整えます / body { font-family: sans-serif; padding: 40px; background-color: #f9f9f9; color: #333; }</p> <p> .box { margin-bottom: 20px; }</p> <p> label { display: block; margin-bottom: 5px; font-weight: bold; }</p> <p> / --- ここからが主役の :read-write です！ --- /</p> <p> / 編集できる状態の入力欄とテキストエリアに適用されます / input:read-write, textarea:read-write { background-color: #ffffff; border: 2px solid #3498db; / 爽やかな青い枠線 / padding: 10px; border-radius: 6px; font-size: 16px; outline: none; transition: all 0.3s ease; }</p> <p> / ユーザーが実際にクリックして文字を打っている（フォーカスしている）とき / input:read-write:focus, textarea:read-write:focus { box-shadow: 0 0 8px rgba(52, 152, 219, 0.55); background-color: #fffdf0; / 入るときにふわっと優しい黄色に変化 / }</p> <p> / 逆に、もし「読み取り専用」にされている子がいれば、区別するためにグレーにします / input:read-only { background-color: #e0e0e0; border: 2px dashed #999; color: #666; } </style> <p></head><br /> <body></p> <h1>:read-write 擬似クラスのデモ</h1> <p>下の入力欄を比べてみてくださいね。</p> <p> </p> <div class="box"> <label for="normal-input">お名前（自由に書いてね）:</label><br /> <input type="text" id="normal-input" value="ここをクリックして文字を打ってみて！"> </div> <p> </p> <div class="box"> <label for="readonly-input">会員番号（変更できません）:</label><br /> <input type="text" id="readonly-input" value="A-12345-XYZ" readonly> </div> <p> </p> <div class="box"> <label for="normal-textarea">ご意見・ご感想:</label><br /> <textarea id="normal-textarea" rows="4">自由に感想をどうぞ！背景色がふんわり変わるよ。

このコードをブラウザで開いてみると、上と下の「書き込める欄」は綺麗な青い枠線で囲まれ、クリックして文字を打とうとすると背景が優しい黄色に変わります。でも、真ん中の「会員番号」は、readonly属性がついているので、灰色のままでお化粧もされません。

このように、「ユーザーが触っていい場所」と「ダメな場所」をCSSの力だけでパッと視覚的に分けることができるんです。

チーフアーキテクトからのちょっとしたアドバイス

初心者のうちは、「CSSってクラス名（`.my-box` みたいに）を自分で一生懸命つけないと動かないんでしょ？」って思いがちです。もちろんそれも大事ですが、今日ご紹介した `:read-write` のように、「要素が今どんな状態にあるか」をブラウザが自動で判断してスタイルを切り替えてくれる機能は、Web制作を何倍も楽にしてくれます。

「あ、いまこの子は書き込みできる状態だな」と、ブラウザと会話するような感覚で使ってもらえると、CSSを書くのがもっと楽しくなりますよ。

最初は仕組みに戸惑うこともあるかもしれませんが、一つひとつ、自分の手で動かしていけば必ず体に馴染んでいきます。焦らず、あなたのペースで進んでいってくださいね。応援しています！