『DeMo.html CSS』の構成はこちらです。少々見にくいですが、枠線に囲まれた部分が『ブロック要素』の部分で、この配置をCSSで制御したりしてレイアウトを決定しています。（一部ブラウザ互換を施していない部分があるため、特にFirefox1.0とNetscape7.1では要素が枠線に囲まれきれていないところもあります。Internet Explorer6は大丈夫です）
複数のブロック要素が重なり合っている部分もありますが、本来の表示では問題なく表示されます。
また、こちらを印刷するか、表示しながらの方がより分かりやすいと思います。
それではソースと合わせていきましょう。
冒頭より<head></head>内は基本的に『DeMo.html 基本』と同じですが、今回はCSSを用いるので、それを記述する部分を書きます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DeMo.html CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<style type="text/css">←CSS記述部分の開始
<!--
（中略：ここがCSS記述部分）
-->
</style>←CSS記述部分の終了
</head>
サンプルのソースを見ていただければ分かると思いますが、（中略：ここがCSS記述部分）とした所に、各要素へのCSSを記述していきます。
次は、それを<body>以下のHTML部分と対応させて見ていきましょう。
HTML
<body>〜</body>
CSS
body {
margin:25px 0px 10px 25px;余白の設定
background-image:url(../img/ws.jpg);背景画像の呼び出し
background-attachment:fixed;背景画像の効果を設定
}
各プロパティで、<body>内の効果を制御しています。上から、
上：25px 右：0px 下：10px 左：25pxの余白を設定
使用する背景画像の場所を指定
スクロールしても背景画像は動かないように設定
しています。
HTML
<div id="title">〜</div>
CSS
#title {
position:relative;コンテンツの起点（左上隅の位置）を設定
top:0px;起点から縦にどれくらい上から動かす
left:0px;起点から横にどれくらい左から動かす
margin:0px;要素外側の余白の設定
width:780px;横幅の設定
height:200px;縦幅の設定
background-color:#fafae8;背景色の設定
border-bottom:solid 2px #a0aaa0;下部に枠線を表示
}
この<div id="title">は、構成を見えるようにしたページの、上の赤い枠線で囲まれた大きな部分です。（都合により、下の枠線だけ色が違います）
ここに「ようこそ!」や「リンク」、「ページの説明文」を入れて自由に配置しています。
つまり、この<div id="title">がその配置をするための基準・『親』の要素になります。
どうやって以下の各要素の配置を決めるかは後にして、先にここのCSSのプロパティを説明しましょう。上から、
次からのコンテンツの配置の起点にするために、position:relativeを指定
自身の位置はデフォルトのままのため、0px（動かさない）
自身の位置はデフォルトのままのため、0px（動かさない）
ブラウザ互換のため、外側の余白をなくす
横幅を780pxに指定
縦幅を200pxに設定
背景色に#fafae8を指定
メインとなるコンテンツ部分との区分のため、下線を作成
しています。
ここではposition:relativeと次に出てくるposition:absoluteについての知識が必要ですので、詳しくはこちらをご参考下さい。（戻ってくる時は、ブラウザの「戻る」でお願いします）
HTML
<p id="youkosobun">
ここは最も基本的なHTMLを用いたレイアウトのデモページです。<br />
特に難しいことはしていませんが、これの応用で他の全てのレイアウトも構築されるんですよ。<br />
構造さえ理解しちゃえばHTMLは単純なものですので、肩肘張らずにいきましょー。
</p>
CSS
#youkosobun {
position:absolute;コンテンツの起点（左上隅の位置）を設定
top:95px;起点から縦にどれくらい上から動かす
left:25px;起点から横にどれくらい左から動かす
text-align:left;テキストを左揃えに
width:550px;横幅の設定
height:30px;縦幅の設定
margin:0px;要素外側の余白の設定
padding:0px;要素内側の余白の設定
font-size:16px;文字サイズの指定
}
<p id="youkosobun">は、見た目一番上から始まるコンテンツではありません。ですが、ソースでは一番上にあります。HTMLで並べるともちろんこのコンテンツは一番上に表示されますが、CSSで位置を設定しているので『DeMo.html CSS』のページのように表示されます。
それを可能にしているのが、先に出たposition:relativeとposition:absoluteの組み合わせを使った配置の仕方です。詳細はこちら。
この場合、<p id="youkosobun">の配置を決める基準となる起点（コンテンツ左上隅）は、『親』とした<div id="title">〜</div>の起点に重なります。そこから、top:95pxで上から下に95px、left:25pxで左から右に25pxずつ<p id="youkosobun">自身の起点を動かして、コンテンツの位置を定めています。
この後、<div id="title">〜</div>内にposition:absoluteを用いて配置を決めているコンテンツの全ては、同様の方法で配置を決定しています。
もし『DeMo.html CSS』のソースを練習用に使っている方は、このtopとleftそれぞれの数値を色々変えて感触を掴んでみてください。
他のプロパティは、それぞれ
コンテンツの起点をrelative（親）にあわせるため、position:absoluteを指定
起点から下方に95px動かす
起点から右方に25px動かす
テキストを左揃えにする
横幅を550pxに指定
縦幅を30pxに設定
ブラウザ互換のため外側の余白をなくす
ブラウザ互換のため内側の余白をなくす
文字サイズを16pxに指定
です。
HTML
<p id="titlename">
DeMo.html
</p>
CSS
#titlename {
position:absolute;コンテンツの起点（左上隅の位置）を設定
top:2px;起点から縦にどれくらい上から動かす
left:505px;起点から横にどれくらい左から動かす
width:80px;横幅の設定
margin:0px;要素外側の余白の設定
padding:0px;要素内側の余白の設定
font-size:50px;文字サイズの指定
font-weight:bold;文字の太さを指定
background-color:#fafae8;背景色の指定
}
基本的な設定は先ほどの<p id="youkosobun">と変わりません。配置の仕方も同様に、position:absoluteを用い、topとleftの数値で設定します。
他に変わった配置のルールはありません。プロパティも出揃ってきましたので、ここからは初見のものだけを書いていきます。
font-weight:boldで文字を太字にしています。
さて、次に出てくるz-indexを説明するために、一気に三要素を記述します。
HTML
<p id="red"></p>
<p id="yellow"></p>
<p id="blue">→→→</p>
CSS
#red {
position:absolute;
top:10px;
left:10px;
margin:0px;
padding:0px;
width:400px;
height:20px;
background-color:red;
z-index:1;表示の順序を指定
}
#yellow {
position:absolute;
top:20px;
left:50px;
margin:0px;
padding:0px;
width:400px;
height:20px;
background-color:yellow;
z-index:2;表示の順序を指定
}
#blue {
position:absolute;
top:32px;
left:100px;
text-align:right;テキストを右揃えに
width:400px;
height:20px;
margin:0px;
padding:0px;
font-size:15px;
font-weight:bold;
color:#ffffff;文字色の指定
background-color:blue;
z-index:3;表示の順序を指定
}
ページの左上部、『重なり合う赤黄青の帯の装飾』を作っています。
これはそれぞれ<p>タグの縦横の幅を設定したブロック要素の背景色を変えることで作られています。この重なり合うブロック要素が表示される順番をきちんと制御するために使用するプロパティが、
z-indexです。
これは、コンテンツが重なった時の表示の順番を決定するもので、数値は1からはじめて、より大きな数値を持つコンテンツが上に表示されます。
ここでは「赤にz-index:1」・「黄にz-index:2」・「青にz-index:3」となっていますので、「赤が一番下」・「黄が中」・「青が一番上」に表示されています。
また、青の帯に入っている三つの矢印はテキスト（文字）です。それを目立つように色を変え、位置を揃えています。
初見のプロパティは、
z-index:数値で表示の順序を指定（数値順）
text-align:rightでテキストを右揃えに
color:#ffffffで文字色に#ffffff（白）を指定
になります。
HTML
<p id="youkoso">
ようこそ！
</p>
CSS
#youkoso {
position:absolute;
top:58px;
left:25px;
width:510px;
height:30px;
text-align:center;テキストを中央揃えに
margin:0px;
padding:0px;
font-size:28px;
font-weight:bold;
color:#008aff;
}
この<p id="youkoso">は少々特殊な配置方法を使っています。
position:absoluteを使用するのはこれまでと同じですが、ここではtext-align:centerでテキストを中央揃えにして、width:数値で指定する要素の横幅を調節することで文字の位置を決定しています。
つまり、『要素の横幅が変化すれば、テキストを中央にそろえるポイントも変化する』ことを利用した配置の方法ということになります。
これまで通り素直にposition:absoluteのtopとleftで位置を調節すればいいじゃないか、と思われるかもしれません。はい、その通りです。
でもまぁ、このような方法で配置することもできる一例として、ここで使ってみました。
さて、ここでの初見のプロパティは、
text-align:centerでテキストを中央揃えに
です。
次はリンクへのCSSの指定も絡めた部分です。まとめていきます。
HTML
<p id="link">
<a href="#aisatu">ご挨拶</a><br />
<a href="#prof">Profile</a<<br />
<a href="#today">今日の日記</a><br />
</p>
CSS
#link {
position:absolute;
top:100px;
left:570px;
text-align:center;
width:200px;
height:80px;
margin:0px;
padding:0px;
line-height:160%;行間幅を指定
font-size:16px;
font-weight:bold;
}
a {
color:blue;
}
a:hover {
text-decoration:none;テキストの装飾を指定
color:red
}
さて、この<p id="link">内ではCSSの三つの指定がかかっています。
まず、<p id="link">全体の指定で、コンテンツの位置や文字の大きさ、行間の幅などを指定しています。そして、リンクである<a>タグにかける指定です。
<a>タグへの指定は、上記のように行います。（他のプロパティによる指定方法はここでは使っていません）
「a」で始まるCSSは、何もしない状態でのリンクの文字色を指定しています。これで、このページ内の<a>タグは全て青色になります。
「a:hover」で始まるCSSは、リンクにカーソルが乗った状態での文字の装飾と色を指定しています。これで、このページ内の<a>タグ内の文字にカーソルを乗せたとき、その文字の下線が消え（テキストの装飾がなくなり）、色が赤くなります。
このtext-decoration:noneを「a」の方に設定すると、リンク文字に表示される下線を消すこともできます。
さて、ここでの初見のプロパティは、
line-height:160%で行間幅を標準の幅の160%に広げる
text-decoration:noneでテキストの装飾をなくす
これで、灰色の線で区切られた上部（<div id="title">〜</div>）のコンテンツの設定は終了です。
次に、灰色の線の下部、ページのメインとなるコンテンツの設定に入っていきます。
こちらでは素直にHTMLの順にコンテンツを並べて、多少CSSで制御しているだけです。
HTML
<div id="main">〜</div>
CSS
#main {
margin:0px;
width:780px;
background-color:#fafae8;
}
こんどは構成を見えるようにしたページの、灰色の線の区分の下。少々見づらいですが、青色の枠線に囲まれた部分です。ここにページのメインのコンテンツが並べられています。
こちらも上部（<div id="title">〜</div>）と同じ背景色にしたいため、CSSで同じ背景色を指定しています。marginを0にしているのは上部の設定に合わせるのためもありますが、要素外側の余白を消すことで、上部と下部の要素同士をくっつける目的もあります。
もちろん、横幅は同じ数値であわせています。
HTML
<h2 name="aisatu" id="aisatu">ご挨拶</h2>
CSS
h2 {
text-align:left;
margin:20px 10px 0px 20px;
font-size:30px;
color:maroon;
}
#aisatu {
margin:0px 10px 0px 20px;
padding-top:20px;要素の内側の上の余白を設定
}
見出しの<h>タグを使ってコンテンツの名前を表示します。h2としているのは、単に僕がh1（一番大きな見出し）に相当するのはページタイトル（DeMo.html）だと考えたからで、他に理由はありません。
さて。
タグの中に書いてあるnameとidは、先に書いたリンクのためのキーワードです。
ですが、idはもちろんCSSの指定先として使用できます。（この兼ね合いのため、idは１ページ内に１箇所の方が良いです）
まずh2タグのためCSSの設定をしています。これは以下の<h2>タグ全ての設定にもなります。
これだけでもInternet Explorerならば綺麗に表示されるのですが、Firefox1.0などでは『ご挨拶』の文字の上に20pxの透明部分（背景画像のワイルドストロベリーの実が見えてしまう部分）ができてしまうのです。これは「余白」の扱いにブラウザ間で差があるためと思われます。
そのため、ブラウザ互換のことを考えて、#aisatuでそのための補完を行っています。
透明部分が出てしまうのは上の余白部分なので、padding-topに、h2のCSSのmarginで設定した「上の余白の数値（margin:20px 10px 0px 20px）」と同じ数値を入れます。
同時に、marginの上部の余白を消して（margin:0px 10px 0px 20px）、内外の余白の合計値を他のh2とあわせておきます。
padding-top:20pxで要素の内側の上の余白を20pxに設定
HTML
<p>
DeMo.htmlにお越しいただきありがとうございます。<br />
ここは……………………………で、<br />
@+*=&'$&)[]「＠：；な〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜というサイトです。<br /><br />
そうそう。<br />
このデモページに書いてあるProfileや今日の日記はフィクションです。<br />
<em>デモページ用に適当に書いている文章</em>ですので、誤解なきようお願いします。
</p>
CSS
p {
margin:0px;
padding:5px 10px 40px 25px;
text-align:left;
line-height:140%;
font-size:17px;
}
文章を書いていきます。
ここで、そのまま<p>タグを使うとコンテンツ同士の間隔が詰まってしまうので、CSSで間隔を広げることにしました。
CSSそのものはここまで出てきたプロパティを使用していますが、このCSSが適用される要素は全ての<p>タグになります。
これまで出てきた<p>タグは、ここで指定しているプロパティを独自の設定で記述していれば影響を受けませんが、指定していなければ影響を受けることになります。
これまで出てきた<p>タグのほとんどはここに書かれたプロパティを独自で設定していますが、一つだけ、<p id="youkosobun">がまともに影響を受けているものがあります。
そう、line-heightを指定していないため、行間の幅がここの指定で変化するのです。練習用にこのソースを使っていましたら、試しに色々数値を変えてみるとそれがよく分かると思います。
また、余白の設定にpaddingを使用しているのは、こちらの方がこのページでのブラウザ互換に都合が良かったためです。
この使い分けはページの構成によってケースバイケースです。
HTML
<h2 name="prof" id="prof">Profile</h2>
<p class="prof">
生息地：北緯33度 東経66度<br />
好きなアルコール度数：25度<br />
平熱：36.9度<br />
うっとりしちゃう角度：斜め45度<br />
チャームポイント：喉<br />
好きな食べ物：アボカド<br />
持っている資格：上級シスアド<br />
口癖：まいど
</p>
CSS
.prof {
margin-top:15px;
text-align:center;
font-weight:bold;
line-height:160%;
}
<h2>タグのCSSは、先に設定したとおりです。
<p>タグも先に設定したものがありますが、レイアウトの関係上こちらは独自に設定しています。classを使用しているのは、もちろんh2でidを使用しているからです。
HTML
<h2 name="today" id="today">今日の日記</h2>
<p>
<b>11月11日（日） 晴れ</b><br />
のべつまくなし、やることもなし。<br />
空に浮かぶ雲を眺め、ぼんやりと過ぎる時間を楽しむ。<br />
そんな一日を予定していたが、近所に住む姪っ子が遊びに来たためにあえなく断念。どうやら以前、弟の家で飲んでいたときに約束した（らしい）遊園地へ連れていけとせがまれ、仕方なく連れて行くことになってしまった。<br />
弟は弟で、これ幸いとばかりに私に姪っ子を押し付け、のんびりしていると言う。<br />
そういえばあの時、酒の席で弟が姪っ子が遊園地に行きたがっているという話を私に振った気がする。確か、その流れで私が連れて行こうと約束したのではなかったか……。<br /><br />
<span id="onore">おのれ弟ぉぉ</span><br /><br />
この借りはいずれ返してやるぞ。<br />
たーのーしーみ〜ぃに、しておげぇぇぇい。
</p>
CSS
#onore {
font-size:25px;
font-weight:bold;
font-style:italic;文字のスタイルを指定
color:red;
}
いよいよ最後のコンテンツとCSS指定です。
<h2>と<p>タグはこれまでの設定がそのまま適用されます。
ですが、文中に演出をいれた文字を使用したいため、そこに<span>タグを用いた指定方法でCSSを使います。適用したい『おのれ弟ぉぉ』を<span>タグで囲み、idとそこにかかるCSSを記述します。
ここではじめて出てきたプロパティは、
font-style:italicで文字のスタイルをイタリック（斜体）
にしています。
これで、レイアウト例：『DeMo.html CSS』の記述は終わりです。
CSSは慣れるまでが大変ですが（僕も未だに不必要な記述をしちゃったり…）、慣れてしまえば非常に柔軟にレイアウトができますので、サイトデザインもしやすいと思います。
それでは、ここまでお疲れ様でした。