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

xhtmlの方に、IDとclassを追加してからスタイルシートを適用していきます。下記のソースの赤文字を参考に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>
<table border="0" cellspacing="0" width="550">
<tr>
<td colspan="2">
<h1><a href="index.html"><img src="gif/13.gif" alt="ホームページ作成講座" /></a></h1>
<p class="a4"><a href="index.html">ホーム</a><a href="#">ホームページ作成講座TOP</a></p>
</td>
</tr>
<tr>
<td>
<p class="a3"><img src="gif/20.gif" alt="" /></p>
<ul>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
<li><a href="#">Lesson4</a></li>
</ul>
<p class="a3"><img src="gif/19.gif" alt="" /></p>
</td>
<td id="b1">
<h2><img src="gif/14.gif" alt="" /></h2>
<table border="0" cellspacing="0" cellpadding="0" class="a1">
<tr>
<td>2008/1/1</td>
<td>ホームページ作成講座を開設しました。</td>
</tr>
<tr>
<td>2008/1/2</td>
<td>ホームページ作成講座を閉鎖しました。</td>
</tr>
</table>
<h2><img src="gif/15.gif" alt="" /></h2>
<p class="a2">
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p class="a2">
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p class="a2">
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2><img src="gif/16.gif" alt="" /></h2>
<p class="a2">
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p class="a2">
<img src="jpg/1.jpg" alt="メモ帳に記述" />
</p>
<p class="a2">
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</td>
</tr>
<tr>
<td colspan="2">
<address>Copyright 2007@nkdesk. all right reserved.</address>
</td>
</tr>
</table>
</body>
</html>

特に解説の必要のない下記タグをstyle.cssの*、imgに続いて記述します。コピッて貼り付けてもらっても結構です。

h1,h2,p,ul,address {
	margin:10px 0 0 10px;
	}
table.a1,p.a2 {
	margin:10px 0 0 30px;
	font-size:13px;
	color:#888;
	}
table.a1 {
	line-height:20px;
	}
p.a3 {
	margin-left:10px;
	}
p.a4 {
	margin-left:30px;
	}
p.a4 a {
	font-size:13px;
	background:url(../gif/21.gif) left center no-repeat;
	padding:0 20px;
	}
td#b1 {
	background:url(../gif/17.gif) left top no-repeat;
	padding-left:10px;
	}
a {
	text-decoration:none;
	}
a:link {
	color:#888;
	}
a:visited {
	color:#888;
	}
a:hover {
	color:#500;
	text-decoration:underline;
	}
address {
	font-style:normal;
	padding:2px 0 5px 5px;
	border-top:double 3px #944;
	}

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

Lesson6～tableを使ったレイアウト～

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

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