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

div骨格にコンテンツを挿入する

ドリル式ホームページの作り方TOP  >>  Lesson7〜positionを使ったレイアウト〜  >>  div骨格にコンテンツを挿入する

div骨格にコンテンツを挿入する

divで作った骨格の中に、各コンテンツを挿入します。

サンプルで使う画像はコチラ→画像ダウンロード

<?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>>> <a href="#">ホームページ作成講座TOP</a></p>
</div>
<div id="a2">
<p><img src="gif/5.gif" alt="画像" /></p>
<p><img src="gif/22.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>
<li><a href="#">Lesson5</a></li>
<li><a href="#">Lesson6</a></li>
</ul>
</div>
<div id="a3">
<address>Copyright 2007@nkdesk. all right reserved.</address>
</div>
</div>
</body>
</html>

全て使用したことのあるタグですので、問題ないですね。

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


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.