Tableレイアウトでは寸分の狂い無くできていた配置ですが、
久しぶりにHPを制作しようとしたら今はCSSレイアウトな世界になってきて
いるので今回はそれでやろうとして手法を調べていますが、
Tableレイアウトと比べて画像の配置がブラウザによって狂ってどうにもなりません。
IE7ではOKでもFirefoxやIE6では配置がずれるなど。
やりたいのは、ヘッダーエリア(width:750px,height:100pxくらい)の配置なのですが、このヘッダーエリアの中に「お問い合わせ」や「サイトマップ」という画像での名称兼リンクボタンを配置させたいのですが、
・「お問い合わせ」は左から536px、上から15px
・「サイトマップ」は左から639px、上から15px
の位置に寸分の狂い無く配置を希望しています(その上でマウスオーバーで画像入れ替えも行う)。
position:absoluteを使用すると可能ですが、これですと他の全ての箇所もabsoluteにしなくてはならなくなり、非常に制作に手間がかかってしまいます。
abloluteでなくピシッと配置させる方法はないものでしょうか。
No.1ベストアンサー
- 回答日時:
ブラウザのバグや、表示差など把握出来てない内は難しいかもしれませんね。
慣れればtableより楽だと思うのですが。
場所が決まってるならやっぱりpositionが早いと思いますよ。
これが面倒ってことはXHTMLのコーディングそのものに問題があるのかも。
positionは親要素にrelativeを指定すると、子要素でabsoluteしたときの数値が
親要素を基準としたものになります。
メニューだとulとかに入れてabsoluteつけたり。
absolute以外だとpaddingとかmargin駆使する方法になるでしょうか。
ソースがどんなものか分からないので具体的なことは書けないですが
位置に関係するプロパティってmargin、padding、position、floteくらいしかないですから。
> positionは親要素にrelativeを指定すると、子要素でabsoluteしたときの数値が
> 親要素を基準としたものになります。
なるほど!
これは使えます!
改行問題の回答になりそうです!
ありがとうございました
No.2
- 回答日時:
そんなに手間がかかるとも思えないのですが。
「ヘッダーエリア(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レイアウトの方が楽であり、企業のサイトというわけでもないのなら、それで行くというのも個人の勝手ではありますけど。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
画像イメージの上下左右、欲し...
-
Media Queries 4 で 非推奨とな...
-
css初心者 フレックスボックス...
-
CSSでボックスのheightが0になる
-
CSSで画像を同じ位置に重なり合...
-
<div>と<div>の間の10px程の...
-
tableタグで作るような表をCSS...
-
font-sizeが効かない
-
ブラウザの文字サイズを変更す...
-
ホームページのメニュー
-
widthやheightの数値に単位(px...
-
float: leftで横に並べたら、サ...
-
スクロールボックスを中央に配...
-
画像の上に、背景を表示させテ...
-
CSSで指定した背景画像にリンク...
-
Internet Explorer 6による不具合
-
CSSについて
-
W3Cのソースコードの検証サービ...
-
インラインスタイルシートで見...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
CSSがなぜかfont-sizeだけ効か...
-
【CSS】ヘッダーの高さが不明の...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
スクロールボックスを中央に配...
-
<div>と<div>の間の10px程の...
-
CSSで背景画像を一番下にもって...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
Media Queries 4 で 非推奨とな...
-
CSSでボックスのheightが0になる
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
定義リストに下線をつけたいと...
-
背景が下まで表示されないんです。
-
footer を横幅いっぱいに広げる...
おすすめ情報