10.1 擬似クラス :focus
CSSの擬似クラスは、さまざまな状態で要素をスタイリングするための素晴らしいツールを提供しているんだ。これを使えば、
ユーザーのフォームやその他のインタラクティブな要素とのインタラクションを改善できるよ。ここでは、
:focus, :hover, :disabled そして :checked の擬似クラスを
<input> 要素に使って、どうやってスタイリングできるかを見てみよう。
擬似クラス :focus は、フォームの要素がフォーカスを受けたときに適用されるよ。通常は、要素をクリックしたり、
Tabキーを使って移動したときに発生するんだ。フォーカスを受けた要素をスタイリングすることで、
ユーザーがフォームでの操作に慣れやすくなるんだ。
使用例:
CSS
input:focus {
border-color: #4A90E2;
box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
outline: none;
}
HTML
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name">
</form>
説明
border-color: フォーカスを受けたときに要素のボーダーの色を変更するbox-shadow: 要素の周りに影を追加して強調するoutline: 標準のブラウザのアウトラインを削除して、カスタムスタイルに置き換える
10.2 擬似クラス :hover
擬似クラス :hover は、ユーザーが要素の上にカーソルを乗せたときに適用されるよ。これは、
要素とのインタラクション中にビジュアルフィードバックを提供するのに役立つんだ。
使用例:
CSS
input:hover {
border-color: #50E3C2;
background-color: #F0F8FF;
}
HTML
<form>
<label for="email">メール:</label>
<input type="email" id="email" name="email">
</form>
説明
border-color: カーソルがその上にあるときに要素のボーダーの色を変更するbackground-color: カーソルを乗せたときに要素の背景色を変更する
10.3 擬似クラス :disabled
擬似クラス :disabled は、無効化され、ユーザーが使用または変更できないフォーム要素に適用されるよ。
これにより、ユーザーは要素がインタラクションできないことを理解するのに役立つんだ。
使用例:
CSS
input:disabled {
background-color: #E0E0E0;
color: #A0A0A0;
cursor: not-allowed;
}
HTML
<form>
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" disabled>
</form>
説明
background-color: 無効化された要素の背景色を変更し、その非アクティブを示すcolor: 無効化された要素内のテキストの色を変更するcursor: カーソルを"not-allowed"状態に設定し、要素が使用不可であることを示す
10.4 擬似クラス :checked
擬似クラス :checked は、checkbox や radio タイプの選択状態にある
要素に適用されるよ。これにより、選択された要素をもっと目立たせることができるんだ。
使用例:
CSS
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: #4A90E2;
border-color: #4A90E2;
}
HTML
<form>
<label>
<input type="checkbox" name="option" checked>
オプション 1
</label>
<label>
<input type="checkbox" name="option">
オプション 2
</label>
<label>
<input type="radio" name="choice" checked>
選択 1
</label>
<label>
<input type="radio" name="choice">
選択 2
</label>
</form>
説明
background-color: 選択された要素の背景色を変更するborder-color: 選択された要素のボーダーの色を変更する
GO TO FULL VERSION