第1回　CSSとはテーブルレイアウトを卒業しよう

CSSとは

CSSとは、Cascading Style Sheet（カスケーディングスタイルシート）の略称で、(X)HTML文書やXML文書の装飾（デザイン）を指定できる規格のひとつです。

CSSの使い方を実用サンプルで学ぶ: XHTMLとCSSの基礎から学び、Web標準のホームページを作成。正しいマークアップや効率的な運用方法も。; XHTML & CSS 実践講座

(X)HTMLは「要素（タグ）を使用して文書に対して意味を持たせる（マークアップする）」ことを目的とした技術です。

いわゆるテーブルレイアウト（table）のような、要素を使ってのデザインやページレイアウトは、本来の(X)HTMLの目的から考えると誤った使用方法であるともいえます。

そのため、現在ではCSSを使い、フォントや文字の大きさ、色、文字飾り、行間、背景などの視覚的な表現と、文書の内容とを切り離すことが推奨されています。

上図のように、文書の意味とデザインの指定を切り分けることで、(X)HTMLの構成がシンプルになります。それにより、製作者側は全体の工数を削減することができます。

Web標準化とは

Webサイトは多くの人がそれぞれ異なるいろいろな環境からアクセスする可能性があります。アクセシビリティを考慮し、誰もが平等に情報を得ることができるWebサイト、つまり標準的な規格に則ったサイトにするためには、W3Cが定めた(X)HTMLを、本来の用途のとおりに使用することが重要です。

これが、情報のバリアフリー化、つまり「Web標準化」のもっとも基本的な考え方です。

また、ソースコードのファイルサイズが軽減され、ユーザーにとっても閲覧しやすくなります。

そのほかにも(X)HTMLとCSSを正しく使うことSEOやアクセシビリティの面で多くのメリットを得ることができます。

W3Cとは: W3C：World Wide Web Consortiumとは、XML、(X)HTML、CSSなどのWeb上で使用されるさまざまな技術の標準規格を定め、勧告を行っている非営利の標準化団体です。; World Wide Web Consortium

(X)HTML+CSSでWebサイトを制作するためにDreamweaverなどのWebサイト構築ツールが必須かというと、そうではありません。

極端な話では、WindowsやMacintoshに標準で付属している、テキストエディタさえあればWebサイトは作れます。

次回は、CSSをDreamweaverで書くメリットについてご説明します。（こう）

関連リンク

鈴木航（すずきこう）

m-School インストラクター

エスエイティーティー入社後、コンテンツ企画開発を経て、m-Schoolのインストラクターとして活躍中。

担当講座はFlash、Dreamweaver、Microsoft Silverlightなど多岐にわたる。トレーニングコースの企画・開発にも携わる。かぼちゃの煮物が嫌い。