スタイルシートを適用する～ドリル式ホームページの作り方

スタイルシートを適用する

次に、IDとclassを付けて、各タグに対してスタイルを適用します。

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>ホームページ作成講座</title>
<meta name="description" content="ホームページ作成の方法を初心者さんにもわかるように、簡単に解説している講座です。" />
<meta name="keywords" content="ホームページ,作成,講座" />
<meta name="author" content="wakabagari" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
</head>
<body>
<div id="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<p class="a4">HTML講座</p>
<ul class="a3">
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p class="a4">CSS講座</p>
<ul class="a3">
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
<div id="b3">
<p id="a7">>><a href="#">HOME</a>　>><a href="#">ホームページ作成講座TOP</a></p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
<dt>2008/1/3</dt>
<dd>サーバーを移転しました。</dd>
<dt>2008/1/4</dt>
<dd>ドメインを変更しました。</dd>
</dl>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<p class="a5">
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p class="a5">
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p class="a5">
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2>Lesson2：タグを書いてみよう！</h2>
<p class="a5">
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p class="a5">
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</div>
<div id="b4">
<ul id="a6">
<li>｜ <a href="#">sitemap</a></li>
<li> ｜ <a href="#">Link1</a></li>
<li> ｜ <a href="#">Link2</a></li>
</ul>
<address>Copyright 2007@nkdesk. all right reserved.</address>
</div>
</div>
</body>
</html>

続いて、IDやclassのつけられた各タグたちに順番にスタイルを適用していきましょう。

h1のスタイル

h1はタイトル画像ですが、ユニバーサルセレクタでmargin:0になっているので、左と上に適当なmarginをとって窮屈な感じをなくしましょう。

h1 {
margin:10px 0 0 10px;
}

p.a4のスタイル

p.a4はサイドメニューの題目で、ほかの画像のカラーが黒ベースなので、黒っぽい背景をbackgroundを使用して配置します。

p.a4 { line-height:30px;
font-weight:bold;
background:url(../gif/28.gif) left center no-repeat;
color:#fff;
font-size:15px;
}

p.a5のスタイル

p.a5はコンテンツの文章で、文章の両端をwidthを指定してそろえ、適当にmarginとline-heightをとって文章の間隔を調整します。

p.a5 {
width:400px;
font-size:13px;
line-height:20px;
margin:10px 5px;
}

p#a7のスタイル

p#a7はパンくずリストの項目で、文字大きさとmarginを調整します。

p#a7 {
margin:10px 0 10px 10px;
font-size:14px;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

h2のスタイル

h2はinformationなど小見出しの題目で、背景に画像を敷いています。

h2 {
font-size:14px;
width:400px;
line-height:30px;
color:#444;
background:url(../gif/27.gif) left center no-repeat;
padding-left:15px;
}

dl,dt,ddのスタイル

dl,dt,ddのスタイルは、lesson3で学んだ方法でスタイルを適用しています。

dl {
background-color:#fff;
margin:5px 0 10px 30px;
margin-bottom:10px;
width:400px;
}
dt,dd {
font-size:13px;
line-height:20px;
}
dt {
width:80px;
}
dd {
margin-left:80px;
margin-top:-20px;
}

addressのスタイル

addressは、デフォルトの斜体をノーマルに戻して、text-align:centerで中央配置させます。

address {
text-align:center;
font-size:14px;
font-style:normal;
padding:2px 0 5px 5px;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）

ul#a6のスタイル

ul#a6は、フッターメニューの項目です。

ここでは、結構使う、リストで横並びメニューを作る方法を使っています。

今まではバグ対策だけを考えて、display:inlineを指定していましたが、今度は横並びにするのを目的として、インライン要素に変換します。

こうなると、1つ1つのリスト項目についてwidthは指定できなくなるので、余白はmarginで調整してください。

ul#a6 {
background:#222;
text-align:center;
list-style-type:none;
}
ul#a6 li {
display:inline;
line-height:20px;
margin:0 0px;
font-size:13px;
}
ul#a6 li a:link {
color:#fff;
}
ul#a6 li a:visited {
color:#fff;
}
ul#a6 li a:hover {
color:#fff;
}

ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）