【入門編】 :disabled 疑似クラス – CSS実践ガイド

こんにちは！フロントエンドの世界へようこそ。
CSSの設計やコードの海を毎日泳いでいるチーフアーキテクトの私ですが、今日は少し肩の力を抜いて、CSSを始めたばかりのあなたへ向けて、とっても身近で頼れる仲間を紹介したいと思います。

今日スポットを当てるのは、`:disabled（ディスアーブルド）` 疑似クラスです。

なんだか「疑似クラス」だとか「英語の専門用語」だとか聞くと、それだけで頭がクラクラしそうになりますよね。大丈夫ですよ、安心してください。難しい理屈はとりあえず横に置いておいて、まずは私たちの身の回りにある「あれ」からお話を始めましょう。

—

身の回りにある「使えないボタン」の正体

街を歩いていて、あるいはスマホをいじっていて、こんな場面に出会ったことはありませんか？

• アンケートの「送信」ボタン。でも、肝心の必須項目が空欄だから、どれだけクリックしても「ポチッ」と押せない。
• セールの入場チケット販売ページ。「売り切れ」になった途端に、ボタンが灰色になって触れなくなる。

そう、あの「今は触っちゃダメですよ」「お休み中ですよ」と眠っている状態が、まさに英語で言うところの `disabled`（無効化）です。

Webサイトを作っていると、「今はまだこのボタンを押してほしくないな」「入力を完了させるまでは、次のステップに進ませたくないな」という場面が絶対に出てきます。そんなとき、HTMLの入力欄（`` や `` など）に `disabled` という属性をそっと書き込んであげると、ブラウザはその要素を自動的に「お休みモード」にしてくれます。

そして、その「お休みモードになっている要素」をピンポイントで見つけて、「お前は今お休み中だから、こういう見た目になりなさい！」と指示を出せるのが、今回主役の `:disabled` 疑似クラス なんです。

—

なぜ、わざわざ CSS でスタイリングしてあげる必要があるの？

「あれ、HTMLに `disabled` って書くだけで、ブラウザが勝手にボタンを灰色にしてくれるなら、わざわざCSSを書かなくてもよくない？」

鋭いですね！その通り、実は何もしなくても、ブラウザのデフォルト機能でおおむね灰色っぽく表示してくれます。

でもですね、プロのWebデザイナーやフロントエンドの現場では、ここにあえてCSSで手を加えます。なぜなら、ブラウザの標準デザインは、正直言ってちょっと無骨で可愛げがないことが多いからなんです。それに、ブランドの世界観に合わせて「押せないボタン」の見た目をデザインすることで、ユーザーにとって「あ、今はここを埋めればいいんだな」という直感的な優しさを伝えることができるからです。

「触れないなら、触れないなりの、ちゃんとした佇まい（たたずまい）を用意してあげる」。これが、良いWebサイトを作る秘訣なんですよ。

—

さあ、実際にコードを書いてみましょう

百聞は一見に如かず。実際に手を動かして、その動きを確認してみましょう。
以下のコードをコピーして、ご自身のメモ帳やエディタ（VS Codeなど）に貼り付けてみてください。

body {
font-family: sans-serif;
padding: 40px;
background-color: #f7f9fa;
}

目次

1. 身の回りにある「使えないボタン」の正体
2. なぜ、わざわざ CSS でスタイリングしてあげる必要があるの？
3. さあ、実際にコードを書いてみましょう
1. お問い合わせフォームのイメージ
   1. つまずきやすいポイントと、チーフからのアドバイス
   2. 1. 「あれ？ CSSを書いたのに色が変わりません…」
   3. 2. JavaScriptとの組み合わせで真価を発揮する
   4. おわりに

お問い合わせフォームのイメージ

お名前（必須）：

内容を送信する（送信できません）

ブラウザでこのファイルを開いてみてください。
ボタンが薄い灰色になり、マウスカーソルを合わせても「通行止め」のマーク（斜線が入った丸など）に変わるのが確認できるはずです。

「お休み中ですよ」というシグナルを、視覚的にも、マウスの動き（カーソル）でも、ユーザーに優しく教えてあげられていますね。

—

つまずきやすいポイントと、チーフからのアドバイス

ここで、初心者の頃に誰もが一度はハマる「落とし穴」について少しだけお話しさせてください。

1. 「あれ？ CSSを書いたのに色が変わりません…」

よくある原因は、CSSの「強さ（詳細度）」の勝負に負けているケースです。
例えば、どこか別の場所で `.submit-btn` に対して強力な色指定がされていると、`:disabled` のスタイルがかき消されてしまうことがあります。
そんなときは焦らず、セレクタを `.submit-btn:disabled` と結合させて、CSSの優先順位を少しだけ強くしてあげてくださいね。（上のサンプルコードではすでにこの書き方にしているのでバッチリです！）

2. JavaScriptとの組み合わせで真価を発揮する

今回はHTMLに最初から `disabled` を書いてお休みさせましたが、実際のWebアプリやフォームでは、「ユーザーが全ての必須項目を入力し終わったら、JavaScriptが自動的に `disabled` を取り外して、ボタンをピカッと元気にする」という魔法のような連携がよく使われます。
そのときも、CSS側でこの `:disabled` をしっかり準備しておけば、JavaScript側でボタンの状態が切り替わった瞬間に、自動的にデザインもパッと切り替わってくれます。HTML、CSS、JavaScriptのチームプレーですね！

—

おわりに

`:disabled` 疑似クラス、いかがでしたでしょうか？
最初は難しそうに見える呪文のような名前も、「あぁ、ボタンがお昼寝しているときの洋服を選んであげているんだな」というふうにイメージすると、途端に親しみやすく感じられるようになったのではないでしょうか。

Web制作は、画面の向こう側にいる「人間」にどれだけ優しくできるかの積み重ねです。
「今は触れないよ」という状態を丁寧にデザインしてあげることは、立派な思いやりのひとつです。

あなたのこれからのコーディングライフが、少しでも楽しく、ワクワクするものでありますように。
それではまた、次の現場でお会いしましょう！チーフアーキテクトでした。