少し味付けをしてみる

さて、ヘッダーの構造がわかったところで体裁を整えていこう。ここでは三つのバリエーションを提示して、できることのアイディアをいくつか示していく。

その前にフォントサイズに関して言及しておこう。以前にユーザがフォントサイズを変更できるようにすることについて述べた。できればレイアウトを崩すことなくこの機能を提供したい。これはかなり困難なことで、その方法についてもインターネット上でたくさんの議論がある。私にとって一番きれいな方法は、ボディのサイズを７６％に設定し、それから「em」を使って特定のフォントサイズを決めていくやり方だ。「em」というのはアルファベット「M」のサイズのことで、すべてがデフォルトの比率（1.2em はデフォルト em の1.2倍）で指定される。

ではボディ要素にスタイルをいくつか入れてみよう：

ここでは sans-serif フォントを選択した。重要なのはフォントをいくつか指定しておくことだ。そうすれば読み手のコンピュータに自分好みのフォントが入っていなくても代替があることになる。

次に水平罫線を表示させないようにする。もし必要なら後で表示させるようにすればよい。

オプション１ – ベーシックなタイトル、全幅、左よせ

以下は画面の全幅と小さなロゴを使用したヘッダーセクションだ。

色は画像ソフト（Adobe Photoshop）のカラーセレクタを使って選んだものだ。画像ソフトが示した RGB 値をこのスタイルシートにコピーした。たいていの画像ソフトは似たような機能を持っているはずだ。

では他の部分のスタイルは？

#header

• margin-bottom: 20px – ヘッダーとコンテンツの間に余白を入れる。余白を入れるのはいいことだ

#headerimg

• font-size: 1.2em – これはタイトル下のブログの簡単な説明で通常よりも大きくしてみた
• height: 6.5em – これも「em」で設定していることに注目。これによりフォントサイズが大きくなるとヘッダーも大きくなる。もしこれをピクセルサイズで設定するとフォントがヘッダーからはみ出てしまうことがあり、よくない
• padding-left: 7.5% – なぜ 7.5% なのか？ボディ（body）が85%なので残りは15%。このテーマは真ん中におかれるので両サイドが7.5%になる。ここで7.5%に設定しておけばタイトルはボディと同じ幅になり同じように可変幅となる
• background – 簡単なロゴを角においた

ではどのような効果をもたらすのか見てみよう：

Firefox
Internet Explorer

単純なスタイルにしては悪くない！

オプション２ – ベーシックなスタイル、中心置き

オプション１に似ているがタイトルがページの真ん中におかれている（auto margin のトリックを使用）。この説明を再びするのは省略させてもらう。

オプション３ – おしゃれなヘッダー

ここではもう少し独自なものを得るため、背景画像をコンテンツの下側にフロートさせている。また、固定と可変両方のサイズを使用していて、すべてを可変にする必要がないことも証明している。