デザプロブロ

入力フォームのデザイン。dl dt dd編

どういう風にタグを組んでおけば、メンテしやすいかを考えてしまう。
｢HTMLは変更せずにCSSの修正だけでデザイン変更できる｣のが望ましい。

●避けたいタグ
・divタグ
画面のレイアウトとして表現してるので、さらにdivを使ってるとHTMLの構造がわかりにくくなる。また、ネストがずれて何がなんだかわからなくなることがあるため。

ってことである程度、自分の中で構成決めておきたいと思ったことを書きます。

●dl,dt,ddタグで構成させる。(とりあえず何も装飾しない。)
よく見かけますね。CSSだけで対応できる柔軟性は一番高いのかなと思ってます。
とりあえず、構成だけ作ってみる。CSSで装飾はしない。

<dl>

<dd>

<ul>

</ul>

</dd>

<dt><label for="color">プルダウン</label></dt>

<dd>

<option value="Black" selected="selected">Black</option>

<option value="LimeGreen">LimeGreen</option>

<option value="SeaGreen">SeaGreen</option>

</select>

</dd>

<dt>チェックボックス</dt>

<dd>

<ul>

<li><input type="checkbox" id="checkbox1" name="checkbox" size="40"/><label for="checkbox1">チェックボックス1</label>

<li><input type="checkbox" id="checkbox2" name="checkbox" size="40"/><label for="checkbox2">チェックボックス2</label>

</ul>

</dd>

<dt><label for="password">パスワード</label></dt>

</dl>

<ul>

</ul>

</form>

※結果

基本、dl,dt,ddなのですが、inputが複数ある場合チェックボタン、ラジオボタンは、さらに内部でul,liで括ってます。

●HTML構造をいじらずに装飾してみる。
ここからHTML構造をいじらずにちょこっとCSSで装飾してみる。

dl,dt,dd,ul,li{

margin:0px;

padding:0px;

}

dl{

width: 450px;

}

dt{

display:list-item;

margin-top:20px;

margin-left:10px;

list-style-type: square;

}

dd{

margin-left:20px;

padding: 10px 10px 10px 10px;

border-style: double;

padding: 5px;

background-color: #DCDCED;

}

li{

display:inline;

}

※結果

ちょっとCSS指定するだけで様になる。
display要素を"list-item"にするとulタグのようにマーカーをつけることができる。
dtにその設定を加えてつけています。
さらにマーカーが隠れているので、margin-leftで右側にずらさなければならない。
基本、項目名と入力フォームが別タグでくくられているので、もっとこだわってCSSで設定できそうです。

●ボーダー使ってお洒落に。
DTに左だけボーダーつけて項目と明示することもできる。これ便利だなと思った。

dl,dt,dd,ul,li{

margin:0px;

padding:0px;

}

dl{

width: 480px;

}

dt{

border-left: solid 8px #CCC;

margin-top:20px;

margin-left:10px;

padding-left: 5px;

list-style-type: square;

}

dd{

margin-left:50px;

padding: 10px 10px 10px 10px;

border-style: double;

padding: 5px;

background-color: #DCDCED;

}

li{

display:inline;

}

</style>

●テーブル構造を表現してみる。
上記HTMLにCSSを適用させてみます。

dl,dt,dd,ul,li{

margin:0px;

padding:0px;

}

dl{

border: 1px solid #333;

border-top: none;

width: 700px;

}

dt{

clear: left;

float: left;

width: 160px;

border-top: 1px solid #333;

}

dd{

margin-left:160px;

border-top: 1px solid #333;

border-left: 1px solid #333;

}

li{

display:inline;

}

</style>

※結果

dtにfloat:leftかけてdtとddを横並びにする。
｢線をどのタグで指定するか？｣だが、dl,dt,dlそれぞれが分担して引かなければならない。
同じ線を複数のCSSで指定しなければならないため、だるい。
特にdtとddの間の線だが、dtにfloatかけているため、ddが線を引く場合、dtのwidthと同じ分だけmargin-leftをかけないといけない。
横のセル同士がテーブルよりも弱いため、I.Eだと高さがずれる。
テーブル構造を表現したいなら、素直にtableタグ使ってる方がいいのかなと感じた。
dl dt ddではせいぜい横並びまでが限界かなって感じる。

