他のタグのスタイルを指定する

次に、div要素以外のタグに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="a123">
<div id="a1">
<h1><a href="index.html"><img src="gif/4.gif" alt="ホームページ作成講座" /></a></h1>
<p id="b1">>>　<a href="#">ホームページ作成講座TOP</a></p>
</div>
<div id="a2">
<p id="b2"><img src="gif/5.gif" alt="画像" /></p>
<p id="b3"><img src="gif/22.gif" alt="画像" /></p>
<ul id="b4">
<li class="c1"><a href="#">Lesson1</a></li>
<li class="c2"><a href="#">Lesson2</a></li>
<li class="c3"><a href="#">Lesson3</a></li>
<li class="c3"><a href="#">Lesson4</a></li>
<li class="c2"><a href="#">Lesson5</a></li>
<li class="c1"><a href="#">Lesson6</a></li>
</ul>
</div>
<div id="a3">
<address>Copyright 2007@nkdesk. all right reserved.</address>
</div>
</div>
</body>
</html>

p要素の指定

はじめに”p”のスタイルを指定します。

p#b1 {
	margin-left:20px;
	font-size:13px;
	}
p#b3 {
	position:absolute;
	top:16px;
	left:270px;
	}

pにはb1,b2,b3という3つのIDを指定していると思いますが、b2は特に設定する必要がないので、スタイルは指定しません。

b3は、b2の右側に配置したいので、あらかじめ設定しておいたdiv#a2の左上を基点として、絶対配置します。

リスト要素（ul,li）の指定

続いてリスト要素（ul,li）のスタイルを追加します。

ul#b4 {
	position:absolute;
	top:24px;
	left:270px;
	line-height:28px;
	list-style-type:none;
	margin-left:30px;
	font-size:14px;
	color:#555;
	}
ul#b4 li {
	display:inline;
	}
ul#b4 li a {
	display:block;
	padding-left:26px;
	background:url(../gif/23.gif) left 7px no-repeat;
	}
ul#b4 li.c1 a {
	font-weight:bold;
	}
ul#b4 li.c2 a {
	font-weight:bold;
	margin-left:8px;
	}
ul#b4 li.c3 a {
	font-weight:bold;
	margin-left:14px;
	}

display:inlineとblock、リストマークのbackground指定は、lesson6でやったことを思い出してくださいね。

リストもp#b2やp#b3の右側に移動させたいので、div#a2の左上を基点に絶対配置します。

各リスト項目（li）について、弧を描くように並べたいので、1行1行にクラスを指定し、margin-leftで弧上に配置します。

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

a要素とaddressの指定

未訪問リンクの色、訪問済みリンクの色、マウスを当てたときのリンクの色の指定と、addressにスタイルを適用します。

a:link {
	color:#66f;
	}
a:visited {
	color:#66f;
	}
a:hover {
	color:#005;
	}
address {
	font-style:normal;
	font-size:13px;
	padding:2px 0 5px 5px;
	border-top:double 3px #99d;
	}

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

Lesson7～positionを使ったレイアウト～

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>