スタイルシート制作前のポイント

一言に「スタイルシートで設定する」と言っても、その方法はいくつかあります。それは全体的な設定から個々の設定までさまざまです。そんな設定テクニックを身につけることも大事ですが、それらのテクニックを状況に応じて使い分けることができれば、より効率的に、質の高いコーディングをすることが可能になります。
スタイルシートの設定にも制作者の個性がでるものですが、今回は私のスタイルシート設定におけるポイントを紹介します。

1. ウィンドウに対するサイト表示位置と背景
ウィンドウに対して表示サイトをセンター寄せにするのか、それとも左(右)寄せにするのか。また、それと同時に背景画像などの処理方法を考えます。デザインによってはbodyタグに背景画像を設定できる場合もあればそうでない場合もあります。特にセンター寄せの場合は、背景画像と表示サイトに1ピクセルのズレが生じることがあるので注意が必要です。

2. 各コンテンツの共通点
CSSレイアウトを使うメリットととして、「サイト全体の統一感」があります。コーディングの前に、見出しデザインやボックス間の余白、テキストの余白など、各コンテンツの共通点をしっかり押さえておきます。

3. フォントサイズの単位
私の場合、基本的にはパーセンテージ指定にしていますが、クライアントの要望によりピクセル指定にすることも少なくなりません。パーセンテージ指定の場合は親となる要素の文字サイズに依存してしまうので、設定の際は入れ子になることも考慮しなければならないので注意が必要です。その点、ピクセル指定の場合は入れ子のことなど気にすることなく、

* {
   font-size:12px;
}


と記述してしまえばいいので楽です。

このようにサイト共通のレイアウトや背景、フォント指定やデザインなどを把握することがスタイルシート設定のポイントとなります。共通点を把握できていれば、無駄な記述がなくなりコーディング作業も楽になります。何事も準備は大事というわけですよ。