CSSを書くことを考えつつ画像をスライス

実はここが一番重要じゃなかろうかと思われる画像のスライスに入る。ここを上手いこと作業しないと、無駄なdivが増えたり、画像のファイルサイズが増大したりする。

見づらいかもしれないけど、スライスするとこんな感じ。

ヘッダー

上部の緑のボーダーについてはborderでどうにかしてしまうので画像にはしない。

拡大すれば分かりやすいと思うけど、ナビゲーションは、ボタン部分と繰り返し用の画像をスライス。グレーの枠についてはborderでやるので、1px分削っている。

キービジュアル、メイン・サブカラム

特に書くこともない。特別凝ったことはせず、素直に見出し部分は画像として書き出してしまう方向で。こちらもグレーの枠はborderプロパティで表示するので、その部分はスライスに含めていない。

フッター

フッタには縦方向のグラデーションがあるので適度な横幅で繰り返し用の背景画像をスライス。横幅は1pxにすればファイルサイズを節約出来るけど、Fireworks上でクリックしづらくて仕方ないだろうから、5〜10pxくらいにしておくのが適当だと思う。そこまでしてファイルサイズ削る必要性も感じられないし。

あとはフッター内ナビゲーションのマーカーとコピーライト表記を適当にスライス。

まとめ、というかスライス時のポイント

background-repeat出来そうなところを探す

一番重要。背景画像の繰り返しを使って実現出来そうな部分に関しては、大きな一枚ものとしてではなく、リピートする為の小さい画像にスライスすること^*1。その方が高さなんかの変動に対応しやすい。

borderプロパティでどうにか出来そうなところは画像にしない

CSSのborderプロパティで何とかなってしまいそうな箇所は画像に含めない。その方が色変えたりするときとかに楽。縦横のサイズの変更に関しても融通が利くしね。

テキストにする文字と画像にする文字を見極める

今回だとヘッダーのロゴ、ナビゲーションボタンのテキスト、コンテンツ部分の見出し、フッターのコピーライト表記が画像になっている。画像にすると、自分が想定している通りのフォントで表示出来る^*2ので、凝った見せ方をしたい文字についてはスライスしてしまった方がいい。逆に、フォントなんてどうでもいい部分については、そのままHTMLでマークアップしてしまって、テキストとして表示させた方が色々融通が利く。画像にするか、テキストするか、という見極めが大事。

1. もちろん、リピートする単位が大きい、ってことはありうる。
2. CSSでfont-familyを指定しても、そもそも閲覧者のPCに指定したフォントが入っていないと意味がない。CSS3だとWeb Fontsなるサーバにアップロードしたフォントを利用出来る機能があるらしいけど、ライセンスの問題とか、そもそもCSS3はまだ勧告されてないとか色々ある。