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

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

 ブラウザで表示してみると、アクションによって以下のように表示される。

テキストボックスに対して何のアクションもしていない場合

テキストボックスに対して何のアクションもしていない場合 テキストボックスに対して何のアクションもしていない場合
  • 適用されるセレクタの設定:なし
  • ポイント:
    • テキストボックスはブラウザの標準のデザインで表示される。

テキストボックスにカーソルを重ねた場合

テキストボックスにカーソルを重ねた場合 テキストボックスにカーソルを重ねた場合
  • 適用されるセレクタの設定:「input:hover {〜}」
  • ポイント:
    • テキストボックスが黄緑色で表示される。
    • Safariはバージョン3以上で対応。
    • Internet Explorerはバージョン7以上で対応。

テキストボックスをクリックした場合

テキストボックスをクリックした場合 テキストボックスをクリックした場合
  • 適用されるセレクタの設定:「input:active {〜}」
  • ポイント:
    • テキストボックスが黄色で表示される。
    • Safariはバージョン3以上で対応。
    • Internet Explorerは未対応。

テキストボックスを選択した場合/文字を入力中の場合

テキストボックスを選択した場合/文字を入力中の場合 テキストボックスを選択した場合/文字を入力中の場合
  • 適用されるセレクタの設定:「input:focus {〜}」
  • ポイント:
    • テキストボックスが水色で表示される。
    • Safariはバージョン3以上で対応。
    • Internet Explorerはバージョン8(ベータ版)で対応。
  • コメント(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様、ご意見をお寄せ頂きありがとうございます。
頂いたご要望を今後の誌面作りに役立ててまいります。
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]