ホームページの作り方（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　>>HTMLファイル（原本）作成

■HTMLファイル（原本）作成

positionタグのサイト内での使い方を学ぶために、下のような原本（htmlのみ）を用意しました。

この原本の中では、一つ一つの文字や画像が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 class="a1"><img src="rogo.gif"></div>
<div class="a2">｜sitemap｜問い合わせ｜</div>
<div class="a3">
<a href="index.html"><img src="navi0.jpg"></a>
<a href="index.html"><img src="navi1.jpg"></a>
<a href="index.html"><img src="navi2.jpg"></a>
<a href="index.html"><img src="navi3.jpg"></a>
<a href="index.html"><img src="navi4.jpg"></a>
<a href="index.html"><img src="navi5.jpg"></a>
</div>
<div class="a4"><img src="menu1top.jpg"></div>
<div class="a5">　</div>
<div class="a6"><img src="gazou.jpg" width="420"></div>
<div class="n1"><a href="index.html"><img src="n1.gif"></a></div>
<div class="n2"><a href="index.html"><img src="n2.gif"></a></div>
<div class="n3"><a href="index.html"><img src="n3.gif"></a></div>
<div class="n4"><a href="index.html"><img src="n4.gif"></a></div>
<div class="n5"><a href="index.html"><img src="n5.gif"></a></div>
</div>
<div class="a7"><img src="what.gif"></div>
<div class="a8">
<table border="0" cellspacing="0">
<tr>
<td class="a9">[2005.1.1]</td>
<td class="a10">ビタミンB1がチアミン二燐酸と呼ばれました。</td>
</tr></tr>
<td class="a9">[2005.2.1]</td>
<td class="a10">ビタミンB2がリボフラビンと呼ばれました。</td>
</tr></tr>
<td class="a9">[2005.3.1]</td>
<td class="a10">ビタミンB6がピリドキサールと呼ばれました。</td>
</tr></table>
</div>
<div class="a11">
<div class="a12">
<p class="a13">Information</p>
<p class="a14">会社説明会随時行っています。</br></br>
4/1（15:00〜15:01）　幕張メッセ</br>
4/1（15:15〜15:16）　千葉マリンスタジアム</br></br>
日時、場所等でお悩みの方は下記までご連絡ください。</p>
</div>
<div class="a15">
<p class="a13">お問い合せ</p>
<p class="a14">〒123-4567</br>東京都千代田区1-2-3</br>TEL:0123-45-6789
FAX:9876-54-3210</p>
</div>
</div>
<div class="a16"><img src="sita.jpg"></div>
<address>
Copyright(C) 2005 F&F. All rights reserved.
</address>
</body>
</html>

ここまででこうなります。→サンプル

Copyright(C) Wakabagari. All rights reserved.