ホームページの作り方（HP作成法）ホームページの作り方（HP作成法）を解説

STEP1

1-1:準備
基本用語 ドメインの取得 スペースの確保 デザインを考える SEOを考える

STEP2

2-1:HTMLの記述
htmlファイルの作り方 HTMLの基本骨格 HTMLの種類、META、言語 タイトルと著作権情報 文の構成を考える 画像の表示 リンクの設定
2-2:CSSの記述
CSSのHTMLへの組み込み クラスの概念 文字の色とフォント 幅と高さの設定 文章の設定 文字の間隔・線 背景色・背景画像
2-3:CGI/アップロード
掲示板（BBS）の設置 カウンターの設置 サーバーへのアップロード アクセス解析の導入

STEP3

3:divでのレイアウト
divタグの使い方（前編） リストの設定 divタグの使い方（後編） インライン要素とブロック要素 floatの使い方 スクロールボックスの作成 アンカー(a)のスタイルの変更

STEP4

4:tableでのレイアウト
Tableの構造を知る Tableスタイルの変更 Tableでサイトを作る（前編） Tableでサイトを作る（後編）

STEP5

5:positionでのレイアウト
positionの構造を知る HTMLファイル（原本）作成 positionで位置を決める

STEP6

6:その他のテクニック
強調タグを使う サムネイルの作成 三次元化する スクロールバーの色を変える

STEP7

7:Javascriptを使用する
プルダウンメニュー
（フォーム使用）の作成 プルダウンメニュー
（CSS使用）の作成


>>ホームページの作り方TOP　>>divタグの使い方（後編）

■divタグの使い方（後編）

さて、さっそく先ほどのdivで作った構造の中にコンテンツを埋め込んでいきましょう。

スタイルなど気にせずに何でもかんでも埋め込んでいきます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<title>Wakabagari(若葉狩り)</title>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<div id"a1">
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
</div>

<div id="a2">
<a href="">HOME</a>
<a href="">SAMPLE1</a>
<a href="">SAMPLE2</a>
<a href="">SAMPLE3</a>
<a href="">SAMPLE4</a>
</div>

<div id="b">
<div id="b1" class="section">
<p class="submenu">SAMPLE1</p>
<ul>
<li class="left"><a href="">CONTENTS1</a></li>
<li class="left"><a href="">CONTENTS2</a></li>
<li class="left"><a href="">CONTENTS3</a></li>
<li class="left"><a href="">CONTENTS4</a></li>
<li class="left"><a href="">CONTENTS5</a></li>
<li class="left"><a href="">CONTENTS6</a></li>
</ul>
<p class="submenu">SAMPLE2</p>
<ul>
<li class="left"><a href="">CONTENTS1</a></li>
<li class="left"><a href="">CONTENTS2</a></li>
</ul>
<p class="submenu">SAMPLE3</p>
<ul>
<li class="left"><a href="">CONTENTS1</a></li>
<li class="left"><a href="">CONTENTS2</a></li>
</ul>
<p class="submenu">SAMPLE4</p>
<ul>
<li class="left"><a href="">CONTENTS1</a></li>
<li class="left"><a href="">CONTENTS2</a></li>
<li class="left"><a href="">CONTENTS3</a></li>
</ul>
</div>
<div id="b2" class="section">
<img src="fuukei1.jpg" alt="test" width="420" height="180">
<p class="rireki">---------更新履歴---------</p>
<p class="list">
　　　2005/1/2　　ホームページ開設<br>
　　　2005/1/2　　画像をアップしました<br>
　　　2005/1/2　　第一回リニューアル<br>
　　　2005/1/2　　第二回リニューアル<br>
　　　2005/1/2　　ホームページ閉鎖<br>
</p>
<h2><img src="point.gif" class="mark" width="20">What"s new</h2>
<p class="no1">
◆　[2005/1/2]　　<span>ビタミンAがレチノールと呼ばれました。<span><br><br>
◆　[2005/1/3]　　<span>ビタミンCがアスコルビン酸と呼ばれました。<span><br><br>
◆　[2005/1/4]　　<span>ビタミンDがコレカルシフェロールと呼ばれました。<span><br><br>
◆　[2005/1/5]　　<span>ビタミンEがトコフェロールと呼ばれました<span><br><br>
</p>
</div>
<div id="b3" class="section">
<ul>
<li class="right"><a href="">LINK1</a></li>
<li class="right"><a href="">LINK2</a></li>
<li class="right"><a href="">LINK3</a></li>
</ul>
<p class="submenu2">Information</p>
<p class="submenu3">やる気のある方はどしどしお電話ください。お待ちしております。<br><br>
Tell:0123-45-6789<br>
Fax:9876-54-3210</p>
</div>
</div>

<div id="c1">
<address>
Copyright(C) Wakabagari. All rights reserved.
</address>
</div>
</body>
</html>

STEP3の第一項で作成したdiv構造の中にコンテンツを加えてみました。

spanタグは囲んだタグや文字に対してスタイルを指定できるもので、例えば、「信号が黄色です。」という文の「黄色」という文字だけを黄色にしたければ、 「信号が<span>黄色</span>です。」という感じで、黄色をspanで囲んだ後、spanに対してスタイルをcolor:黄色を指定するだけでその部分だけを 黄色くすることが出来ます。

spanにもidやclassを指定することができますので、一つの文章でいろんな色の文字を使いたい場合などは、<span class="">としてください。

brは改行のタグです。行を変えたい場合は多用します。(XHTMLを使用の方は、brは空要素なので、<br />にしてください）

なお、ここまでではスタイルを適用していないのでただ並べてあるだけです。

ここまでのサンプル

Copyright(C) Wakabagari. All rights reserved.