Lesson 13 フォームをカスタマイズする - Webデザイン表現&技法の新・スタンダード・デザインパーツ編

2011.9.22 THU

Webデザイン
表現&技法の
新・スタンダード

Lesson 13

フォームを
カスタマイズする

	制作・文	高村香奈子（株式会社アークフィリア）
＞	To Use	Javascript \| CSS
＞	Browser	IE 6over\| Firefox 3over \| Safari 5over

光と影を表現するグラデーションやシャドウの使い方次第で閲覧者に与える印象は大きく変わる。やり方を間違えると雰囲気を台なしにしてしまうので、よく使われるポイントごとにコツを押さえておこう。

フォームのデザインも、Webサイト全体のテイストに合わせてカスタマイズしたい。CSSとJavaScriptを使用して、ひと手間かけたフォームのカスタマイズ方法を紹介しよう。

01

ヘッダーでフォームのスタイルを記述するCSSファイルとjQueryファイルを読み込む【1-1】（jQueryについてはWebデザイン表現&技法の新・スタンダード・インタラクション編「Lesson 04 リアルタイムでフォーム入力を判定する」を参照）。<body>に対し、フォントや余白の指定をしておく【1-2】。

【1-1】今回jQueryのバージョンは1.4.3を使用

【1-2】環境による見栄えの差を軽減するため、フォントの種類を指定

02

フォームの内容が入る部分は<form>タグで囲み【2-1】、CSSで横幅と背景色の指定をしておく【2-2】。

【2-1】

【2-2】背景色指定を忘れずに。チェックボックス・ラジオボタンの画像置換の際に必要となる

03

フォーム周りのテキストを記述【3-1】。各エリアのタイトル部分を<label>タグで囲み、補足事項がある場合はさらに<span>タグで囲んでおく【3-2】。タイトルの下に揃えて補足事項を配置するようCSSを記述する【3-3】。

【3-1】煩雑になりがちなフォーム周りのテキストだが、それぞれブロックを分けて配置することでこのように見やすくなる

【3-2】

【3-3】要素の下端にこのような影を付けることで、紙が反って浮いているように見える。要素の塗り自体にも反りを表現するグラデーションを加えればよりリアリティのある表現ができる

【3-3】<label>をブロック要素にしfloat:left させる。<span>は補足事項なので文字を少し小さめにし、同じくブロック要素にすることで<label>の下に配置する

04

テキストボックスとテキストエリアに背景画像を敷いてみる【4-1】。それぞれのテキストボックスの<input>には共通のクラスを振っておく【4-2】（次ページ）。テキストエリアは、後述するスクロールへの対応として、<textarea>と<span>の入れ子構造にしておく【4-3】。

【4-1】上：テキストボックス／下：テキストエリア

【4-2】<input>にクラス「text」を振った

【4-3】

05

次にCSS を記述していく【5-1】。テキストボックスとテキストエリアともにborder:noneとし、縦横の幅を指定する。テキストボックスに関しては背景画像を指定すれば完成だ。テキストエリアは、先の<span>に対し背景画像を指定し、さらに<textarea>に対して「overflow:auto」「background-color:transparent」を指定することで、背景画像を固定したまま入力した文字のみスクロールさせることができる【5-2】。

【5-1】上：テキストボックス／下：テキストエリア

【5-1】テキスト入力エリアは、文字と枠の余白をしっかり取ると見栄えが良くなる

【5-2】<input>にクラス「text」を振った

【5-2】左：<span>に背景画像を指定した場合。／右：<textarea>に直接背景画像を指定すると、IEなどで背景ごとスクロールしてしまう

06

チェックボックスとラジオボタンのイメージをオリジナルのものに変えてみよう。Photoshop やFireworks で画像を作るのだが、CSSスプライトを使用するため、非チェック時とチェック時の画像を縦に並べて書き出しておく【6-1】。次にチェックボックスのHTMLを記述する【6-2】。<input>に振ったid と<label>のforを関連付けさせるため、それぞれをナンバリングし同じ値にする。ラジオボタンも同様に記述する【6-3】。

【6-1】左：チェックボックス／右：ラジオボタン　ドキュメントサイズは「17×35px」で作成

【6-2】<input>には共通のクラス「checkbox」を、<label>には「checkboxSelect」を振っておく

【6-3】ラジオボタンはnameの値を同じにしてグルーピングしておく

07

CSSとJavaScriptを使用した画像置換でオン・オフを切り替える。チェックボックスとラジオボタンが選択された状態のときにクラスを振るスクリプトを記述する。チェックボックスに対してクラス「checkboxSelected」を、ラジオボタンに対して「radioSelected」を振る【7-1】。次にCSSを記述していく【7-2】。デフォルトのチェックボックスとラジオボタンのレイヤーを下層にし、上にオリジナルの画像を被せるイメージだ【7-3】【7-4】。【06】で振ったチェック時のクラスに対して、CSSスプライトでチェック時の画像を指定すれば完成。

【7-1】ここで振ったクラスを使用して、CSSで画像置換する

【7-2】タン類が多いと煩雑な見た目になってしまうので、各ボタンの間隔は広めに取ることを心がける

【7-3】オリジナルのオン・オフ画像に変わった

【7-4】このとき<form>に対して背景色を指定していないと、ブラウザによっては微妙なずれが見えてしまうので注意したい

08

送信ボタンをロールオーバーさせる。ここでもCSSスプライトを使用するため、非ロールオーバー時とロールオーバー時の画像を上下に配置して書き出しておく【8-1】。HTMLでは<button>と<p>を入れ子構造にする【8-2】。ロールオーバー時にクラスを振るスクリプトを記述する【8-3】。CSSで画像置換の設定をしたら完成だ【8-4】。