【CSS Modules】:disabled疑似クラスの使い方
:disabled疑似クラスの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
:disabled擬似クラスは、ユーザーインターフェース（UI）要素が無効化されている状態を表す擬似クラスです。この擬似クラスは、HTMLにおいてdisabled属性が設定され、ユーザーが操作できない状態にあるフォーム要素にスタイルを適用するために使用されます。具体的には、<input>要素のテキスト入力欄やチェックボックス、<button>要素、<select>要素のドロップダウンリスト、<textarea>要素の複数行テキスト入力欄などがdisabled属性を持つ場合に、それらの要素に対してCSSのスタイルを適用できます。
disabled属性が設定された要素は、ユーザーからのクリックやキーボード入力などの操作を受け付けず、フォーム送信時にもその要素の値は含まれません。:disabled擬似クラスを使用することで、無効な要素を視覚的に区別し、ユーザーに操作不能であることを明確に伝えることが可能になります。
例えば、無効化されたボタンの文字色を薄いグレーにしたり、背景色を変更したり、カーソルの表示を変化させたりすることで、ユーザーは直感的にその要素が利用できないことを理解できます。このように、:disabled擬似クラスは、ウェブアプリケーションのユーザビリティ（使いやすさ）を向上させる上で重要な役割を果たします。
公式リファレンス: :disabled
構文(syntax)
1:disabled { 2 /* スタイル定義 */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません