ドリル式ホームページの作り方

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

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  スタイルシートを適用する

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

次に、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;
}

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


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

  1. 掲示板を設置する
  2. カウンターを設置する
  3. アクセス解析を導入する
  4. アクセスランキングを設置する

ホームページの公開

  1. ドメインを取る
  2. サーバーを選ぶ
  3. ファイルをアップロード(公開)
Copyright(C) ドリル式ホームページの作り方 all right reserved.