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

エ・ビスコム・テック・ラボ
2008/05/30 15:30

わかりにくいフォームはユーザーを戸惑わせ、離脱させてしまう。フォームのインタフェースデザインで利用できるセレクタと、各ブラウザの対応状況をまとめた。

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

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

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

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

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

:hover

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

:active

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

:focus

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


 いずれもCSS 2から定義されているセレクタだが、フォームでの利用に対応していたのはFirefoxOperaだけだった。しかし、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;
	}
<form action="#" method="get">

<p>名前:<input type="text" name="name" /></p>

<p>住所:<input type="text" name="address" /></p>

</form>
ブラウザで表示を確認する

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

  • コメント(2件)

#1 tokumei  - 2008/06/02 05:32:31

IEは未対応とそれで終わるのではなく、IEにも対応した記述方法を 掲載した方が、より良い記事になるかと思うのですが いかがでしょうか。
» 不適切なコメントを報告する

#2 builder  - 2008/06/03 14:22:22

builder編集部です。いつもご愛読いただき、ありがとうございます。 1ページ目の表「フォームに対するセレクタの利用とブラウザの対... 続きを見る
» 不適切なコメントを報告する
記事に関係する情報をコメントでお寄せください

ニックネーム : CNET_IDにログインしてコメントする

コメント本文(必須) :
  • 昨日のトップ記事
  • 2日前
  • 3日前
  • 8日前
  • 9日前
  • 新着記事
  • 人気記事
  • 特集
  • ブログ