プロフィール

バジさん

Author:バジさん
 
所在 : 東京某所
職業 : Webディレクター
性別 : 男
 
課題 : 早起き
 
目標 : 株で生活

カテゴリー
推薦図書 その1

Webディレクション標準ガイド

■HTMLリファレンスなどと一緒にいつでも手の届く場所に置いておきたい一冊。
推薦図書 その2

Web標準の教科書

■全てのWebクリエイターに必携の書
FC2ブログランキング
ブロとも申請フォーム
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
自前サイトの「脱テーブルレイアウト」(最終回)
前回の続きです。

こうなったら禁断(?)の絶対位置指定で!
これは細かなピクセル計算が正直面倒、でも今思いつくのはそれくらいなので。

まずは body 全体の margin と padding を見直し、各ブラウザ間で違いがないように統一。
(今見直すとこの辺、若干手を抜いていたところがありました。反省。)

すでにサイトタイトルやコンテンツ表示部分の位置は決まっているので、絶対位置で指定するのはリスト化したボタン群。
サンプルの図ではボタンは5個しかないですが、実際は14個ありました。

あ~、面倒、と思いながらも、ボタン画像の高さと余白を考慮しながら計算機で各ボタン左上の座標を決定。
計算上はこれで一番上のボタンの上辺と一番下のボタンの下辺が、右のコンテンツ表示部分とバッチリ揃うはず!

これはCSSの position:absolute で実現します。

で、これで完璧じゃろー、と思い表示チェック!
まずIE、おし、完璧!
おそるおそる他のブラウザでもチェック・・・、いやー完璧!
とは言わないまでもおおむねオッケー。

でも、やっぱり微妙に(ほんと1~2px)誤差は発生しました。
図でみると外枠があると思いますが、これもCSSで設定しているし、カウンターの高さが正確かどうか自信なし。
カウンターはISPのサービスを利用しているため、ローカルでは表示して確認ができないのです。
ということでカウンターの width、height属性を決定、これでバリデータでのチェックも点数が上がるだろう。

これにて自前サイトの「脱テーブル工事」は無事終了!
CSSをカットすると気持ちよく左に寄り縦一直線に!
バリデータでのチェックも無事90点を超えました。

ただし、宿題はできました。ボタンの高さを揃えるところですね。
絶対位置での指定はオススメできません。
なぜかというと、これはメンテナンスがめちゃくちゃ面倒になります。

例えば、今回も最後に各パーツの余白を微調整したわけですが、一箇所調整をおこなうごとにボタンの絶対位置を全て再計算しなければなりません。
これではビジネスの場においてはメンテナンス性が悪く最悪です。
今回はあくまでも個人サイトであり、数時間という短い工数であったための妥協ということです。

ただ、前にも話しましたが、このブログのように3列組にするくらいなら、今回苦労した部分は考えなくてもよいわけです。
普通に float で回し込んで余白の微調整をすれば終了です。
高さを完璧に制御しようとした結果、このように煩雑になりました。(しかもあまりよい例ではない)
意味のない画像とはいえどスペーサーの力は恐るべし!です。

以上で長らく続いた連載も終了です。
脱テーブルレイアウトをチャレンジしてみたい方の参考になれば幸いです。
スポンサーサイト


デザイン・コピーの話 | 【2006-06-06(Tue) 00:44:40】 | Trackback:(0) | Comments:(4)
コメント
絶対指定はまさに最終兵器ですねw

私の会社ではテーブルレイアウトは完全廃止なので、どんなレイアウトでも(無理矢理w)スタイルシートでなんとかしています。

とは言えそれほど複雑なレイアウトのものはないのですが。

しかしブラウザによって見え方が変わるのは永遠に解消されなさそうですね。
2006-06-07 水 12:37:19 | URL | ハマー #- [ 編集]
お返事遅れてすみません。

アホみたいにハードスケジュールで過労死寸前です。
本日もまだ会社にて・・・

テーブルレイアウトの完全廃止の会社とは・・・
すぐに思いつくのはあそこだ~、もしや!?
2006-06-09 金 02:45:15 | URL | バジさん #3fP8K/.I [ 編集]

深夜までご苦労さまです。
もしかして徹夜でしょうか・・・?

もしや?とのことですが、たぶん違います(^^;

うちの会社は人数は多いですがそれほど有名じゃないですよ~。
特に東京ではw
2006-06-09 金 19:16:18 | URL | ハマー #- [ 編集]
今週はオールタクシーでしたが、徹夜はしませんでした。

多分違うのかぁ~。
東京の会社じゃないのでしょうか。

ちょっと気になります。w
2006-06-11 日 00:12:09 | URL | バジさん #3fP8K/.I [ 編集]
コメントの投稿
管理者にだけ表示を許可する

カレンダー
03 | 2019/04 | 05
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 - - - -
月別アーカイブ
ブログ内検索
RSSフィード
最近の記事
最近のコメント
最近のトラックバック
リンク