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

■第二段階、ホームページの作り方、一歩進んだテーブルレイアウト

ハンドマーク まず初めに テーブルの簡単な解説をどうぞ。

テーブルとは 表のことと思ってください。
この表の一枡(ひとます)、一枡をホームセンターで販売されているカラーボックスと思って頂けるといいかと思います。

☆下のテーブルはカラーボックスを横に3個並べたとイメージしてください。そして このカラーボックスの中に写真や文字を入れていきます。 これを テーブルレイアウトとこのサイトでは言います。
正確には 違うかもしれませんが 管理人は このイメージでレイアウトを覚えていきました。

123
456

■ちょっと詳しい解説です。
テーブル(表)の一枡一枡を セル といいます。ここで言うカラーボックスのことです。 で、テーブルはセルの集合体でできています。分かりやすく言うとカラーボックスの集合体と思って頂いてもいいと思います。
なんとなく イメージがつかめましか?

■それでは レイアウトですが
①初めに テーブル無しで 文字を書いてみます。
②その後テーブルをつかった文字を書いてみます。
③いろいろと分割したレイアウトを作って
おしまいです。

たった これだけで そこそこのホームページは作られます。
それでは 頑張ってまいりましょう。。。

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>

☆ちょっとだけテーブルのコードの話ですが覚えなくていいですよ。
目を通しておいてもらえたらいいです。
まず初めにこれですが↓
<table border="2" width="200" height="150">
          ・
          ・
          ・
</table>
上の<table border="2"・・・これは インターネットを見るソフトに「今からテーブルを使いますよ」と言う宣言のようなものです。
下の</table>は インターネットを見るソフトに「テーブル作成を終了します」と言っています。
簡単に言うと
今からテーブルを作成します、これで終了しますといっていることです。
もっと簡単に言うと <table border="2"・・・ は、カラーボックスの上に敷いたビニールカバーで
</table>は 下に敷いたビニールカバーとイメージしてください。
じつはこれ 管理人も始めにイメージしました。

とにかく始めは 目に見えるもの、近くに存在するものに置き換えてイメージして感覚をつかんで慣れる
これがホームページ作成を覚える近道です。←これ、大事です。
なんでもなんかに置き換えてイメージする、これがコツです。


その次に
<tr>~</tr>までが、行をあらわします。<tr>~</tr>が二つあるので上のテーブルで言うと2行ということです。

その次の
<td></td>が セルです。ここでいうカラーボックスです。
<td></td>で1セルです。必要な数だけ横に並べたらその数だけカラーボックス(セル)ができます。
<td>と</td>の間に文字や画像をいれます。

【まとめ】
テーブルを作るのは 初めに下にシートを敷いて、シートの上にカラーボックスを並べて、上にシートを掛けて出来上がり。こんなイメージです。
ですが、
実際にコーディングするとこの逆で、始めに上のシートを敷いて、
その下にカラーボックスを置いて、置いたカラーボックスの下にシートを敷くこんなイメージになります。 

※実際には カラーボックスとかシートとかは はっきり言って 間違ってます。
でも 初めての方がイメージする材料として 挙げさせてもらいました。
テーブルがしっかりマスターできたら 厳密な意味を勉強してください。


※テーブルレイアウトの今・・・
※解説しながらこんなことを言うのも変ですが このごろはテーブルレイアウトは使われずにレイアウトはスタイルシートというのが推奨されています。
従いまして テーブルレイアウトはあまりお勧めできませんが、 レイアウトの概念(コツ)をつかむには テーブルレイアウトは捨てたもんではありません。 ここだけの話ですがテーブルを使って レイアウトのコツを是非ともマスターして下さい。
そして レイアウトに興味をもたれたら、スタイルシートによるデザインへと 移行していってください。いきなりスタイルシートをやると挫折される方が少なくありません。という事で 管理人は未だにテーブルレイアウトを大切にしています。



☆テーブルレイアウトとは☆
===書き込む領域を割り振りすること===

※テーブルは 表 としてつかうことが正しいということも忘れずに・・・。

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



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

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

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

【HTML-レイアウト】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body>
これが ホームページです。。。<br>
とにかく始めは 目に見えるもの、<br>
近くに存在するものに置き換えてイメージして<br>
感覚をつかんで慣れる<br>
<br>
これがホームページ作成を覚える近道です。←これ、大事です。<br>
なんでもなんかに置き換えてイメージする、<br>
これがコツです。<br>
</body>
</html>

【HTMLの解説】
矢印 <html>→これは、以下「の文章はHTMLで書かれています」という宣言のようなものです。
矢印 <head>→これは、HTMLのヘッダーといって以下にこのHTMLの構成するものを書きます。
矢印 <title>タイトル</title>→これは、このHTMLのタイトルを書きます。
矢印 </head>→これは、「このHTMLの構成関係の情報はこれで終わります」という意味です。
矢印 <body>→これはボディタグといいます。このタグ以下に書かれたものがブラウザに表示されます。
※ブラウザとは インターネットを閲覧するソフトのことでインターネットエクスプローラーやファイヤーフォックスなどが有名です。

矢印<br>→これは、文章をここで改行するという意味です。

矢印 </body>→これは、ブラウザへの表示は、ここで終わりますという意味です。

矢印 </html>→これは、HTMLを終了しますという意味です。

※それでは 上のHTMLをコピーして実際にブラウザに表示してみてください。

矢印結果・・・

ホームページ作成 ↑上に書かれているHTMLをメモ帳にコピーして上書き保存をクリックして名前をつけて保存してください。保存したファイルをダブルクリックして開いてください。 いかがでしょうか?見えましたか?

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

ブラウザで確認

■まず始めにテーブルを使わずに 文字だけ書きました。次からテーブルを使います。

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

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

