フォームのインタフェースデザインを考える(1)

エ・ビスコム・テック・ラボ
2008-05-30 15:30:01
  • このエントリーをはてなブックマークに追加

フォームのインターフェースデザイン

 フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。

 CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。

ユーザーのアクションに応じてフォームのデザインを変更する

 :hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の3種類となっている。

:hover

 項目にカーソル(マウスポインタ)を重ねているときにスタイルシートを適用する。

:active

 項目をクリックしたとき(項目部分でマウスボタンを押してから放すまでの間)にスタイルシートを適用する。

:focus

 項目を選択したときにスタイルシートを適用する。フォームのテキストボックスの場合、選択すると文字を入力できる状態になる。


 いずれもCSS 2から定義されているセレクタだが、フォームでの利用に対応していたのはFirefoxとOperaだけだった。しかし、Safariがバージョン3で対応し、Internet Explorerもバージョン7や8で部分的に対応するようになったことで、ようやく実際に利用する目処が立ってきたと言える。

フォームに対するセレクタの利用とブラウザの対応
セレクタFirefoxSafariOperaInternet Explorer
:hover3以上で対応7以上で対応
:active3以上で対応×
:focus3以上で対応8(ベータ版)で対応で対応

 たとえば次のソースでは3つのセレクタを利用して、ユーザーのアクションに応じてテキストボックスの色が変わるように設定した。

input:hover{
background-color: greenyellow;
}

input:focus{
background-color: skyblue;
}

input:active{
background-color: yellow;
}

名前:

住所:

ブラウザで表示を確認する

 では次ページから実際にどのようなアクションをとるのか、ブラウザで表示しながらみていこう。

  • コメント(2件)
#1 tokumei   2008-06-02 05:32:31
IEは未対応とそれで終わるのではなく、IEにも対応した記述方法を
掲載した方が、より良い記事になるかと思うのですが
いかがでしょうか。
#2 builder   2008-06-03 14:22:22
builder編集部です。いつもご愛読いただき、ありがとうございます。

1ページ目の表「フォームに対するセレクタの利用とブラウザの対応 」におきまして、
当初、各セレクタを上から「:hover」「:active」「:hover」と記載しておりました。
この重複は編集時のミスによるもので、正しくは「:hover」「:active」「:focus」の順です。
はてなブックマークでご指摘くださったid:mohri様、ありがとうございます。

また、tokumei様、ご意見をお寄せ頂きありがとうございます。
頂いたご要望を今後の誌面作りに役立ててまいります。
  • 新着記事
  • 特集
  • ブログ