- ベストアンサー
Tableレイアウトで寸分の狂い無くできていた配置をCSSレイアウトでおこなう術とは？
Tableレイアウトでは寸分の狂い無くできていた配置ですが、 久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて いるので今回はそれでやろうとして手法を調べていますが、 Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。 IE7ではOKでもFirefoxやIE6では配置がずれるなど。 やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、 ・「お問い合わせ」は左から536px、上から15px ・「サイトマップ」は左から639px、上から15px の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。 position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。 abloluteでなくピシッと配置させる方法はないものでしょうか。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
そんなに手間がかかるとも思えないのですが。 「ヘッダーエリア(width:750px,height:100pxくらい)」に配置させたい要素は、「左から536px、上から15pxにお問い合わせ」「左から639px、上から15pxにサイトマップ」の各リンクボタンだけですか？であれば、2つの画像の配置は上からの位置が同じですから、いずれも上の基点0からmarginもしくはpaddingで15px、同様に「お問い合わせ」は左の基点0から536px、「サイトマップ」は引算で残りの余白を与えればそれで済むのでは？ 以下は「お問い合わせ」及び「サイトマップ」の画像ボタンがW100px×H15pxであると想定した場合のサンプルです。"position: absolute;"は使用していません。 --------------------------------------------------------------------- 【HTML】 --------------------------------------------------------------------- <div id="HEADER"> <ul class="navi"> <li id="TO_CONTACT"><a href="#"><img src="./images/hogehgoe_01_off.gif" alt="お問い合わせ" width="100" height="15"></a></li><!-- --><li id="TO_SITEMAP"><a href="#"><img src="./images/hogehgoe_02_off.gif" alt="サイトマップ" width="100" height="15"></a></li><!-- --></ul> </div> --------------------------------------------------------------------- --------------------------------------------------------------------- 【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が <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> でも <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> でも差はありません。 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レイアウトの方が楽であり、企業のサイトというわけでもないのなら、それで行くというのも個人の勝手ではありますけど。
お礼
テーブルレイアウトはもうやりたくないので頑張ります。 たくさんありがとうございました。
お礼
> positionは親要素にrelativeを指定すると、子要素でabsoluteしたときの数値が > 親要素を基準としたものになります。 なるほど！ これは使えます！ 改行問題の回答になりそうです！ ありがとうございました