初心者の館

ステップ0〜はじめに〜

今回紹介するデザイン手法は「逆ハイブリッドデザイン」といいます。
言いますとゆうか、私が知る限りではどこにも紹介されていなかったので、勝手に名付けました。 使い勝手は最高ですよ!みんなで広めましょう。


もう一つのハイブリッドデザイン

LV2で紹介したハイブリッドデザインは大枠をテーブルで組んで、細かいところはスタイルシートでデザインするという手法でした。 この手法を紹介していたのが、スタイルシート スタイルブック の著者である長谷川さんというWEBデザイナーの方です。 この本は私がCSSにはまるきっかけを与えてくれたバイブルのようなものです。

その本を読んで以来スタイルシートをまじめに勉強して、デザイン手法もハイブリッドデザイン→CSSデザインへと変えていきました。
で、このサイトを作りCSSデザインを広めようと企んでいたりしたのです・・・。

が、LV3の原稿を書いていてふと思ったのです。「なぜ、こんなメンドクサイ方法を紹介しているのだ?」と。 ステップ5を見た方なら分かると思いますが、かなり無茶しています。ページにすればたったの3ページですが、 あのレイアウトを実現するのに3時間以上スタイルシートと格闘していました。

「テーブル使えば一発じゃん!」と思ったのは全ての原稿を書き上げた後でした。
しかし、このとき逆ハイブリッドデザインのアイディアは誕生しました。

大枠と装飾はスタイルシートで行い、細かいレイアウトはテーブルで配置する。
これが逆ハイブリッドデザインの考え方です。

ぶっちゃけた話、大枠を組むのはCSSデザインでやったほうがテーブルより楽ですし、ステキなメリットがあります。 CSSデザインの最大の難関であるfloatをテーブルで行うことにより、労力を大幅に削減できます。 自分で言うのもなんですが、この方法スゴクイイです。

なぜこの手法が今まで紹介されなかったのか、不思議でなりません。それに関するちょっとした考察と、 逆ハイブリッドデザインのステキなメリットはあとがきで紹介することにしましょう。

今回の完成形

今回の完成形はこんな感じになります

今回の完成形

LV3と同じものを使っています。
なので実習もLV3のステップ5から始めます。最初からここに来た人はLV3をちょっと見てくるといいでしょう。


次のステップへGO→


一覧へ戻る


Last Modified 2005-02-21 © きくちゃん 2004 - All Rights Reserved