■第三段階・ファイルの転送(FFFTP)つかい方↓

■第二段階、ホームページの作り方・とにかくやってみよう!  テーブルレイアウト

table画像 ☆左のテーブルを構成するソース
<table border="2" width="200" height="150">
<tr>
<td>1</td><td>2</td><td>3</td>
  </tr>
<tr>
<td>4</td><td>5</td><td>6</td>
  </tr>
</table>

ハンドマーク まず初めに テーブルの簡単な解説をどうぞ。
上にあるのがテーブルです。全く表ですね。表全体の外の大枠の中に小さい枡(ます)がありますが、これをセルといいます。テーブルはセルの集合体でできています。そしてこのセルの中に 文字であったり、画像、スクリプト、ブロックレベル要素、オブジェクト等、殆どのものを入れることができる便利なのがテーブルなんです。
今は ☆テーブルはセルの集合体で出来ているということを覚えておいてください。
イメージがつかみにくい方はホームセンターでカラーボックス6ケースを買ったとイメージしてください。それを3ケース並べて、その上に3ケース並べる、その中に好きなものを置く こんなイメージでいいと思います。さあ、これからいっぱいものを入れていきましょうね。

※ブロックレベル要素、オブジェクトが何かは、割愛させて頂きます。こんなもんがあるということを覚えておいて下さいね。

■最終的には好みもありますが仕組みを勉強という事で、 こんなホームページを作ってみようと思います。

■ホームページ作成!やってみよう!。。。

☆なんとなくですが テーブルのイメージはつかめましたか?分からなくても後で分かってきますので安心してください。
 

■いよいよホームページ作成 初めてのテーブルレイアウト!
☆分からなかったら 下記ソースをコピーしてお使い下さいね。進めて行くうちに 必ず分かってきます。

【HTML-4】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="img-hp/haikei-grd.gif">
これが ホームページです。。。
<table border="1" width="650">
<tr>
   <td>
これが ホームページです。。。ここにタイトル等を書きます。
   </td>
</tr>

<tr>
   <td>
これが ホームページです。。。ここにメインの内容等を書きま す。
   </td>
</tr>

<tr>
   <td>
これが ホームページです。。。ここへ著作権表示などを書きます。
   </td>
</tr>
</table>
</body>
</html>

【HTMLの解説】
■この文字色が新しく追加されたHTMLです。

矢印 table border="1" width="650"について
tableは 「今からテーブルを作りますよ」という意味です。

矢印 半角スペース空けての border="1"は、枠線の太さを1ピクセル(1px)で作りますという意味です。

矢印 半角スペース空けての  width="650"は、テーブル(表)の幅を650ピクセル(650px)で作りますという意味です。

矢印 <tr>はTable Rowの略でテーブル(表)の横方向の一行を定義します。表の行の始まりをあらわします。

矢印 次の<td>から</td>はテーブルデータの略で、この間に表示させたいものを書きます。文字、画像などです。<td>から</td>を増やすと一行に文字や画像を書き込みできる領域が増えます。

矢印 次の</tr>は行の終わりの意味です。これで一行目が終わりですという意味です。一番上のテーブル(表)の1,2,3が一行目で4,5,6が2行目になります。
※この<tr>から</tr>を増やして行を追加していきます。



矢印結果・・・

テーブルの設定 ↑上に書かれているHTMLをメモ帳で上書き保存をクリックしてインターネットエクスプローラーの更新ボタンを押すと左の画像のように見えるはずです いかがでしょうか?こんなに狭い行に何が入るんやろう???と思われるかもしれませんが沢山入るんですよ後ででてきますのでお楽しみに。

画像が分かりにくいと思われましたら "ブラウザ"で確認をクリックしてみてくださいね。

ブラウザで確認

※ブラウザとはインターネット閲覧ソフトのことです。例えばインターネットエクスプローラー、ファイヤーフォックス、ネットスケープ等です。

■次は テーブルが左よりになっているので 真ん中へ配置したいと思います。これをセンタリングといいます。
矢印次へ・・・

■ホームページ作成 テーブルレイアウト・センタリング
☆分からなかったら 下記ソースをコピーしてお使い下さいね。進めて行くうちに 必ず分かってきます。

【HTML-5】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="img-hp/haikei-grd.gif">
<center>

<table border="1" width="650">
<tr>
   <td>
これが ホームページです。。。ここにタイトル等を書きます。
   </td>
</tr>

<tr>
   <td>
これが ホームページです。。。ここにメインの内容等を書きま す。
   </td>
</tr>

<tr>
   <td>
これが ホームページです。。。ここへ著作権表示などを書きます。
   </td>
</tr>
</table>
</center>
</body>
</html>

【HTMLの解説】
■この文字色が新しく追加されたHTMLです。

☆<body>タグ直下の「これがホームページです。。。」はもういりませんので削除しました。

矢印 <body>タグの直下にある<center>タグと</body>の上にある</center>タグで挟んでセンタリングします。
初期設定ではコンテンツ(内容)が左寄せになっています。
中央そろえにするためのセンタリングです。センタリングは作る方の好みですので絶対に中央揃えにしなくてはいけないということではありません。もちろん右寄せもできます。

矢印右寄せは
<center>タグのところを<div align="right">タグに変えて、その下にコンテンツ(内容)書いて一番下の</center>タグを</div>に変えると右寄せになります。divタグのrightのところを それぞれcenter、left、かえると中央揃え、左そろえになります。<center>タグについてですが推奨されないタグなんです。なぜつかったかというとはじめてのセンタリングには分かりやすいので使いました。慣れてきましたらdivタグを使いましょうね。


矢印結果・・・

センタリング センタリングもうまくできましたか?左の画像では分かりにくいのでブラウザ確認のボタンをクリックしてみてください。新しいウインドウが開くと思いますがウインドウが小さいままだとわかりにくいのでブラウザの右上にある最大化ボタンをクリックしてみてください。これから 内容をいれていきますね。

ブラウザで確認

【まとめ】
○このページではテーブル(表)の作り方とセンタリング(中央配置)をやってみました。 このテーブルレイアウトは推奨されていませんが、しっかり理解すると素晴らしいレイアウト(デザイン)ができてしまいます。なぜ推奨されないかというとテーブルの使用目的がデザインではなくて表として用いるのが正当だということらしいです。ごもっともだと思いますが、他にもとても役に立つ使い方ができるのであれば使ってもいいのではと考えます。管理人もテーブルレイアウトにはずいぶんお世話になりました。初めは難しいかも分かりませんがちょっとだけとりいれて見ますので楽しみにして下さい。管理人も初めてテーブルが組めた時はそれはそれは嬉かったのを覚えています。

矢印■ここまで前置きが長かったですが、やっとホームページレイアウト(デザイン)に入っていきます。ここからは 眠くなられた方も目が覚めるのではと思います。ちょっとしんどい(疲れた)と感じておられたら 休憩を先にとってください。と言うと大変難しいのかな?と思われて げっそりされるかもしれませんが、大したことはありませんので 楽な気分でどうぞです。。。
一歩進んだテーブルレイアウトのページへどうぞ。。。
 
背景背景画像の設定  ここは初歩のテーブルレイアウトのページです。 一歩進んだテーブルレイアウト


■第三段階・ファイルの転送(FFFTP)つかい方↓