
フォームのインタフェースデザインを考える(1)
エ・ビスコム・テック・ラボ
2008-05-30 15:30:01
フォームのインターフェースデザイン
フォームはユーザーから情報を送ってもらうのに欠かせない要素だ。ユーザーが入力で迷うことのないように、わかりやすくデザインすることが求められる要素でもある。
CSSではユーザーのアクションや入力項目の状態に応じてフォームのデザインを設定するセレクタがさまざまに定義・提案されており、FirefoxやSafariの対応も進んでいる。そこで今回から、フォームのインターフェースデザインに関連したセレクタを紹介する。
ユーザーのアクションに応じてフォームのデザインを変更する
:hoverといったセレクタを利用すると、ユーザーのアクションに応じてスタイルシートを適用することができる。一般的にはリンク部分のデザインを変えるのに利用するが、フォーム部分のデザインを変えることも可能だ。利用できるセレクタは次の3種類となっている。
:hover
項目にカーソル(マウスポインタ)を重ねているときにスタイルシートを適用する。
:active
項目をクリックしたとき(項目部分でマウスボタンを押してから放すまでの間)にスタイルシートを適用する。
:focus
項目を選択したときにスタイルシートを適用する。フォームのテキストボックスの場合、選択すると文字を入力できる状態になる。
いずれもCSS 2から定義されているセレクタだが、フォームでの利用に対応していたのはFirefoxとOperaだけだった。しかし、Safariがバージョン3で対応し、Internet Explorerもバージョン7や8で部分的に対応するようになったことで、ようやく実際に利用する目処が立ってきたと言える。
セレクタ | Firefox | Safari | Opera | Internet Explorer |
---|---|---|---|---|
:hover | ○ | 3以上で対応 | ○ | 7以上で対応 |
:active | ○ | 3以上で対応 | ○ | × |
:focus | ○ | 3以上で対応 | ○ | 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
#2
builder
2008-06-03 14:22:22
builder編集部です。いつもご愛読いただき、ありがとうございます。
1ページ目の表「フォームに対するセレクタの利用とブラウザの対応 」におきまして、
当初、各セレクタを上から「:hover」「:active」「:hover」と記載しておりました。
この重複は編集時のミスによるもので、正しくは「:hover」「:active」「:focus」の順です。
はてなブックマークでご指摘くださったid:mohri様、ありがとうございます。
また、tokumei様、ご意見をお寄せ頂きありがとうございます。
頂いたご要望を今後の誌面作りに役立ててまいります。
1ページ目の表「フォームに対するセレクタの利用とブラウザの対応 」におきまして、
当初、各セレクタを上から「:hover」「:active」「:hover」と記載しておりました。
この重複は編集時のミスによるもので、正しくは「:hover」「:active」「:focus」の順です。
はてなブックマークでご指摘くださったid:mohri様、ありがとうございます。
また、tokumei様、ご意見をお寄せ頂きありがとうございます。
頂いたご要望を今後の誌面作りに役立ててまいります。
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
デジタルを当たり前と言えるか?
-
エンジニアのためのREHL8まとめ
-
M365 活用のセキュリティ対策
-
第4回CNBFミートアップレポート
-
クラウド時代に理想のセキュリティ
-
未来のセキュリティイノベーターへ
-
次の一手はこれだ!
-
特集:IT最適化への道
-
連載!プロが語るストレージ戦略
-
セキュリティの今を知る
-
性能の大幅向上を実現!
-
データの散在と非常率運用がネック
-
企業のリスクマネージメント対策に
-
漫画で解説:IoTはじめの一歩
-
連載!プロが語るストレージ戦略
-
SECCON2020レポート第二弾!
-
次期自治体ネットワーク強靭化へ
-
ビッグデータ最前線!
-
コスト・運用の壁を崩す!
-
明日からではもう遅い?!
-
その先へ
-
ゼロトラストに向けた道のりを支援
-
いまさら聞けない「PPAP」
-
ネットワークもサービスとして使う
-
部分最適だけではダメ
-
IDaaSって何?
-
リモート、オフィス、オンサイト
-
SoRとSoEをつなぐDX推進の要
-
DX時代のアプリケーションセキュリティ
-
いまあるデータで身近な業務をDX
-
時代が求める生体認証への期待
-
厳しい目が向けられる内部不正
-
ハイブリッドクラウドとAI
-
連載!プロが語るストレージ戦略
掲載した方が、より良い記事になるかと思うのですが
いかがでしょうか。