作成ネット収入HP「あくせすポイント」
トップ >  ホームページ作成 > スタイルシートでレイアウト > TABLEを組み込む

見た目の枠組みを作る

TABLEなくして、レイアウトはない

どてっぱらに、ぶち込む!

HTMLのコンテンツは、BODY部にあります。

<body>コンテンツ</body>

ホームページを開いたとき目に入るのは、コンテンツの部分だけ。だから、ここに書いたものは、すべてコンテンツとなるのです。

だらだら書くのもよし。
枠を、ビシッと決めるのもよし。

どうやるか?
作るあなたが、勝手にきめてください。
ここでは、いちおう、ビシッとした枠組を作ることにする。

「いちおう」という言葉には意味があります。

ワクは組み込むのですが、見た目は、綺麗ではありません。
きれいな設定は、後から考えるとして、おおざっぱに枠組みだけを用意するのが、このぺーじのテーマです。

  1. 大枠を決める
  2. 中枠を決める
  3. クラス名をつけようか

参照
CSSファイルの作り方は、スタイルシートの呼び出し方
CSS属性の設定のやりかたはCSSの設定を参照して下さい。

■ 大枠を決める

2回戦の始まりです。

前回のページで閉じた、HTMLファイルを再び開いてください。
やり方は覚えていますね。忘れた人は、もう一度、前回を振り返ってください。

では、はじめますね。

ここでは、コンテンツの土台となる大枠を組み込みます。
TABLEタグを、書き込むのです。TABLEの説明は、ココを見てもらうこととして、下のタグを打ち込んでください。

<body></body>タグの間に打ち込みます。
1字1句間違わないように、注意してください。


<!-- dodai table start-->
<table>

 <!-- head start-->
 <tr>
 <td>
 ここが頭
 </td>
 </tr>
 <!-- head end-->

 <!-- main start-->
 <tr>
 <td>
 ここが胴体
 </td>
 </tr>
 <!-- main end-->

 <!-- bottom start-->
 <tr>
 <td>
 ここがオシリ
 </td>
 </tr>
 <!-- bottom end-->

</table>
<!-- dodai table end-->

うまく、打ち込めましたか。上書き保存を忘れないように。
ファイルと開くと、このように表示されるはずです。

■ 中枠を決める

あなたは、ここまで、わたしに付き合って、タグを打ってきました。
そろそろ、疑問が起こりませんか?

「こんな、変なホームページいらない!!」
「わたしは、かっこいいHPが作りたいんだ!!!」

と。

気持ちは分かります。
早く、あなたのオリジナルに取り掛かりたいのでしょう。
「こんなカッタルイことをして、なんになるのか?」

確かに、カッタルいかも知れませんね。
ドンくさいことを、やっているように、思えるかもしれません。
ところが、実は、最短コースを走っているのです。

現在の章「スタイルシートでレイアウト」を終えたとき、あなたは、HTMLとスタイルシートとの関係を理解します。

ですから、もうしばらく、付き合ってください。
いいですか?




では、中枠を作ります。

下のタグを打ち込んでください。
これまでと、同じファイルにです。

打ち込む場所は・・・ここが胴体とある部分です。

<table>
<tr>
<!-- main left-->
<td>
中の左
</td>

<!-- main right -->
<td>
中の右
</td>

</tr>
</table>

タグを打ち込み、上書き保存をしたら、ファイルを開いてください。
このように、表示されるはずです。
これで、土台が完成しました。

各タグに、対応するスタイルシートの名前をつければ、しばらくはこのファイルとバイバイです。
では、タグに名前をつけましょう。

■ クラス名をつけようか

タグに名前を・・・クラス名を指定するのがこのコラムの目的です。

スタイルシートと、HTMLタグを関連づけるには、いくつか方法があります。それは、この章でよく読んでもらうとしまして、今は、クラスのみを使って説明していきます。

ここでは、これまであなたが打ち込んできたタグに、クラス指定をしてもらいます。名前(クラス名)の付け方はなんでもいいのですが、タグの関係が一目で分かるものが理想的ですね。

わたしは、クラス名を、下のようにつけることにしました。
こうすることで、スタイルシートと関連付けられます(茶色表示)
名前は、自由に変えてもいいですが、以後の説明はこの名前で行ないますね。

<!-- dodai table start-->
<table class="dodai">

 <!-- atama start-->
 <tr>
 <td class="atama">
 ここが頭
 </td>
 </tr>
 <!-- atama end-->

 <!-- main start-->
 <tr>
 <td class="doutai">
 ここが胴体

  <table class="doutai">
  <tr>
  <!-- main left-->
  <td class="m_left">
  中の左
  </td>

  <!-- main right -->
  <td class="m_right">
  中の右
  </td>
  </tr>
  </table>

 </td>
 </tr>
 <!-- main end-->

 <!-- bottom start-->
 <tr>
 <td class="osiri">
 ここがオシリ
 </td>
 </tr>
 <!-- bottom end-->

</table>
<!-- dodai table end-->

ここまで作れば、とりあえずOKです。ファイルを保存して閉じてください。しばらくは、開く必要が無いはずです。

できたファイルの表示結果は、「中枠を決める」と同じようになります。
もし、表示結果が異なっているならば、ファイルの内容がどこか間違っていますよ。よーく見て、修正してくださいね。

一口メモ
<!-- --> で挟まれた文字は、コメントです。
コンテンツにはなりませんが、タグを管理するためには、説明を書いておくと便利です。



この章は、コレで終わりです。
理解できたと思いますが、もし、分からないところがあればメールを下さい。


次は、お待ちかね。スタイルシートですよ。
クリック>CSSを決める

<>

Copyright(C)AccessPoint by Tukioyaji ページトップ
メールする