Webデザイン |
Lesson 13 | フォームを カスタマイズする |
制作・文 | 高村香奈子(株式会社アークフィリア) | |||
> | To Use | Javascript | CSS | ||
> | Browser | IE 6over| Firefox 3over | Safari 5over |
フォームのデザインも、Webサイト全体のテイストに合わせてカスタマイズしたい。CSSとJavaScriptを使用して、ひと手間かけたフォームのカスタマイズ方法を紹介しよう。 |
01
【1-1】今回jQueryのバージョンは1.4.3を使用
【1-2】環境による見栄えの差を軽減するため、フォントの種類を指定
02
【2-1】
【2-2】背景色指定を忘れずに。チェックボックス・ラジオボタンの画像置換の際に必要となる
03
【3-1】煩雑になりがちなフォーム周りのテキストだが、それぞれブロックを分けて配置することでこのように見やすくなる
【3-2】
【3-3】<label>をブロック要素にしfloat:left させる。<span>は補足事項なので文字を少し小さめにし、同じくブロック要素にすることで<label>の下に配置する
04
【4-1】上:テキストボックス/下:テキストエリア
【4-2】<input>にクラス「text」を振った
【4-3】
05
【5-1】テキスト入力エリアは、文字と枠の余白をしっかり取ると見栄えが良くなる
【5-2】左:<span>に背景画像を指定した場合。/右:<textarea>に直接背景画像を指定すると、IEなどで背景ごとスクロールしてしまう
06
【6-1】左:チェックボックス/右:ラジオボタン ドキュメントサイズは「17×35px」で作成
【6-2】<input>には共通のクラス「checkbox」を、<label>には「checkboxSelect」を振っておく
【6-3】ラジオボタンはnameの値を同じにしてグルーピングしておく
07
【7-1】ここで振ったクラスを使用して、CSSで画像置換する
【7-2】タン類が多いと煩雑な見た目になってしまうので、各ボタンの間隔は広めに取ることを心がける
【7-3】オリジナルのオン・オフ画像に変わった
【7-4】このとき<form>に対して背景色を指定していないと、ブラウザによっては微妙なずれが見えてしまうので注意したい
08
【8-1】ロールオーバー時のボタンは色が濃くなるようにした
【8-2】<p>に対してCSSで画像を設定する
【8-3】ロールオーバー時にクラス「hover」を振った
【8-4】<button>の背景色はtransparentにし、<p>に対して非ロールオーバー時とロールオーバー時の画像を設定する