1回目ではテーマのイメージをスケッチし、モックアップとなる画像を作成するところまで行いましたが、今回からはこの画像を使って組み立てていく作業に入ります。
3.画像ファイルをスライスする
2で作成した画像ファイルをお手持ちのスライスツールを使って裁断し、部品ごとに分解（個別の画像ファイルに）します。PhotoshopやFireworksにはスライスツールが搭載されていますし、こんなに高価なアプリケーションではなくとも、
などでスライスすることも可能です。
また最近のトレンドとして、CSS Spriteと呼ばれる手法を使うサイトも増えてきています。これは画像ファイルをスライスせず、一枚の画像を使ってCSSで位置をずらして表示する手法で、HTTPリクエストを減らす効果が期待できます。反面複雑なデザインを組むためにはCSSのコーディングに頭を悩ませるかもしれません。参考：Website Performance | CSS Sprite Generator
複雑なコーディングに頭を悩ませたくなかったので、今回はスライスしています。
本来なら、ここでテーマのテンプレートを書くという工程が入るのですが、今回はSandboxのテンプレートを使うので、省略しています。codexを見ながら、テンプレートタグを埋めていくのも楽しいとは思うのですが、一般的なブログに必要な要素ってだいたい決まっているので、特別変わったサイトを作るのでもなければ、既存のテーマのテンプレートを流用したほうが時間が節約できていいと思っています。
4.ターゲットブラウザの決定
CSSのコーディングに入る前に、ターゲットとするブラウザを決めておきます。デザインの視点で言うと、どのブラウザなら正常に見えるようにするのか、ということです。
基本的にはモダンブラウザと言われるFirefox 2および 3、Opera 9、Safari 2および3で正しく表示されるようにコーディング、Internet Explorer 6および7向けにいくらかハックする、という方針が一番作りやすいのではないかなと思っています。
これよりも古いブラウザをターゲットに入れれば入れるほど、CSSでハックを多用したり、複数のCSSを用意したりと、手間と工数が増大していくことを覚悟しないといけないからです。
クライアントのサイトである場合には、クライアントの意向が第一ですが、個人サイトである場合や今までに運用していたサイトである場合は、それまでのアクセス数を元にターゲットブラウザを決めてもよいと思います。
このサイトのアクセスは7割がIEで、そのうち95%がIE6とIE7です。IE7の割合はすでに2008年4月末で4割を超えている状況です。海外のサイトではすでにIE6をターゲットから外すサイトも出てきているようですが、念のためということで今回は入れてみました。
ターゲットから外したブラウザに対してはどうするかというと、CSSを読み込ませないようにします。テーマのテンプレートに書かれたXHTMLがきちんとしていれば、最低限コンテンツの内容は伝わるからです。
Sandboxテーマはstyle.cssを
<link rel="stylesheet" type="text/css" href="http://www.example.com/wordpress/wp-content/themes/sandbox/style.css" />
というコードで読み込んでおり、さらにstyle.cssの中で
@import url('sandbox-layouts/2c-l.css');
@importを使って、様々なCSSを読み込む形になります。@importの記述の仕方によっては古いブラウザにCSSを読み込ませないようにできます。上の記述だとWindowsのNN4、MacのIE4と5、NN4はCSSを読み込めません。（参考：Complex @import rules）
次回はいよいよSandboxをCSSでデザインしていきます。ということでもうしばらくCSSのお話が続きます。