第三回 [テーブルレイアウト] | FireWorksとDreamWeaverでオーサリング

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

誰も聞けない聞いてはいけない
HTMLオーサリング技法

~ファイアワークスとドリームウィーバーでオーサリング~

いざ、テーブルレイアウトへ。どう書けばいいのかまよってるので、訂正加筆修正入りまくります。


 

1

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

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

つーことができます。

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

 

2

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

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

 

3

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



ここの原稿はこれ。



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


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

 

4

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

 

 

5

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



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

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

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

 

6

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

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

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

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

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

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

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


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

Written by Takayuki [email protected] 2002/12/05 Updated.


作成日
2008.05.04 (日)
最終更新日
2009.03.10 (火)
作成者
Takayuki Hirosawa
  • speed_fish 引っ越ししてからつなげていなかったとても古いnetgearのnas。今日つなげようとしたらlan経由で全くつながらず。windows10が勝手にsmb1を切り捨ててたと判明するまでに3時間。httpでもpingでもつながるのにos… https://t.co/Ejd7om16t0 2018-04-24 11:41:09
  • speed_fish modxからevoが切り離しかー。まあrevoとはもう別物感溢れてたし良いんじゃないでしょうか。やりやすくなるといいなー。 2017-04-28 20:33:09
  • speed_fish Chromeの57から頻発している、ERR_BLOCKED_BY_XSS_AUDITOR。試してみたけど、hidden含め入力項目にJavaScriptが入っても発生。HTTPS化していないフォームはまあ当然発生かな。 2017-04-10 18:00:57
  • speed_fish modxサイトをcloudflare化でeFormで引っかかる。中身みたらsite_urlでリファラーチェックしてました。ssl flexibleを使おうとしてたので、eFormを改造。パラメータにsiteurlを追加しましたとさ。#modx #cloudflare #eform 2017-03-04 00:44:09
  • speed_fish メモメモ。MODxでAMP対応するスニペット。 GETのURLが気に食わないのでリライトかな。 https://t.co/Oa9qzQ5dOr 2017-02-03 01:10:54