CSSデザインの基礎知識

HTMLとの関係
Web Liberty のHTMLコーディング

HTMLとの関係

『HTML→文章構造』『スタイルシート→レイアウト・デザイン』に分離することで、HTMLファイルのメンテナンス性が向上したり、環境によって表示が大きく異なることを防いだり…。というメリットがあります。

ですがそれには、文章構造を意識したHTMLを記述する必要があります。例えば

見出し文字は <h1> や <h2> などでマークアップする。
段落は <p> でマークアップする。
箇条書きは <ul>（<ol>）と <li> でマークアップする。

といったことを行います。具体的な例で説明すると、文章構造を意識せずにHTMLを記述した場合は以下のようになります。

<html>
<head>
<title>文章構造サンプル</title>
<body>
<font size="6">文章構造サンプル</font><br>
<br>
文章構造が明確なHTMLを記述するには、以下のようなことを行います。<br>
<br>
・ 見出し文字は <font color="#008000">&lt;h1&gt;</font> や <font color="#008000">&lt;h2&gt;</font> などでマークアップする。<br>
・ 段落は <font color="#008000">&lt;p&gt;</font> でマークアップする。<br>
・ 箇条書きは <font color="#008000">&lt;ul&gt;</font>（<font color="#008000">&lt;ol&gt;</font>）と <font color="#008000">&lt;li&gt;</font> でマークアップする。<br>
</body>
</html>

タイトル文字を大きくして、箇条書きの前に『・』の記号をつけて…と、それらしくはなっていますが、文章構造は考えられていません。

これを文章構造を意識したHTMLに書き換えると、以下のようになります。

<html>
<head>
<title>文章構造サンプル</title>
<body>
<h1>文章構造サンプル</h1>
<p>文章構造が明確なHTMLを記述するには、以下のようなことを行います。</p>
<ul>
    <li>見出し文字は <code>&lt;h1&gt;</code> や <code>&lt;h2&gt;</code> などでマークアップする。</li>
    <li>段落は <code>&lt;p&gt;</code> でマークアップする。</li>
    <li>箇条書きは <code>&lt;ul&gt;</code>（<code>&lt;ol&gt;</code>）と <code>&lt;li&gt;</code> でマークアップする。</li>
</ul>
</body>
</html>

<h1> は見出しをあらわすHTML、<p> は段落をあらわすHTML、<ul> と <li> は箇条書きをあらわすHTMLです。こうすることによって、どこが見出しなのか、どこが段落なのか等を明確にすることができます。

ちなみに、どんなページを作るときも必ず文章構造を明確にしたHTMLをかかなければならない…という訳ではありません。今なお『テーブルタグでレイアウトしてスペーサーGIFでマージンを調整…』という方法は利用されています。（減少しつつありますが。）
テーブルレイアウト＋スペーサーGIFには『古いブラウザでも意図したとおりのデザインを行うことができる』というメリットがあるので（もちろん慣れは必要。）、その時々でサイトの目的に沿ったコーディングを行えばいいと思います。

ですが全面的にCSSでデザインをするとなると、文章構造を明確にしたHTMLでなければ非常にデザインがやりにくいです。

文章構造が明確なHTMLならば「CSSで箇条書きのデザインを指定したい」とき、ul li に対して行えばいいのですが、文章構造が明確でないHTMLの場合、どこが箇条書きなのかをCSSが知ることができません。

もちろん、<span class="kajougaki"> などを追加してコーディングすることは可能ですが、HTMLがどんどん複雑になっていきます。

CSSでデザインをする場合は上のような事を意識してHTMLコーディングを行いましょう。

Web Liberty のHTMLコーディング

Web Liberty で配布しているCGIのHTMLについて解説します。なお、これは「Web Liberty ではこのようにコーディングしています。」というだけで「CSSを使用する場合は絶対にこの通り書かなくてはならない。」という訳ではありません。

ここでは Web Board Professional を例に挙げて解説します。Web Board Professional の初期画面は、大まかに分けると以下のように <div id="～"> で分類されています。

<?xml version="1.0" encoding="utf-8"?>
<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title>Guest Book</title>
    <link rel="stylesheet" href="./skin/common.css" type="text/css" media="all" />
</head>

<body>
<div id="container">
    <div id="header">
        ヘッダー
    </div>
    <div id="menu">
        メニュー
    </div>
    <div id="form">
        入力フォーム
    </div>
    <div id="article">
        ログ一覧
    </div>
    <div id="page">
        ページ移動リンク
    </div>
    <div id="navi">
        ページ直接移動リンク
    </div>
    <div id="footer">
        フッター
    </div>
</div>
</body>

</html>

ページ全体を <div id="container"> で囲い、さらに、各パーツをヘッダーならば <div id="header">、メニューならば <div id="menu"> というようにそれぞれ分類しています。ですから、例えば

「入力フォームにある段落部分にスタイルを指定したい」場合、div#form p { ～ } と指定します。
「ログ一覧にある段落部分にスタイルを指定したい」場合、div#article p { ～ } と指定します。
「HTML文章中にあるすべての段落部分にスタイルを指定した」場合、p { ～ } と指定します。

具体的な例で挙げると、タイトル文字のスタイルを指定する場合、ヘッダー部分のHTMLは

<div id="header">
    <h1>Guest Book</h1>
</div>

このようになっているので、CSSは以下のようになります。

div#header h1 {
    text-align: center;
    font-size: 15px;
}

この場合、「<div id="header"> ～ </div> に囲まれた <h1> を中央ぞろえにし、文字サイズを15pxにする。」という意味です。（<h1> は一つのHTML文章中に一つしかないので、div#header は無くても大丈夫ですが、ヘッダー部分以外にかかれる事が無いと分かっている場合には指定しておくといいでしょう。）

Web Liberty

サイト内検索

目次