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で質問しましょう!
似たような質問が見つかりました
- Windows 10 ネットからファイルをデスクトップにダウンロードする際、既存のファイルの並びが崩れてしまう 4 2022/04/19 08:20
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- ホームページ作成・プログラミング アニメ公式サイト風なWebページを作りたいです。 無料のテンプレートはありますか? 2 2022/04/02 11:33
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- Illustrator(イラストレーター) 会社の名刺作成時にロゴを配置する方法 3 2023/06/06 18:06
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- ホームページ作成・プログラミング グリッドレイアウトHTMLとCSS 1 2023/02/22 02:36
- 病院・検査 病院のレイアウトについて。 病院を建てる上で、患者を効率よく治療できるようなレイアウトは、どうすれば 3 2023/02/09 20:41
- Illustrator(イラストレーター) Illustratorでオブジェクトの色が勝手に変わって困っています。 4 2022/09/04 18:47
- HTML・CSS svgクリップパスの応用コーディング方法 2 2022/04/09 09:07
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
<li>の黒い点を消したい。
-
CSSで画面サイズを縮小するとレ...
-
CSSの角丸での質問です。 今、C...
-
div領域をウインドウサイズに合...
-
CSS、width100%でもできる余白
-
HTMLで、リストの一番上だけ、...
-
「dt」「dd」の内容を一列で表...
-
CSSでテーブルボーダーを表示さ...
-
押すとページを移動するボタン
-
IEの印刷プレビューでレイアウ...
-
W3Cのソースコードの検証サービ...
-
form input テキストを上下中央...
-
表示倍率を変えるとレイアウト...
-
CSS(0の単位)について
-
定義リストに下線をつけたいと...
-
日本地図(白地図的)にリンク...
-
背景が下まで表示されないんです。
-
画像イメージの上下左右、欲し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報