無料ブログ JUGEM(ジュゲム) - デザインで選ぶブログ(blog)サービス・簡単作成・モバイルテンプレート編集・モブログ・携帯対応！

はじめに

【cssが無い場合】

【mid west】

前回までCSSの基本的な記述方法を踏まえてレイアウトの組み方も少し紹介しましたが、今回からは実際にテンプレートを作って行きながらCSSの特性を幾つか紹介していきたいと思います。
スクリーンショットは筆者が今講座のために用意したオリジナルテンプレート『mid west』です。CSSの力を存分に発揮したいので今回はコンテンツ内にある画像以外がすべてCSS内で管理出来るくらいに作り込んで行こうと思います。
みなさんにもぜひテンプレートデザインに挑戦してもらいたいので、CSSの説明と同軸にどのようにこのデザインを作って行ったかというデザインプロセスと、画像の用意の仕方なども説明していきたいと思います。

テーマを決めてスケッチアウト

【ラフスケッチ】

まず、デザインのテーマを考えなくてはいけません。コンピューターの前に座っていてもいきなり良いものが出てくるとは限らないのでとりあえずコンピュータから離れてじっくりいろいろ考えてみると良いでしょう。『mid west』のテーマは『なんとなく西洋にあったかもしれない新聞スタイル』。Blogは日記も含めて時事的要素が多いですよね。そういった意味では新聞と重なるところが多いような気がします。当初は和のテイストを前面に押し出そうと思いましたが、そういったテーマは既に幾つか存在するので、この際コテコテといっていいほど西洋っぽい雰囲気を出そうと決断。アメリカの３０年代〜４０年代の新聞のレイアウトをイメージして考えて行くとしました。

コンピュータに座り込んで作業する前にまずはノートを開いてスケッチしてだいたいの構想を固めてみました。この段階では詳しくデザインを固めて行く必要はないので、だいたいの雰囲気が形になっていたら良いと思います。「こんなの出来るのか！？」みたいなことはあまり深く考えないで自由に考えて行くのがオススメ。技術的なことはスタイルシート関連のサイトや他のブロガー達に聞いたりするなど助け舟はたくさんあるのであまり心配しなくて良いでしょう。（そこで新しいコミュニケーションも生まれるわけですしね）

【コンピュータ上での作業】

そしてついにコンピュータ上での作業になります。それぞれ使い慣れたソフトを使って制作すると良いと思います。ちなみに僕はIllustratorでレイアウトを組んで、最終的な仕上げとレイアウトの画像の書き出しをPhotoshopで行っています。この段階でディテールを詰めて行きます。タイトルをどのように表示させるか、Blockquoteの見た目などこの段階で検討していきます。最終的にはCSSで細かく数字を振り分けて行かなければならないところが多いですが、目安という意味でもこの段階で完成品レベルまでもっていくと良いでしょう。

基本的なレイアウトを組む準備

【レイアウトの枠組み】

【top用、middle用、bottom用画像】

それでは早速レイアウトを組んで行きたいわけですが、まずはどういうレイアウトの枠組みを作って行くのかを検討して画像を用意しなくてはいけません。今回のテンプレートデザインではまず大きく分けて図のような３つのエリアに分けることが出来ます。装飾部分にあたるグラフィックが入る上、下部分とコンテンツが入る中間部です。それぞれのエリアにあわせて先に作ったデザインテンプレートから画像を書き出して行きます。中間部は背景画像を利用しますし、CSSでリピートするように定義してあげれば良いので細長い画像でOKです。こうすることでファイルサイズも小さくなりページを表示させるスピードも早くなるわけです。スタイルシートも上から順に『#top』『#middle』『#bottom』と名前を付けて行きます。

今回はレイアウトの画像もCSSで管理したいので、上下部分の装飾画像も背景として扱います。上下部分の背景プロパティはあたかもひとつの画像として表現したいので「no-repeat」にし、コンテンツ部分にあたる『#middle』では画像を縦軸にリピートしたいので「repeat-y」にしておきます。縦横の数値も画像にあわせて設定しておきます。数値をきちんと定義しておかないと途中で画像が切れてしまう場合もあるので注意しましょう。またmarginのような余白を設定すると各部分のつなぎ目に余白が出来てしまうのでなるべくmarginは設定しないにしておくと良いでしょう。

