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

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

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

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

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

  1. XHTMLの骨格を記述する
  2. tableタグを覚える
  3. table内に文章を記述する
  4. スタイルシートを適用する
  5. vertical-alignというもの
  6. ブロックレベル要素とインライン要素
  7. リスト(ul)を扱う上での注意点

CGIの設置

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

ホームページの公開

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