他のタグのスタイルを指定する
ドリル式ホームページの作り方TOP >> Lesson7〜positionを使ったレイアウト〜 >> 他のタグのスタイルを指定する
次に、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#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#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で弧上に配置します。
ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）
未訪問リンクの色、訪問済みリンクの色、マウスを当てたときのリンクの色の指定と、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;
}
ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）