テーブルを使用しないレイアウトは、提唱され始めてから長い年月が経ち、ようやく注目を集めるトピックになってきました。長年にわたり、テーブルを使用したレイアウトを好んできた業界のデザイナーやデベロッパーたちの間にも、Web標準とそれに関連するデザイン原則が定着してきました。

新しい技術が次々と登場する中で、Web訪問者の注目スパンは段々と短くなり、よりスピーディーなWebの動作が求められるようになってきました。Webページのロードに時間がかかると、Webサーファーは次の波に乗って他のサイトへと去っていきます。このことを、ほとんどのデザイナーが十分に認識しています。しかし多くの人は、ロードが速いページを作るには、見栄えのしない素っ気ないページにするしかないと思いこんでいるのではないでしょうか。これは間違った思いこみです。カスケーディングスタイルシート（CSS）を使えば、速くて見栄えがいいという両方の美味しい部分だけを取り入れることができます。ロードが速くてしかも見栄えのよいページは、HTMLとCSS、そして（たまに）JavaScriptを少し使うだけで簡単に実現できるのです。

この記事の目的は、CSSがテーブルよりも優れた配置方法であると説くことでも、CSSのすべての利点を解説することでも、またCSSのベストプラクティス*について説明することでもありません。テーブルを使用しないレイアウトは、CSSによるスタイル指定に不可欠な条件ではないのです。多くの人にとって、CSSによるスタイル指定技法を学ぶことは、その後にCSSによる配置技法を試してみるためのきっかけとなります。

メモ：CSSの詳細については、Dreamweaverデベロッパーセンターの「Learn to work with CSS（CSSの使用法を学ぶ）*」を参照してください。

この記事の目的は、皆さんに最初の一歩を踏み出していただくこと、すなわち、コンテンツをプレゼンテーションから分離することがどれほど簡単かを実感していただくことにあります。ここでは、CSSを使って背景色、ボーダー、フォントスタイルを指定することにより、ページのロード時間とファイルサイズを大幅に削減する方法について説明します。この方法により、Webページで使用するイメージを最小限に抑えることができます。ここでサンプル的に作成するページはあまり見栄えのことは考えていません。ちょっと笑えてしまうかもしれません。しかし、ここで学んだ技法は、見栄えのいい独自のページを作成する際にきっと役立ちます。

必要条件

この記事を効率良くフォローするには、次のソフトウェアやファイルが必要です。

Dreamweaver CS4

• 体験版
• 購入

サンプルファイル：

• simple_styling_sample.zip*（ZIP、44K）

この記事に必要な予備知識

HTMLとCSSの概念に関する基礎知識が必要です。

この記事は、Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported Licenseのもと提供しています。

ページ 1 / 9

次のページ

著者について