Web制作において、フォームの入力不可状態をどう表現するかはUXの鍵を握ります。disabled属性で制御するのが一般的ですが、CSSの擬似クラス『:read-only』を活用することで、より柔軟かつ表現力豊かなUI実装が可能になります。今回は、シニアデザイナーの視点から、実務で差がつく使い分けと実装のポイントを解説します。
disabledとread-onlyの決定的な違い
実務でまず意識すべきは、両者の「意味的・機能的な違い」です。disabled属性は「フォーム送信時に値が送信されない」という仕様がありますが、read-only属性は「値は送信されるが、ユーザーによる変更は不可」という役割を持ちます。この違いを理解せず、見た目だけで使い分けるとバックエンドとの連携でバグを生む原因になります。CSSでスタイルを当てる際は、この「データとして送信されるか否か」という背景を考慮した配色を心がけましょう。
ユーザーの「操作できない」というストレスを軽減する
read-onlyを適用した要素に対し、デフォルトのブラウザスタイルは非常に判別しにくいケースが多いです。ユーザーが「ここに入力しようとしたのに反応しない」というストレスを感じないよう、視覚的なフィードバックは必須です。
具体的には、以下のようなCSSを当てることが多いです。
実装事例：直感的に伝わるスタイル
以下は、read-onlyの状態をユーザーに一目で伝えるための推奨スタイル例です。
input:read-only {
background-color: #f9f9f9;
border: 1px solid #e0e0e0;
color: #777;
cursor: not-allowed;
}
この際、cursor: not-allowed; を指定することで、マウスオーバー時に禁止カーソルを表示し、明示的に「変更不可」であることを伝えるのがポイントです。また、border-styleをdashed（破線）にするといった工夫を加えることで、通常の入力フィールドとは異なる異質性を強調できます。
JSとの連携で動的なUIを作る
実務では、チェックボックスのON/OFFに応じて入力欄のread-only属性を切り替えるケースが頻発します。この際、CSS側で :read-only { opacity: 0.6; } といったトランジションを効かせておくと、状態変化が滑らかになり、モダンなUI体験を提供できます。
まとめ：アクセシビリティを忘れない
最後に、見た目だけでなくアクセシビリティにも配慮しましょう。read-only要素はキーボード操作でフォーカスが当たることがありますが、その際に outline: none; で枠線を消してしまうと、キーボードユーザーが現在地を見失います。デザインの美しさを追求しつつも、フォーカス時のリングは必ず残すか、独自のデザインで視認性を担保してください。
read-onlyは地味な擬似クラスですが、細部まで作り込むことで、サイトの「完成度」が格段に向上します。ぜひ次のフォーム実装から意識してみてください。
コメント