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

divとfloatで骨格を作る

ドリル式ホームページの作り方TOP  >>  Lesson8〜floatを使ったレイアウト〜  >>  divとfloatで骨格を作る

divとfloatで骨格を作る

divでくくられた包括ブロックをfloatを使って左に寄せることによって、2カラムのサイト骨格を作ります。

<?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">タイトル</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>

上のように、htmlにdiv骨格を作ったら、style.cssを編集します。

div#b2,div#b3に共にfloat:left、もしくはfloat:leftとfloat:rightを指定して左右に寄せたあと、div#b4にclear:bothを指定して、フッターの流し込みを解除します。

カラム落ちを防ぐために、width(幅)も一緒に指定します。

float

(div#b2の幅+div#b3の幅=div#b1234の幅)になるようにwidthを指定すると共に、b1234とb1にposition:relativeを指定して、基点を変更します。

#b1234 {
border-top:5px solid #222;
width:640px;
background:#fff;
position:relative;
margin:auto;
}
#b1 {
position:relative;
}
#b2 {
float:left;
width:180px;
}
#b3 {
float:right;
width:440px; }
#b4 {
clear:both;
width:640px;
}
p#a2 {
margin:0 0 10px 10px;
}


Lesson8〜floatを使ったレイアウト〜

  1. XHTMLの骨格を記述する
  2. floatタグを使用する
  3. divとfloatで骨格を作る
  4. div内に文章を記述する
  5. スタイルシートを適用する
  6. ブラウザによる表示の違いを学ぶ
  7. サイトを画面の中央に配置する
  8. ロールオーバーボタンの作成(文字の背景切替型)
  9. ロールオーバーボタンの作成(文字画像切替型)
  10. サンプルにロールオーバーメニューを配置する

CGIの設置

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

ホームページの公開

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