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

■第二段階、ホームページ作成 ここが難所のテーブルレイアウトの入れ子

ハンドマーク ここで先ほど作ったテーブルに背景と文字(テキスト)を入れてみましょう。背景は一色で塗りつぶす入れ方と画像(写真)で入れる方法の二つがあります。その両方を使い分けて見ましょう。
びっくりマークここで注意していただきたいのが背景画像と背景色(塗りつぶし)記述した場合 背景画像が上に表示されます。先に背景色(塗りつぶし)書いて背景画像を書いても後の背景画像が上に表示されます。管理人もこれが分からず時間をかけた事があります。

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

■ホームページ作成!テーブルレイアウト(背景)やってみよう!。。。

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

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

【HTML-6】

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

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

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

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

矢印 height="149"の前に半角スペースがあります。テーブル内のセルの高さを決めています。この場合ですと149pxの高さということになります。また、なんで149PXかといいますと背景画像の高さが149pxのものを使用しているためです。セルの高さと画像の高さを同じにしてずれの無いようにしています。

矢印次にbackground="img-hp/hana.jpg"ですが これはbackgroundが画像を使いますよという意味で "img-hp/hana.jpg"は画像があるフォルダー(img-hp/内の)という意味です。最後の hana.jpgが画像の名前です。
※セルの背景に画像を使用するのはいろいろと役に立ちますので覚えておいて下さいね。

矢印次の height="500" bgcolor="#ffffc1"の height="500"は先ほどと同じでセルの高さを表します。次の bgcolor="#ffffc1"はセルの塗りつぶしの背景色です。ここではセルの高さと塗りつぶし背景色を指定しました。

矢印 次の height="80" bgcolor="#000000"の height="80"はセルの高さ80pxで、bgcolor="#000000"は塗りつぶし背景色の黒色を指定しています。

びっくりマークテーブル・セルの高さは セル内のコンテンツに応じて自動で高さが広がりますので慣れてくると高さ指定しなくてもいいかもしれません。でも、すべてのブラウザで閲覧可能にするなら高さ指定をしているほうが無難です。

矢印結果・・・

テーブルの設定 ↑上に書かれているHTMLをメモ帳で上書き保存をクリックしてインターネットエクスプローラーの更新ボタンを押すと左の画像のように見えるはずです いかがでしょうか?見えたらブラウザの左側のスクロールバーを下に動かして見てください。フッターの黒い部分か見えて ホームページらしくなってきたと思いませんか?このウインドウを閉じるにはブラウザの右上の×マークの閉じるボタンをクリックして下さい。

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

ブラウザで確認

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

■次も もう少しレイアウトを続けますね。次はちょっとHTMLがややこしいと思いますが頑張ってください。このやり方はレイアウト時、各方面で利用できます。ココをマスターすると殆どのレイアウトができてしまいます。それは テーブルの中にテーブルを組みます。これをテーブルの入れ子といいます。覚えておいて下さいね。
矢印次へ・・・

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

ハンドマークテーブルレイアウトの入れ子ですが ソース【HTML-7】の中の上から二つ目のセルの中にテーブルを作ります。【HTML-7】のソースを見てください。イメージがつかみにくいようでしたら上の【HTML-6】の[ブラウザで確認]をクリックして最大化ボタンをクリックし【HTML-7】の[ブラウザで確認]も同じようにクリックして見比べていただくと分かりやすいと思います。【HTML-6】のところで中央のクリーム色(ここにメインの内容を書く)のところにテーブルを作っています。

分かりにくいですが、クリーム色のところに高さ500px、幅640pxテーブルを作って、その中に幅510pxで左側のセルを作り、幅130pxで右側のセルが作られています。クリーム色のエリアにぴったりと作ったので分かりにくいですがよく見てください。そして、左のセルには背景画像を入れて、リンクの文字を書いています。 テーブルデザインの ここが山場ですね、マスターするとあれこれと使えますので頑張ってください。。。それでは ソースの解説をどうぞ↓。

【HTML-7】

<html>
<head>
<title>初めてのホームページ作成</title>
</head>
<body background="img-hp/haikei-grd.gif">
<center>
これが ホームページです。。。
<table border="1" width="650">
<tr>
   <td height="149" background="img-hp/hana.jpg" align="right">
      <h1>
<font color="#ffffff">ここにメインタイトルを書きます。</font>
      </h1>


   </td>
