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

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

ドリル式ホームページの作り方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”のスタイルを指定します。

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を使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. divタグを理解する
  3. div骨格にコンテンツを挿入する
  4. 絶対配置と相対配置
  5. divのスタイルを指定する
  6. 他のタグのスタイルを指定する
  7. スクロールボックスを設置する

CGIの設置

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

ホームページの公開

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