【HTML-レイアウト-2】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body>
<center>
これが ホームページです。。。
<table border="1" width="650">
<tr>
   <td>
これが ホームページです。。。
とにかく始めは 目に見えるもの、

   </td>
</tr>

<tr>
   <td height="300">
近くに存在するものに置き換えてイメージして
感覚をつかんで慣れる


   </td>
</tr>

<tr>
   <td>
これがホームページ作成を覚える近道です。←これ、大事です。
なんでもなんかに置き換えてイメージする、
これがコツです。

   </td>
</tr>
</table>
</center>
</body>
</html>

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

矢印 <center>は<center>から</center>の間のものを中央揃えにしなさいという意味です。ここでは作成するテーブルを中央へ置いてくださいという意味です。

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

矢印 半角スペース空けての border="1"は、枠線の太さを1ピクセル(1px)で作りますという意味です。
※このborder="1"の1(イチ)を0(ゼロ)にすると線が消えます。線を消したデザインも中々いいものです。やってみてください。

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

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

矢印 <td height="300">は セル(カラーボックス)の高さ指定です。

矢印 次の<td>から</td>はテーブルデータの略で、この間に表示させたいものを書きます。文字、画像などです。<td>から</td>を増やすとカラーボックスを横に増やせます。ということで区分けされた領域が増えて文字や画像を書き込みできるようになります。

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

矢印結果・・・

テーブルの設定 ▲うまく見えましたか?テーブルをつかわない時と比べて見やすくなったと思いませんか?テーブルをうまく使えるようになるとページのすきな所に文字や画像を配置することができるようになります。

ブラウザ"で確認してみてください。

ホームページ作成ブラウザで確認


■次は もう少し進んだレイアウトをやってみます。
矢印次へ・・・

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

▲今度は 縦並びに3テーブルを作ります。それぞれ、上からにヘッダー、メインコンテンツ、 フッターに分けたものです。よくあるサイトのデザインです。これ役に立つと思います。 このサイトも このデザインです。

【HTML-5】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body>
<cente>
<table border="1" width="650">
<tr>
   <td>
これが ホームページです。。。><br>
とにかく始めは 目に見えるもの、><br>

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

<table border="1" width="650" height="300">
<tr>
   <td width="500">
<img src="img-hp/my-pc.jpg"><br>
近くに存在するものに置き換えてイメージして><br>
感覚をつかんで慣れる><br>

   </td>
<td>
<img src="img-hp/pc.jpg"><br>
近くに存在するものに置き換えてイメージして><br>
感覚をつかんで慣れる><br>

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


<table border="1" width="650">
<tr>
   <td>
これがホームページ作成を覚える近道です。←これ、大事です。><br>
なんでもなんかに置き換えてイメージする、><br>
これがコツです。><br>

   </td>
</tr>
</table>
</center>
</body>
</html>

【HTMLの解説】
HTMLを上から順に見ていきましょう。

矢印 <body>タグ直下の<center>タグとHTMLの最下部から 3行目の</center>タグで3個のテーブルを中央へ寄せています。 これをセンタリングといいます。

矢印 上から2つめのテーブルの<td width="500">はセルの幅を500ピクセルと指定しています。カラーボックスでいうと1つのカラーボックスの幅を500pxに指定しています。

矢印 上から一つ目のテーブルと上から3つめのテーブルは幅が650pxのカラーボックスが1個です。上から二つ目のテーブルだけカラーボックスを2つにしています。一つのカラーボックスが500pxのため残りのカラーボックスの幅は650px-500pxで150pxになります。従って、上から2つめの、このテーブルはの500pxのカラーボックスと150pxのカラーボックスの二つになります。

これを 500pxのセルと150pxのセルをつくるといいます。
HTMLは
<td>文字~500px</td>
<td>文字~150px</td>の部分で指定しています。

※上から2番目のテーブルの500pxのセルにメインの内容を書きます。 150pxのセルには リンクなどのナビゲーションをつくります。または メインコンテンツとナビゲーションのエリアを作ったことになります。

矢印 <img src="img-hp/my-pc.jpg"><br>は画像指定のコードです。写真を入れたイメージをつかんでもらおうといれてみました。写真も色々入れ替えてみてください。


矢印結果・・・

ホームページ作成 センタリングもうまくできましたか?なんとなくそれらしくなってきたと思いませんか?ブラウザで確認ボタンを押してみてください。

ホームページ作成ブラウザで確認

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

テーブルの幅やセルの数を増やしたり減らしたりして感覚をつかんでください。 またborder="0"で 枠線も消えますので このイメージも感じてください。 また枠線を太くするにはボーダー指定の数を増やしてください。1を2にすることです。

また、「テーブルの入れ子」というのがあります。これはテーブルの中にテーブルを作るのです。その中にまたテーブルを作る…→ 入り組んだ複雑なレイアウトができます。サンプルサイト作成でちょとだけでてきますので、その時やります。テーブルの入れ子も面白いですよ。
このへんまでで なんとなく なんとなく 分かったようなきになってもらえたらうれしいです。

矢印■この辺で復習をかねてホームページ構造確認・目で見るホームページをご覧になってください。初めの時よりイメージがわいてきませんか?。。。

※さあ 次では トップページで「こんなホームページを作ってみましょう」と言っていたページを作っていきましょう。ここまでこられたらすぐにできますよ。今まで案内させてもらった「もの」の応用ばかりですので安心してください。また、この方法でいろいろとデザインできますので個人サイトやグループで利用するサイト、会社サイトなど期待して次へすすんで下さい。。。
 
 
初歩のテーブルレイアウト  ここは一歩進んだレイアウト  難所のテーブルの入れ子


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