ハイブリッドデザインとは−HTML&CSSガイド−

HTML&CSSガイド

ハイブリッドデザインとは、基本的なレイアウト(骨組み)だけテーブルを使い、残りはCSSで作るという方法です。ハイブリッドデザインは、Web サイトの標準化を提唱する「Web Standard Project」のチームリーダーであるJeffery Zeldman氏がその著書の中で紹介したテクニックです。
参考:The Web Standards Project URL http://www.webstandards.org/
参考: Jeffery Zeldman氏サイト URL http://www.zeldman.com/

この方法は、テーブルデザインとCSSデザインの間に位置するテクニックです。レイアウトの崩れをテーブルを使って最小限に抑えながら、サイトの見た目はCSSで制御するので、いずれ完全なCSSサイトへ移行するための準備段階として有効です。

ハイブリッドデザインのメリット!

wハイブリッドデザイン+CSSの活用ホームページデザインをハイブリッドデザインにした場合、サイトの管理の効率化やファイルサイズのシェイプアップに非常に役立ちます。

  • 無駄なHTMLタグをクリーンアップできる
  • 初めてCSSを使用する方の入門に最適!

無駄なHTMLタグをクリーンアップできる

基本的なレイアウト(骨組み)テーブルのタグは使用しますが、それ以外のデザイン部分の表示方法にCSSを使いはじめることにより、無駄なタグを大幅に減らすことができます。また、無駄なタグと同時に、情報の構造を考慮したHTMLが組みやすくなります。

初めてCSSを使用する方の入門に最適!

CSSをデザインに使用する場合、最初は難しく感じる方も多いでしょう。これからCSSを使いたいという方には、CSSの実践を通して覚えられるハイブリッドデザインが最適です。ページの構造にCSSを付け足すというやり方なので、無理なくCSSを学ぶことができます。 ハイブリッドデザインを通して、コンテンツとデザインを分けて管理する方法を学ぶことができるでしょう。

ハイブリッドデザインでのホームページ作成例

実際に当教室で受講頂いた方が作成されたホームページをご紹介します。

ハイブリッドデザイン作成例小柳華道茶道教室/新潟県加茂市−新潟/お茶とお花の教室

ホームページ作成用に使用したHTML編集ソフトはフリーソフトを使っています。ホームページ作成の為に新たに用意したものは、デジカメ、画像編集ソフトを新規で購入されています。ホームページ作成は今回が初めてのため、ハイブリッドデザインで作成されています。

ホームページを作成してまもないページですが、無駄なHTMLタグをクリーンアップして検索エンジンにもヒットしています。

Google、Yahooの両検索エンジンで2007/03/1現在、"新潟 茶道教室"、"新潟 華道教室"、"茶道教室 新潟"、"華道教室 新潟"、ともに1番目に表示。
(検索エンジンの順位は随時変動いたします。上記は2007/03/1現在の検索結果)

ウェブササドットコムはホームページ作成を応援!

ウェブササドットコムは、お客様の「ホームページを自分で作る」を応援しています! ホームページ作成支援サポートを受けながら、安心してホームページ作成を進めることができます。

魅力がたくさんあるCSSですが、実際にホームページに活用する為には、クリアしなければならない問題もあります。ウェブササドットコムはそんな時、お客様の相談役となりホームページ作成をサポートいたします。お気軽にご相談ください。

ウェブササドットコムはホームページにCSSを有効活用

ウェブササドットコムはホームページ制作にCSSを有効活用することにより、HTML構造からデザインを切り離しCSSの持つ魅力をお客様のサイト制作に活かします。

このページの先頭へ