Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？

Question

Tableレイアウトでは寸分の狂い無くできていた配置ですが、
久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて
いるので今回はそれでやろうとして手法を調べていますが、
Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。
IE7ではOKでもFirefoxやIE6では配置がずれるなど。

やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、

・「お問い合わせ」は左から536px、上から15px
・「サイトマップ」は左から639px、上から15px

の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。
position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。
abloluteでなくピシッと配置させる方法はないものでしょうか。

tenderfeel · Accepted Answer

ブラウザのバグや、表示差など把握出来てない内は難しいかもしれませんね。
慣れればtableより楽だと思うのですが。

場所が決まってるならやっぱりpositionが早いと思いますよ。
これが面倒ってことはXHTMLのコーディングそのものに問題があるのかも。
positionは親要素にrelativeを指定すると、子要素でabsoluteしたときの数値が
親要素を基準としたものになります。
メニューだとulとかに入れてabsoluteつけたり。

absolute以外だとpaddingとかmargin駆使する方法になるでしょうか。
ソースがどんなものか分からないので具体的なことは書けないですが
位置に関係するプロパティってmargin、padding、position、floteくらいしかないですから。

abril · Answer

そんなに手間がかかるとも思えないのですが。「ヘッダーエリア(width:750px,height:100pxくらい)」に配置させたい要素は、「左から536px、上から15pxにお問い合わせ」「左から639px、上から15pxにサイトマップ」の各リンクボタンだけですか？であれば、2つの画像の配置は上からの位置が同じですから、いずれも上の基点0からmarginもしくはpaddingで15px、同様に「お問い合わせ」は左の基点0から536px、「サイトマップ」は引算で残りの余白を与えればそれで済むのでは？以下は「お問い合わせ」及び「サイトマップ」の画像ボタンがW100px×H15pxであると想定した場合のサンプルです。"position: absolute;"は使用していません。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- --------------------------------------------------------------------- --------------------------------------------------------------------- 【CSS】 --------------------------------------------------------------------- body { padding: 0; margin: 0; } a { text-decoration: none; } img { border: none; } div#HEADER { width: 750px; height: 100px; padding: 0; margin: 0; } ul.navi { list-style: none; line-height: 0; padding: 15px 0 0 0; margin: 0 0 0 536px; } ul.navi li { display: inline; padding: 0; margin: 0; } ul.navi li#TO_SITEMAP { margin-left: 3px; } --------------------------------------------------------------------- 上記の検証結果はDOCTYPEがでもでも差はありません。 Windows XP上のIE6.0/IE7.0/Firefox2.0/Opera9.25、いずれも質問者様の条件を満たしたレイアウトで表示されております。ただしこれは、#HEADER内にこの2つの要素しか配置しない場合です（質問者様の文章にはそれ以上の事は書かれておりませんでしたので）。もし、#HEADER内にこれ以外にも要素があり（例えばサイトの名称やロゴ、検索窓など）それぞれがリキッドではないレイアウトを要求されているのであれば、positionを使わないわけにはいかなくなるケースが多いと思います。位置決めをするプロパティはANo.1の回答者様の仰るとおり、そこで挙げられているぐらいのもの（あとはpositionに併用して使うtopとleftぐらいですかね）に限られますので。まあでも、逆に言えばそれらのプロパティを使えば大概のレイアウトは実現可能です。それぞれのプロパティの意味と性質を理解すれば別に面倒ではなく、仮に位置関係を変更するな修正が入ったとしても、tableレイアウトをしていたら確実にセルの組み直しやデータの入れ替えといった様な手間が発生してしまい煩わしいですが、CSSでスタイルを設定しHTMLで適切なマークアップが出来ていれば、HTML側を全く編集しないでもCSSの修正一つでレイアウトを変更する事ができたりしますから。タグはレイアウトの為にあるものではないですしね。 ※とはいえ、tableレイアウトの方が楽であり、企業のサイトというわけでもないのなら、それで行くというのも個人の勝手ではありますけど。

Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？

ブラウザのバグや、表示差など把握出来てない内は難しいかもしれませんね。

そんなに手間がかかるとも思えないのですが。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング