テーブルレスなフォームのマークアップ

このサンプルでは、テーブルを使用せずにマークアップしていくことから、各項目を<div.sub-group>内に記述し、<fieldset>でグループ化した。なお、グループのタイトルは画像で表現することを想定して、<h3>とした。

それぞれの項目は、見出し(<label.label-txt>)とフォーム部品(<input>要素、<select>要素など）で構成される。テキストフィールドに対しては「.text-fild」を定義しておく。
ラジオボタンやチェックボタンなど、<input>のあとに<label>要素を用いる箇所では、項目の見出しにあたるテキストを<span.label-txt>、フォーム部品を<span.label-txt>、フォーム部品を<span.btn-parts>でそれぞれネストした。 なお、<label>のfor属性とフォーム部品のid属性の値を同一にすることで、関連付けを行っている。

確認およびキャンセルボタンは、div#btn-box内に<button>要素を記述し、異なる画像を配置すると想定。それぞれの<button>にはtype属性が必要になるので、忘れずに記述しておこう。

お客様情報フォームレイアウトサンプル

性別

サンプルCSSコード

fieldset {
border: 1px solid #ccc;
margin: 2px 0px 20px 0px;
padding: 5px 10px;
}

div.sub-group {
clear: both;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCC;
padding: 7px 15px;
}

div.sub-group-box {
clear: both;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCC;
height: auto;
padding: 7px 15px;
}

.label-txt {
width: 140px;
display: block; float: left;
margin-right: 15px;
border-right: solid 2px #999;
}

div.even { background-color: #f9f9f9; }
div.last { border-bottom-style: none; }

input.txt-field,select {
color: #666;
background-color: #f9f9f9;
border: 1px solid #999;
}

input.txt-field:focus,select:focus {
color: #333;
background-color: #ffffcc;
border-color: #330000;
}

#btn-box {
text-align: center;
padding-bottom: 40px;
}

#btn-box button {
width: 100px;
height: 33px;
background-color: #fff;
border-style: none;
margin: 0px 5px;
padding: 0px;
}

Stylesheet Designguide MENU

Copyright (C) スタイルシートデザインガイド All Rights Reserved.