ハックに挑戦

【margin、paddingの無い場合】

基本的なレイアウトを組んで文字を流し込むとレイアウトの境界線と文章が重なってしまいます。こういった場合、「margin」や「padding」といった余白を空けるCSSプロパティを使います。読みやすさやレイアウトの美しさは余白で決まるといって良いほど重要なので、この２つのプロパティはCSSレイアウトをするにあたってとても重要です。「margin」プロパティは解釈が非常に曖昧な部分が多いので（参考資料）今回のようにピクセル単位でカッチリ組みたいときは避けた方が無難です。というわけで「padding」を使って余白を空けたいわけですが、実はこの「padding」にも少々問題があります。

【ブラウザ毎の解釈の違い】

図はそれぞれのプロパティがどのような解釈で数値を読み取っているかを表したものです。Windows版IE6, Mac版IE5, Safari, Mozilla, Operaといった『モダンブラウザ』ではコンテンツが入る「width」と枠線とコンテンツの間に余白をつくる「padding」はまったく別数値です。

しかし、Windows版IE5/IE5.5に関しては「padding」の数値を「width」の数値の一部として解釈しているのです。例えば今回のテンプレートデザインのレイアウト全体の横幅は780pxで、その両脇に20pxの余白を作っています。これをモダンブラウザ仕様とWindows版IE5/IE5.5仕様を別々に記述すると以下のようになります。

【モダンブラウザ用のcssをIE5.5で見た場合】

(画像を大きいサイズで見る)

このように「width」の解釈が違うので今回の場合40pxの誤差が生じます。スクリーンショットはモダンブラウザのCSSの解釈でIE5.5で見た場合ですが、右側に大きな余白が出来てしまいます。このデザインでは誤差によってレイアウトが崩れるということにはなりませんでしたが、レイアウトの組み方によってそういった問題も生じる可能性も十分にあります。また、可能な限りモダンブラウザと一緒のように表現したいのであれば今のままでは不十分です。そこでハックの登場となります。

【ハックテクニックを使った場合】

これはTantek Celikが編み出した回避方法で、多くのサイトがこのハックを利用しています。まず最初の「width」でWindows版IE5/IE5.5仕様の値を入力します。その次に「voice-family: "\"}\""; 」「voice-family:inherit;」と続きますがここがいわゆるハックの部分にあたります。この部分でWindows版IE5/IE5.5はこのIDのCSSの読み込みを終了します。しかし、この後もモダンブラウザは読み込みが可能なのでその下にある「width」で正しい値を書き込みモダンブラウザが再度プロパティを読み込むようにしているわけです。とは言うもの、この方法はモダンブラウザのひとつと言われるOperaまで読み込み中止をしてしまうので、『html>body #middle』という記述方法で再度正しい値を書き込んでいます。Tantek氏が編み出したこの方法はかれこれ３年ほど出回っているので信頼性は高いですが、どうしてもコードが長くなってしまうのが難点といったところでしょうか。今回のようは値の読み分けをさせるようなハックは他にもあるので、ネットでいろいろ探してみると良いかもしれません。

とは言うものの、CSSをハックで固めてしまうのもあまり良いことでもないので「私はWindows版IE5/IE5.5は少々崩れても仕方ないと思う」と考えている方は普通の記述方法で行くと良いでしょう。

CSSマスターまでもう少し

今回はハックというやや上級者向けのテクニックを紹介しましたが、レイアウトが崩れてしまうという問題はこういったブラウザの解釈の違いからなるケースが多いです。もちろん、他にも崩れる問題というのはあるのですが、今回の「width」「border」「padding」「margin」といったプロパティがどういった関係で成り立っているのか理解するだけでも随分状況は変わるのではないかと思います。レイアウトが崩れたときはとりあえず数値を小さくしてみたり、実験を繰り返してみると良いと思います。最初は難しいかもしれませんが、慣れてくるとテーブルデザインなんてやってられなくなるかも！？