文書構造と見栄えの分離［A］
Web ページを作る際、文書構造は (X)HTML、見栄えは CSS、ふるまいは JavaScript や各種 CGI［C］というように、役割ごとに表現手段を切り分けておくと管理がしやすくなります。
| 項目 | CSS でレイアウト | HTML でレイアウト |
|---|
| デザインの自由度 | ○ | △ |
|---|
| 同 制御の難易度 | △ | ○ |
|---|
| メンテナンスの手間 | ○ | × |
|---|
| 分業のしやすさ | ○ | × |
|---|
CSS の役割 ［A］
CSS は Cascading Style Sheet の略で、文字の大きさや太さ、枠線の有無や種類、余白や行送り、前景色・背景色といった、Web ページの見栄えを設定するのに利用します。
×: <font size="4">....</font>
○: p（セレクタ: スタイルを適用する場所をパターンマッチングで指定します。） { font-size（プロパティ: 適用するスタイルの種類です。ここでは文字の大きさを指定する "font-size" というプロパティを使用しています。）: 1em（値: プロパティの値です。たとえばここでは "font-size" ― つまり文字の大きさの程度を具体的な数値で指定しています。）; }
文書構造と見栄えの分離を体験してみよう
まったく同じ HTML ソースに対して、違う CSS を適用するだけで、どれだけ見栄えを変化させられるんだろうか？そんな疑問にもっともよく応えてくれるのが CSS ZenGarden です。CSS の可能性を是非 体験してみてください。
- CSS ZenGarden
- css Zen Garden Shot
- CSS Table Gallery
(X)HTML の文書構造［A］
たとえば一冊の本を連想してみてください。本はいくつかの章に、章はいくつか節に、節の中もいくつかの段落や図表によって構成されています。（さらに細かく見ていくと、段落はいくつかの文に、文はいくつかの文節に、文節はいくつかの文字で構成されています。）これがオーソドックスな本の文書構造です。１つの Webサイト全体を、この場合の「本」として見立てるとすれば、さしづめ、その中の「章（Chapter）」に相当する部分が１つの Web ページになり、その下に適宜 節（や小節）や段落が入ることになります。（下図参照。）
本 > 章 > 節 > 段落 （> 文 > 文節 > 文字）
(X)HTML文書のツリー構造［A］
(X)HTML は概念的には、１つの root（「根っこ」を意味する）要素から、多数の枝葉が派生するツリー構造を構成します。
(X)HTML文書のネスト構造（入れ子構造）［A］
上記のツリー構造を (X)HTML の形式で記述する時には、(X)HTML タグが以下のようなネスト構造（入れ子構造）を形成します。
<html>
<head>ページ情報
<meta http-equiv="content-language" content="ja">
<meta http-equiv="Content-Type" content="text/html;>
<title>ページタイトル
<body>ページ本文
<h1>見出し１
<div class="global-navi">グローバル ナビゲーション
<ul>メニューリスト
<li>メニュー１
<li>メニュー２
<li>メニュー３
<div class="local-navi">ローカル ナビゲーション
<h2>見出し２
<ul>メニューリスト
<li>メニュー１
<li>メニュー２
<li>メニュー３
<div class="contents">ページ コンテンツ
<div class="section">セクション（節）
<h2>見出し２
<p>段落
<img>イメージ（画像）
<p>段落
<div class="section">セクション（節）
<h2>見出し２
<p>段落
<p>段落
