第2回　フォームにCSSスタイルを加える工夫

テクノロジー

2006.7.10 MON

Webページで設けたアンケートにより多くの人に答えてもらうなど、フォームのデザイン性はアクセシビリティ的にも非常に重要だ。そこで、今回はフォームにスタイルを付けてみよう。

解説：矢野りん

グループ化された項目が罫線の囲みに収められる

■POINT

「fieldset」の区切りにシンプルなドットの罫線を与えて、背景のストライプパターンとマッチさせた。legendのテキストカラーとドットの罫線、背景パターンはすべて同一色相のトーン違いによる配色パターン。その他のテキストは無彩色のライトグレーに設定して全体を調和させている。入力フォームはフォームのラベルの配置がそれぞれ頭合わせになっていることと、テキストボックスなどのインターフェイスも同様に頭合わせできていれば読みやすくなる。

■STEP 1

「fieldset」は入力する項目をグループ化する際に使うHTMLタグ【図1】だ。入力項目の多いページではこのタグを使うことで、グループ別にタブキーで項目をジャンプする機能も付けられる。また、グループの見出しに相当する「legend」タグでテキストをマークアップすれば、見た目にも、システム側にもフォームの構造がわかりやすくなる。一般的なフィールドセットのタグ構成の例は以下の通りだ。

【図１】「fieldset」は入力する項目をグループ化する際に使うHTMLタグ

■STEP 2

当然ながらフォームの宣言を先にしたうえで項目をグループ化していく。テキスト入力ボックスなどは「label」タグでラベルを付けておき、文字とインターフェイスの関係性をはっきりさせておこう。

スタイルを付けずに「fieldset」をブラウズすると【図2】のようになる。デフォルトで囲み付きのスタイルが付いてくる。

【図2】スタイルを付ける前

【図2】のソース

この状態でも使えないことはないが、視覚的に情報を把握しているユーザーにとっては少々ちらかった感じがしてしまう。以降はCSSで「legend」のスタイルやlabelの位置調整を行う必要がある。

■STEP 3

まずfiledsetのデフォルトの罫線を消し、「border-style」を破線に設定してボックス要素の上部ボーダー以外は消した。「legend」や「label」もデフォルトの位置が反映しないように「float:left」でボックス内の左側に回り込ませたのが【図3】だ。

【図3】スタイルが付いた状態では「fieldset」「legend」「label」はこのような位置に見えている

テキストを入力するボックスやプルダウンの選択ツールはボックス要素の位置を「left:8em」に指定し、label群と重ならないようにまとめて位置調整している。

【図4】入力項目の頭に8em与えて、「label」と重なってしまうのを避ける

■STEP 4

先ほどの【図2】にIDやクラス名を足して、【図5】のスタイルシートとリンクさせて、完成させた例が【図6】だ。

【図5】作成したスタイルシート

全体の幅サイズはCSSの中の、formタグの「ID」「#formObj」内で「width: 34em」にした。「margin:auto」なので常にブラウザウインドウの中央にレイアウト全体が移動する。

完成したページではタブインデックスを指定して入力項目間をタブキーによって移動しやすくしている。背景パターンや文字色をカスタマイズすれば、すっきりしたフォームが簡単に作れるだろう。