HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


要素の操作中にのみ働くスタイルシート

CSS/HTMLの書き方

CSS
セレクタ:active { プロパティ:値 ; プロパティ:値 ; …}
セレクタ:focus { プロパティ:値 ; プロパティ:値 ; …}

CSSの詳細情報
対応ブラウザ Windows MAC
IE 5.0以上/FF1.0/NS7.1/OP8.0
※一部未対応
SF/IE5.0
CSSレベル CSSレベル1

解説

マウスでクリックしているときや、マウスのカーソルがある部分にフォーカスされている時にのみ働くスタイルシートの指定方法です。例えば、フォームの入力中にだけフォームの背景色を変えたりすることができます。これら「:active」や「:focus」のことを「動的擬似クラス」と言います。

アクティブ(:active)

アクティブとは、ブラウザの画面上でマウスをクリックしてから離すまでの動作を指します。指定した要素をアクティブにしているときにその要素に書式を適用させることができます。

フォーカス(:focus)

フォーカスとは、ブラウザの画面上でマウスをクリックし、入力状態にあるまでの動作を指します。指定した要素をフォーカスにしているときにその要素に書式を適用させることができます。

対応状況

これらの動的擬似クラスが適用できる要素はブラウザによって対応状況が様々です。また、中には、「:active」と「:focus」を同時に指定しなければ動作しない要素もあります。

activeを適用できる要素 IE 5.0以上 NS7.1 FF1.0 OP8.0 SF MAC IE5.0
a (リンク) ○※ ○※
input type="text" (1行テキスト) × × × ×
input type="radio" (ラジオボタン) × × × × ×
input type="checkbox" (チェックボックス) × × × × ×
input type="botton" (汎用ボタン) × ○※ ○※ ×
select (リストボックス) × × × × × ×
textarea (複数行テキスト) × × × ×
div (汎用ブロックレベル要素) × ×
※「:focus」を併用する場合は、「:focus」を「:active」の前に書くことが必要

引用元(一部改):藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P57、2005

focusを適用できる要素 IE 5.0以上 NS7.1 FF1.0 OP8.0 SF MAC IE5.0
a (リンク) ×
input type="text" (1行テキスト) ×
input type="radio" (ラジオボタン) × × × × ×
input type="checkbox" (チェックボックス) × × × × ×
input type="botton" (汎用ボタン) × ×
select (リストボックス) × ×
textarea (複数行テキスト) ×

※引用元(一部改):藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P57、2005

CSS/HTMLサンプル

a:active,input:active,select:active,textarea:active,div:active { background:#ffdff9; }
a:focus,input:focus,select:focus,textarea:focus,div:focus { background:#eeeeee; }

マウス動作時の要素に背景色を適用する サンプル

次のページへ >>