ページの本文へ

Hitachi

企業情報研究開発

各UI要素と状態の説明

ユニバーサルデザイン

色作成支援ツール(CSS3ジェネレーター)で色を選択可能な各UI要素と状態を説明します。

表1:色作成可能なUI要素
UI要素 HTMLの要素(*1) 補足
矩形 div要素
テキスト p要素
リンクテキスト a要素
ボタン button要素 button要素以外にinput要素のtype属性値をbuttonにする方法もありますが、本ツールはbutton要素を用いています。
テキストボックス input要素
(type="text")
HTML5ではtype属性値の種類が増えています。指定する値によっては、ブラウザが表示するテキストボックスのインタフェースが変わります。
区切り線 hr要素 HTML4.01ではhr要素を装飾のために用いることができましたが、HTML5から、hr要素は区切り線と定義されています。そのため、ブラウザは区切り線のように見せるために、CSSで指定した色のみでは表示しないことがあります。
チェックボックス input要素
(type="checkbox")
CSSで色を変えられる部分はかなり限定的です。
ラジオボタン input要素
(type="radio")
CSSで色を変えられる部分はかなり限定的です。
プルダウン select要素
リストボックス select要素
(size属性値の指定有)
*1
本ツールで用いているHTMLの要素を説明しています。各UI要素を作成するのに、必ずしもこれらのHTMLの要素を使わなければならないということはありません。
表2:色作成可能なUI要素の状態
UI要素 状態(状態の説明は表3
通常時 マウスオーバー時 クリック時 フォーカス時 非活性 訪問済
矩形
テキスト
リンクテキスト
ボタン
テキストボックス
区切り線
チェックボックス
ラジオボタン
プルダウン
リストボックス

○:有 −:無

表3:状態の説明
状態 CSSの
擬似クラス
説明
通常時 マウスカーソルやキーカーソルが当たっていない状態です。
マウスオーバー時 hover マウスカーソルが当たっている状態です。
クリック時 active マウスカーソルを当ててクリックしたときの状態です。
フォーカス時 focus キーフォーカスが当たっている状態です。
非活性 disable クリックすることができない状態です。キーフォーカスも当たりません。
訪問済 visited 過去に訪れたことのあるリンクです。ブラウザの設定で、履歴が記録されている場合に示されます。