2006 -03-21 ( Tue )

More

marginとpaddingをリセットする
下のようなCSS指定をしているウェブサイトをよく見かけます。

* {
margin: 0px;
padding: 0px;
}

「*」は全称セレクタといって「全要素に適用される」という意味です。ここで全部の上下余白をゼロにしておけば見出しやリスト、フォームのレイアウトがしやすくなり、各種ブラウザの表示状態も合わせやすくなります（最近まで面倒くさがってやってなかったのですが、こっちの方が結果的には楽だった）。
ベテランのデザイナーにはもっと細かいリセットをする方もいますが、最近のブラウザならmarginとpadding、font-weightくらいで充分だと思います。

なお、Firefox・Safari等では、何も設定していないとul・ol要素が親要素の枠から1文字分程度右にずれます。
（みりばーるさんのコメントをご参照ください。IEとFxのデフォルトスタイルシートの違いからくるものだそうです）
IEでしか表示確認をしていないブログはこの対策をしていないので、Firefoxで見るとたいていサブメニューのリストが右にずれています。

文字サイズはパーセント指定にする
文字サイズでいちばん手っ取り早いのはピクセルで固定してしまうか「small」などの定義語を使うことです。
しかし前者はアクセシビリティの面でよくありませんし、後者はXML宣言入りの文書に対して使うとIE6での表示が一段階大きくなってしまいます。
やはり、普段からパーセント指定に慣れておくのがいちばんいいと思います。私が多用しているのは「82%」（標準的なブラウザ表示で約13ピクセル）です。小さいと言う人もいるようですが。

ちなみに「100%」を指定すると、Operaでは不具合が出るようなのでここは「1em」にしてます。
あと、XML宣言入りの文書だとIE6の場合テーブル要素に文字サイズのパーセント指定が効かないので、表の中だけは固定サイズにしています。

一つの要素にwidthとpaddingを一緒に指定しない
古いブラウザやIE後方互換モードのボックス計算に対応するためには非常に大切なことなのですが、これがかなり難しいです。
特にブログデザインだとdiv要素を多用しないようにとか考えるとパズル的な工夫をしなければなりません。

「横幅を指定した枠内に余白を作って見出しと段落を入れる」レイアウトをする場合、私が普段からしているのが

<div class="box1">
<h2>見出し</h2>
<p>文章文章文章文章文章</p>
</div>

というようにクラス名を付けたdivでまるっと囲んだうえで（dl要素が使えるならそうした方が良いのですが）、スタイルを書いていく方法です。
文章で説明するとややこしいので、こちらのサンプルページをご覧下さい。IEとIE以外だと表示が違っているのが分かります。
Mac使いなので見られません（；；）という方は画像でどうぞ

まとめっぽく
とにかく、ひとつの要素で体裁を全て整えようと考えず、見出しと本文を含めた「文書」としてレイアウトを考えることが重要なんだなと思います。
普段からそういうクセをつけておけば、次第にきちんとしたWEBデザインができるようになって、validな文書にも移行しやすくなります。たぶん（マテ）

人間だから完璧にとはいかないし、お遊びもCSSの楽しさのひとつなのですが、できれば中身もきれいなWEBデザインを目指したいものです。
あ、余談ですが本文中の小見出しをstrong要素にしてるのはわざとです。テンプレを変えると記事タイトルがh2になったりh3になったりするもんで（＾＾；みりばーるさんがさらに丁寧で理論的な解説記事を書いてくださってます。本格的にWEBデザインをしている方はご一読を。

---

*1　これを読んでいる方はご存知かと思いますが、IE6には一行目にXML宣言が入っていると文書宣言が何も入っていない「後方互換モード」と判断するバグがあり、widthとpaddingの計算方法やtext-align・font-sizeの扱いなどがIE以外と大幅に違ってしまいます。
「webshop」を作ったときは一行目にXML宣言を入れましたが、制作スピードや他の人がCSSを編集することを考えると普段は入れたくないです（笑）　↑戻る