見た目の枠組みを作る
ＴＡＢＬＥなくして、レイアウトはない
どてっぱらに、ぶち込む！
ＨＴＭＬのコンテンツは、ＢＯＤＹ部にあります。
<body>コンテンツ</body>
ホームページを開いたとき目に入るのは、コンテンツの部分だけ。だから、ここに書いたものは、すべてコンテンツとなるのです。
だらだら書くのもよし。
枠を、ビシッと決めるのもよし。
どうやるか？
作るあなたが、勝手にきめてください。
ここでは、いちおう、ビシッとした枠組を作ることにする。
「いちおう」という言葉には意味があります。
ワクは組み込むのですが、見た目は、綺麗ではありません。
きれいな設定は、後から考えるとして、おおざっぱに枠組みだけを用意するのが、このぺーじのテーマです。
- 大枠を決める
- 中枠を決める
- クラス名をつけようか
参照
ＣＳＳファイルの作り方は、スタイルシートの呼び出し方を
ＣＳＳ属性の設定のやりかたはＣＳＳの設定を参照して下さい。
２回戦の始まりです。
前回のページで閉じた、ＨＴＭＬファイルを再び開いてください。
やり方は覚えていますね。忘れた人は、もう一度、前回を振り返ってください。
では、はじめますね。
ここでは、コンテンツの土台となる大枠を組み込みます。
ＴＡＢＬＥタグを、書き込むのです。ＴＡＢＬＥの説明は、ココを見てもらうこととして、下のタグを打ち込んでください。
<body>と</body>タグの間に打ち込みます。
１字１句間違わないように、注意してください。
<!-- 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-->
うまく、打ち込めましたか。上書き保存を忘れないように。
ファイルと開くと、このように表示されるはずです。
あなたは、ここまで、わたしに付き合って、タグを打ってきました。
そろそろ、疑問が起こりませんか？
「こんな、変なホームページいらない！！」
「わたしは、かっこいいＨＰが作りたいんだ！！！」
と。
気持ちは分かります。
早く、あなたのオリジナルに取り掛かりたいのでしょう。
「こんなカッタルイことをして、なんになるのか？」
確かに、カッタルいかも知れませんね。
ドンくさいことを、やっているように、思えるかもしれません。
ところが、実は、最短コースを走っているのです。
現在の章「スタイルシートでレイアウト」を終えたとき、あなたは、ＨＴＭＬとスタイルシートとの関係を理解します。
ですから、もうしばらく、付き合ってください。
いいですか？
では、中枠を作ります。
下のタグを打ち込んでください。
これまでと、同じファイルにです。
打ち込む場所は・・・ここが胴体とある部分です。
<table>
<tr>
<!-- main left-->
<td>
中の左
</td>
<!-- main right -->
<td>
中の右
</td>
</tr>
</table>
タグを打ち込み、上書き保存をしたら、ファイルを開いてください。
このように、表示されるはずです。
これで、土台が完成しました。
各タグに、対応するスタイルシートの名前をつければ、しばらくはこのファイルとバイバイです。
では、タグに名前をつけましょう。
タグに名前を・・・クラス名を指定するのがこのコラムの目的です。
スタイルシートと、ＨＴＭＬタグを関連づけるには、いくつか方法があります。それは、この章でよく読んでもらうとしまして、今は、クラスのみを使って説明していきます。
ここでは、これまであなたが打ち込んできたタグに、クラス指定をしてもらいます。名前（クラス名）の付け方はなんでもいいのですが、タグの関係が一目で分かるものが理想的ですね。
わたしは、クラス名を、下のようにつけることにしました。
こうすることで、スタイルシートと関連付けられます（茶色表示）
名前は、自由に変えてもいいですが、以後の説明はこの名前で行ないますね。
<!-- 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-->
ここまで作れば、とりあえずＯＫです。ファイルを保存して閉じてください。しばらくは、開く必要が無いはずです。
できたファイルの表示結果は、「中枠を決める」と同じようになります。
もし、表示結果が異なっているならば、ファイルの内容がどこか間違っていますよ。よーく見て、修正してくださいね。
一口メモ
<!-- --> で挟まれた文字は、コメントです。
コンテンツにはなりませんが、タグを管理するためには、説明を書いておくと便利です。
この章は、コレで終わりです。
理解できたと思いますが、もし、分からないところがあればメールを下さい。
次は、お待ちかね。スタイルシートですよ。
クリック＞CSSを決める
|
