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

divタグを理解する

ドリル式ホームページの作り方TOP  >>  Lesson7〜positionを使ったレイアウト〜  >>  divタグを理解する

divタグを理解する

divタグは、他のいくつかのタグを一まとめにして扱うことができる大変便利なタグです。

たとえば、3人の若者が、同じ目的地(大阪とする)に行きたいとしたとき、3人別々に大阪に行くことはもちろん可能であるが、車を使えば、3人一緒に同じ経路、同じ時間で大阪に行くことができます。

つまり、3人の若者(いろんなタグ)を車(div)に押し込んで、一緒に動かしましょうということです。

<div>
<h1></h1>
<p></p>
</div>

サイト内コンテンツの大まかな位置取りをdivを使って予め設定しておきます。

各divタグに対してIDを指定することで、divで囲まれたコンテンツを別々に動かすことができるようにします。

なお、それぞれのdivコンテンツを一緒に動かすことができるように、3つのdiv(a1,a2,a3)をさらに大きなdiv(a123)にて囲っておきます。

<?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">ヘッダ</div>
<div id="a2">コンテンツ</div>
<div id="a3">フッター</div>
</div>
</body>
</html>

divタグ


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.