div内に文章を記述する
ドリル式ホームページの作り方TOP >> Lesson8〜floatを使ったレイアウト〜 >> div内に文章を記述する
先ほどdivとfloatを使って作った骨格内に、文章を入れます。
div#b1内に入れるタイトル部分には、h1タグでくくったタイトル画像を入れます。
<?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="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">サイドメニュー</div>
<div id="b3">コンテンツ</div>
<div id="b4">フッター</div>
</div>
</body>
</html>
サイドメニューをp要素とul要素を使用して作ります。
<?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="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
<div id="b3">コンテンツ</div>
<div id="b4">フッター</div>
</div>
</body>
</html>
サイドメニューをp要素とul要素を使用して作ります。
<?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="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
</div>
<div id="b3">
<p>>><a href="#">HOME</a> >><a href="#">ホームページ作成講座TOP</a></p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
<dt>2008/1/3</dt>
<dd>サーバーを移転しました。</dd>
<dt>2008/1/4</dt>
<dd>ドメインを変更しました。</dd>
</dl>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2>Lesson2：タグを書いてみよう！</h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</div>
<div id="b4">フッター</div>
</div>
</body>
</html>
フッター部分に、フッターメニューと著作権情報を記述します。
<?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="b1234">
<div id="b1">
<h1><img src="gif/24.gif" alt="ホームページ作成講座" /></h1>
</div>
<p id="a2"><img src="gif/25.gif" alt="境界画像" /></p>
<div id="b2">
<p>HTML講座</p>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">Lesson1</a></li>
<li><a href="#">Lesson2</a></li>
<li><a href="#">Lesson3</a></li>
</ul>
<p>CSS講座</p>
<ul>
<li><a href="#">Lesson4</a></li>
<li><a href="#">Lesson5</a></li>
</ul>
</div>
<div id="b3">
<p>>><a href="#">HOME</a> >><a href="#">ホームページ作成講座TOP</a></p>
<h2>INFORMATION</h2>
<dl>
<dt>2008/1/1</dt>
<dd>ホームページ作成講座を開設しました。</dd>
<dt>2008/1/2</dt>
<dd>ホームページ作成講座を閉鎖しました。</dd>
<dt>2008/1/3</dt>
<dd>サーバーを移転しました。</dd>
<dt>2008/1/4</dt>
<dd>ドメインを変更しました。</dd>
</dl>
<h2>Lesson1：メモ帳を起動してみよう！</h2>
<p>
ホームページを作成するためにはエディタと呼ばれるアプリを起動して、そこにプログラムを記述します。
</p>
<p>
Windowsをお使いの方は標準で付属しているエディタとして、メモ帳とwordpadがありますので、それを使うとよいでしょう。
</p>
<p>
さらに高性能のエディタをお求めの方は、無料ならterapad、有料なら秀丸エディタがお勧めです。
</p>
<h2>Lesson2：タグを書いてみよう！</h2>
<p>
ホームページを作るのに使用する言語はHTMLと呼ばれ、タグと呼ばれる命令を使って、色やフォントの大きさを指定することができます。
</p>
<p>
ホームページ作成に使われるタグは文字の装飾だけに限らず、背景や画像、ページの骨格を指定するものもあります。
</p>
</div>
<div id="b4">
<ul>
<li>｜ <a href="#">sitemap</a></li>
<li> ｜ <a href="#">Link1</a></li>
<li> ｜ <a href="#">Link2</a></li>
</ul>
<address>Copyright 2007@nkdesk. all right reserved.</address>
</div>
</div>
</body>
</html>
｜（たてぼう）の右と左の半角スペースは、”(&)＋(nbsp;)”で表します。
ここまでの作成経過はコチラ→サンプル（ホームページ作成講座）
各ボックスをわかりやすくするため、サンプルでは黒色の枠線を付けております。