</tr>

<tr>
   <td height="500" bgcolor="#ffffc1">
         <table border="1" width="640" height="500">
             <tr>
               <td align="center">
                        これが ホームページです。。。ここに
                        メインの内容等を書きます。
                 </td>
               <td width="130" background="img-hp/hana-2.jpg"
                 valign="top" align="left">
                         <hr color="red" size="3">
                         <font color="#ffffff"><br>
                         ■link-1<br>
                         ■link-2<br>
                         ■link-3<br>
                         ■link-4<br>
                         ■link-5<br>
                         ■link-6<br>
                         </font>
                 </td>
             </tr>
         </table>
   </td>
</tr>

<tr>
   <td height="80" bgcolor="#000000" align="center">
<font color="#ffffff">
これが ホームページです。。。ここへ著作権表示などを書きます。
</font>
   </td>
</tr>
</table>
</center>
</body>
</html>


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

矢印 align="right"→これは、「このセルの中は右寄せにしなさい」という意味です。

矢印 <h1>と</h1>は見出しタグといいます。<h1>と</h1>の間にそのサイトの総見出しを書きます。大体タイトルタグ[<title>初めてのホームページ作成</title>]と同じになることが多いです。

矢印 <font color="#ffffff">ここにメインタイトルを書きます。</font>これは 文字の色を変えています。パソコンの初期設定は黒だったので白色に変えました。<font color="変えたい色を指定">ここに変えたい文字を書く</font>このように使います。fontは [フォント]といいます。


矢印入れ子テーブルの前半はお分かりかと思いますので valign="top" align="left" から解説します。 valign="top"はこのセルはセル内の一番上からもじを書くという意味です。丸くいうと上寄せといったところでしょうか。次の align="left"は文字を左寄せにするという意味です。まとめるとこのセル内は文字を[上寄せの左寄せ]になります。

矢印<hr color="red" size="3">ですが、 まずhrは水平線を引きますという意味です。color="red"は赤色にしますという意味です。 size="3"はサイズを3にしますという意味です。まとめると、水平線を赤色で太さ3pxで引きますという意味です。これもよく使われます。

矢印 <font color="#ffffff"><br>の<br>ですが改行の意味です br→は確かBreak(改行)の略だったと思います。
また、<br>タグを入れると、意図したところで改行することができます。
※後は テーブル終了タグで閉じていきます。もうお分かりですね。

ハンドサイン 下記[ブラウザで確認]ボタンをクリックしてソース【HTML-7】のここが、ここか、というふうにたどって構造を理解してください。ソースコードと実際の表示の関係が分かると かなり先へすすめます。 それと 休憩をとるのも大事ですよ。疲れてくると せっかくのやるきが無くなってきて それっきりなったりします。ちょっと一服してくださいね。。。
矢印結果・・・

レイアウト どうですか?休憩されましたか?やはり続けられましたか・・・管理人といっしょですね。ここはもう少しで終わりますから 終わったら絶対に休憩をとってください。
さて、どうでしょうか?左ように表示されましたか?。もし表示されない場合はもう一度この章をチェックしてみてください。それと ソースに 全角スペースなど無いかチェックもして下さい。

ブラウザで確認

【まとめ】
○初めての方には ちょっと難易度が上がりました。このテーブルの入れ子は今現在も沢山のサイトで使われています。理解できるとそれはそれは立派なサイトを作ることが出来ますのであちこちを いじって変化をチェックしてみてください。今回は入れ子は一回だけですが入れ子の中に入れ子また入れ子と三階層の入れ子などをつくって手の込んだサイトをよく見かけます。できそうやなと 思われたときはすぐに実行してください。そして出来上がったサイト、よかったら見せてくださいね。このあとは 枠線を消して、文字を入れて、それなりのトップページに仕上げます。そして、最終のサブページの作成に入ります、このページに比べると簡単ですので お楽しみに!。
もし、疲れていたら ここらで休憩をとってください。適度に休憩をとらないと出来るものも出来なかったりしますので・・・
矢印■次は トップページの完成です。もうちょっとですので頑張ってください。
ホームページ作成のテーブルレイアウト(枠線の削除)のページへどうぞ。。。
 
一歩進んだレイアウト  ここは難所のレイアウト(入れ子)です。 TOPページの完成!!


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