プロフィール

バジさん

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

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

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

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

Web標準の教科書

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


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

話を戻して脱テーブル工事、まずは下準備です。

テーブル内に含まれているものを外に出すので、まずそれらをタグでくくってやる必要があります。
以下の(図3)のような形にまずしてみます。

テーブルを解除、タグでくくりなおす


本来不要なものは削除なので、当然スペーサーも削除です。
しかしスペーサーを無くしたことにより、後々予想以上の工数を発生させました。
ですが、やはりスペーサーを使うのはあまりにも美しくありません。

この時点ではCSSはまだ設定していません。
ここからCSSでテーブルレイアウト風に見せていくわけです。
個人的にはレイアウト済みのデザインからCSSをカットしてやって、ずらっと縦に各要素が並んでいくのを見るのは気持ちよいので好きです。

完成型は“自前サイトの「脱テーブルレイアウト」(その2)”で紹介した(図1)です。
これだけ余白バランスをデザインとして取り入れていると結構面倒なもんです。

CSSでテーブル風レイアウトを実現する場合のポピュラーな方法は以下のようなものがあります。

・float による回り込み
・position で絶対位置を指定


完成型は余白が多いのでどちらでやっても面倒ですが、今回は float での回り込みを選択。

では、どこをどう回しこむのでしょう?
って、(図3)を見れば簡単にわかってしまいますが、リスト化したメニューボタンのブロックとコンテンツのブロックを左右に並べてやります。
リスト化したボタン群とコンテンツ部分をそれぞれ div でくくってやりブロック要素とします。

このような時には div(ブロック)や span(インライン)はとても便利ですが、あまり div を使いまくったソースを書いていると「divマニア」とか言われたりするのでご注意を。

このブロックを float を使って左右に配置してやれば、一気に完成型に近づきました。
あとは(図1)に近づけるべくCSSでレイアウトしていきます。
ですが・・・、何気にここからの微調整が面倒なのです。
ブラウザ間によって微妙にCSSの解釈の仕方が違うのが問題です。

(その5へ続く)
スポンサーサイト


デザイン・コピーの話 | 【2006-06-02(Fri) 00:28:53】 | Trackback:(0) | Comments:(2)
コメント
レイアウトも大変ですねー。
確かに、ブラウザで微妙にずれたりするのはなんなんですかね。
どうせなら、全く違う方が分かりやすいのですが。
2006-06-04 日 19:38:38 | URL | 社員1号 #X86N/.ag [ 編集]
ブラウザの開発とCSSの仕様を決めているのが別なのです~。

で、各ブラウザによって解釈の仕方が違うと・・・

ちなみに普段、こういうので悩むのはHTMLコーダーさんかな。
僕らは普段は偉そうに口出しするだけです。笑
2006-06-04 日 22:33:04 | 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フィード
最近の記事
最近のコメント
最近のトラックバック
リンク