参考文献：横並びのフォームのマークアップ - Webtech Walker

文字装飾タグの使い分け。fontはダメ？

HTML構成作っていく上でたまに｢文字をどのタグで括るか？｣で悩んでしまうときがある。
ちょっとまとめておきたい。

●とりあえずfontタグはダメ
HTML4.01の時点ではもう非推奨。CSSがなかった頃に文字装飾として使われてたタグだが、もはや｢要素の属性で指定する｣という形が古く、CSSと混在させるとわかりにくくなるため。

●基本的にはh1～hn
記事のタイトルや大事なところを構成させるのはhタグシリーズ

●長文を構成させるにはp
記事の長文を囲むのはやはりpタグか。

●文字を装飾させるのはstrong、em、span
強調させたかったらstrong、斜体ならem、それ以外に別途表現したいならspan

●非推奨ではないが、i、bタグはどうするか？
HTML5で一応定義はされてる。

・bは、重要性ではないが、他と区別したいテキストに使用。

・iは、専門用語などを表すときに使用。

ここらへん別に使わなくてもいいんじゃないかなとか思ってる。

Padding、border-radiusでアイコンを作ろう。

Paddingは大変便利です。
border-radiusと組み合わせて｢アイコンのように見せる｣ために使ったりしています。
わざわざ画像作成する必要もなく、簡単にアイコンっぽく見せることができるので、ページナビとかにも使えて便利です。

※SAMPLE

ポイントとしては、
1.アイコン化したい文字をタグで囲みます。

<span class="marker1">CHECK!</span>

2.そこにCSSを適用させます。

span.marker1{
background-color:#009933;
padding:3px 7px 3px 7px;
border-radius:8px;
font-size:13px;
color:#ffffff;
}

DL,DT,DDタグを活用しよう

dl,dt,dd要素だけを使ってクールな日記を作成する

CSSメモ

list-style-type: decimal;

CSS 属性で指定する。

CSS で属性で指定することができるっぽいね。

input[type="text"]{
color:#ffffff;
}

他にもいろいろできそうだね。
この指定方法便利です。
ブラウザはどこから対応してるかわからない。

DIVを中央に揃える。

DIVを中央に揃える例
SAMPLE
つづきはこちら

input要素のtype属性値がimageのとき

基本的にはサブミットなんだけど、パラメータが全然違うね。
・value値は送信しない。
・nameと押されたX、Y座標を渡す。←ずっとstrutsが何かやってるんだと思ってた。。。
SAMPLE

DIVの高さを揃える。

DIVの高さを揃える典型的な調整方法です。
SAMPLE
つづきはこちら

paddingはブラウザ間でレイアウトが崩れる。

paddingは、gecko系を使用したブラウザとI.E.とレイアウトが異なってしまいます。
以下、paddingについて簡単なサンプルを作成してみました。
I.E.とI.E.以外のブラウザで違いが出ます。

※SAMPLE

I.E.で見た場合、以下のようになってるかと思います。
(I.E.9で確認)

FirefoxやChromeで見た場合は、以下のようになってます。

一目瞭然でpaddingを使用したレイアウトの長さに差が出ています。

・paddingとは
子要素を表示する余白を設定する。
※I.E.以外は指定した要素自身が膨らんで、子要素との余白を作る。
※I.E.の場合は、指定した要素の幅は変わらないが、子要素が縮まる。

・marginとは
指定した要素自身が親要素や隣接する要素との余白を作り縮こませる。

●対処法
・DOCTYPE宣言を変更する。
｢HTML4.01にほとんどのブラウザが標準準拠したl宣言にしちゃいましょう｣というやり方です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
もしくは、
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict //EN" "http://www.w3.org/TR/html4/strict.dtd">
※SAMPLE

ここらへんはサイト、CSSデザインサンプルに素晴らしい調査結果があります。
レイアウトが崩れる原因

・レイアウトのテーブルやセルにpaddingを使用しない。
昔はこれをよく言われましたねw。paddingを使わないのが一番ゴタゴタしない。ただ、marginだけで対応しようとするとレイアウトをネストさせる構造に作らねばならず、いろいろ大変です。いまや古代の対応法だと思います。