ホームページの作り方（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　>>Tableの構造を知る

■Tableの構造を知る

テーブル（table）を使ったレイアウトは、divを使うレイアウトに比べて簡単ですが、簡単なゆえのデメリットとして、まずサイトの表示が遅いということ、 そして、微妙な幅や高さの調整が利かないことです。

後者に関しましては、やっていくうちに気づいてくると思いますので、その時に理解してください。最もよいデザイン構成は、divで構造を作ってそのdiv構造の中の一部にtableを 組み合わせて使用していくことでしょう。

今度のサンプルは2カラムで、このテーブルを用いて作っていくことにします。

テーブルの基本構造は、

<table>
<tr>
<td></td>
</tr>
</table>

trというのは行を表し、tdは列を表します。

大体はこれに対し行や列を連結をするcolspan(行)、rowspan(列)や、 テーブルのborderの調節、borderを二本線から1本線にするcellspacing、あとはclass の指定あたりを設定して使います。

以下に今から作るWebページの骨格を示します。

<!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>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">バナー</td>
</tr>
<tr>
<td colspan="2">トップメニュー</td>
</tr>
<tr>
<td colspan="2">パンくずリスト</td>
</tr>
<tr>
<td rowspan="2">サイドメニュー</td>
<td>画像スペース</td>
</tr>
<tr>
<td>コンテンツ</td>
</tr>
<tr>
<td colspan="2">著作権情報</td>
</tr>
</table>
</body>
</html>

これを表示させてみるとこのようになります。→サンプル

Copyright(C) Wakabagari. All rights reserved.