第三回 [テーブルレイアウト]

テーブルの前に、「テーブルを使ったらどんなことができるか」を先に。
表を書くだけじゃないんです。テーブルって。

1.画像と文字が横に並べられる。
2.縦方向の文字や画像の位置の制御ができる。（下詰とか真中とかね）

つーことができます。

逆にいうと、テーブル使わなければできないんです。これ。

ちなみに、この枠もテーブルだけです。ボーダー０にしてあるので線が見えないですが、
ボーダー1にして解りやすくするととこの様に、２重にテーブルが組まれているのがわかりますでしょうか？

＃外のテーブルの背景を黒にして、余白を１にすることによって、枠線を出しているんです。

それでは、main.htmlの部分の作成手順です。



ここの原稿はこれ。



絵の上に文字があるのは問題ないのですが、
横にテキストが２箇所レイアウトされてますよね。
こうなった時点でテーブルの出番です。

非常にざっくりですが、こんな感じでスライスします。

これでファイアワークスからスライス内容を出力してドリームウィーバーで見ると

んで、画像になっている文字部分をほんとに文字にしましょう



テーブルの中の「女神は～」の個所、さらに新規で行１列１のテーブルで文字用のテーブルを作っているのが
解りますでしょうか？

外のセルで中央寄せにして、その中にテーブルを新規作成し、左詰、折り返さないにチェックしてあります。
これでどんな環境でも崩れないですよね。

ちなみにわざと文字サイズ調整してません。次のCSS編で説明しますのでサイズ調整は後回しです。

テーブルレイアウトって詰め将棋のイメージが僕にはあります。

詰め将棋って手数が決まってなければ、色々とやり方ってありますよね。
テーブルレイアウトも手順は色々あります。

ただし、正解はあるんです。

軽く見せる。
テーブルのネストを少なくする＝テーブルの中にテーブルを少なくする。
テーブルのサイズはできるだけピクセル指定する。

これらは、ブラウザの挙動として、テーブルの場合、
テーブルのサイズ等が確定した個所から表示していくという動きがあるからです。
ピクセル指定やテーブルネストを減らせば確定するのが早いので、表示が軽くなります。
＃Operaが早いのは、この辺の処理が上手くやってるのかなあ。

今後変更があったときにでも簡単に差しかえれること。
画像と文章をきっちり別けておけば、差し替えはラクですよね。
文字が増えて可変したときにもレイアウトが崩れない様に作れば汎用性も高まります。

検索エンジンに引っ掛ける為に画像の文字はできるだけテキストに置き換える。
検索エンジンは当然テキストをサーチします。
画像の中の文字はサーチできませんから、当然の方法ですね。


他にも正解の条件はあるんですが、これだけ満たせば上出来だと思います。
プロと素人の境目って実はここかもしれません。