ホームページ作成に関する質問

質問

現在ホームページを次のようなレイアウトで作っています。

-----------------------------
-----------------------------
　　　　　(1)ヘッダー　　　　
-----------------------------
(2)リンク｜
---------
(3)リンク｜　(5)コンテンツ
---------
(4)リンク｜
---------
-----------------------------
　　　　　(6)フッター　　　　
-----------------------------
-----------------------------

各ボックスをdiv要素で作っているのですが、(5)、(6)の配置がうまくいきません。
(5)をcssの
position:relative;
で相対位置を指定して配置すると、(6)が離れた下のほうにできてしまいます。誰かよい配置法を知っておられたらご教授願います。

回答No.3

tkmojo · ベストアンサー

そのやり方ではたぶん出来ません。
(1)～(4)までpositionの指定をせずに、(5)にいきなりposition:relative;を入れて位置を調整したのでは
(6)は(4)の下から(5)が始まった場合の位置に居たまま動きません。
(6)にpositionを入れて無理やり上に上げても、今度は(6)の下に大きな隙間が空くはずです。

positionでレイアウトするなら、
(1)～(6)までをまず一つのdivで囲み、その大枠のdivにposition:relative;を入れ、
(1)～(6)にposition:absolute;を入れてそれぞれ位置指定をすればできます。

しかし、positionでレイアウトした場合はピクセルでガチガチに位置を固定していますので、
ブラウザで文字サイズを変更などした場合に、コンテンツの内容が枠からはみ出してしまったりします。
基本的にpositionでのレイアウトは、全体のレイアウトには向かず、
画像しか使用していない場所（ヘッダーなど）で局地的に用いるのが向いていると個人的には思います。

今回の場合はやはりfloatでレイアウトしましょう。
まず一番簡単な方法を書きます。
とりあえず(2)(3)(4)をひとつのdivで囲み、ヘッダー、レフトナビ、コンテンツ、フッターの4つのブロックに分けます。

【1】レフトナビにfloat:left;を入れて左寄せします。
【2】コンテンツにも同じくfloat:left;で左寄せ。
【3】フッターはclear:both;でfloatを解除。
※レフトナビとコンテンツ（要はfloatを入れるボックス）には必ず横幅の指定を入れるようにしましょう。

これで、とりあえず目的の配置はできます。
しかしこのままでは背景色や背景画像が切れてしまったり、フッターとの位置調整がしにくかったりしますので、
それが気になる場合はレフトナビとコンテンツをひとつのdivで囲み、そのdivにclass="cleafix"を記述しましょう。
clearfixは検索するとそのままコピペで使えるサンプルがたくさん出てきますので、
躊躇なくcssファイルにコピペしましょう。

注意点として、floatを使った場合は、ie6で同じ方向のmarginが2倍になってしまうというバグがあります。
(float:left;とmargin-left:10px;を一緒のボックスに入れるとIE6だけmargin-leftが20pxになる)
その場合はうまくpaddingや別のボックスのmarginを使って回避しましょう。

上には書いてませんが、一番外に全体を囲むdivを作れば、色々レイアウトしやすいと思います。（全体のセンター寄せなど）
とりあえずいろいろやってみて、がんばってください。

※上記のアドバイスはリキッドレイアウトではなく、横幅が固定されているサイトの場合です。

お礼

回答を参考にして、目的のレイアウトをつくることができました。
詳しく説明してくださり、有難うございました。

回答No.2

abril

No.1です。

> 初心者ゆえ、マークアップ等の言葉はわかりませんが、

そうですか。マークアップというのは所謂コーディングと解釈しておいて下さい（厳密には同じじゃないですが）。つまり、No.1での補足要求は、実際のHTMLソースも（CSSと共に）見せてください、という事でした。

> もう少し具体的な説明をさせていただきます。

…うーん、やっぱりあんまり具体的じゃないので、以下は想像で補いながら。

> 画面中央にdivコンテナを配置し、

これは、(1)～(6)のコンテナを内包する一番親のコンテナですね？<div id="wrapper">～</div>という感じの。

> その中に(1)～(6)のカラム(というのでしょうか)

カラムは段組、という意味ですからこの場合のカラム組の対象は、(2)～(4)が左カラム、(5)が右カラム、ですね。

> (1)～(4)については、positionもfloatも指定していません。

(1)はヘッダーですし必要ないでしょうね。が、(2)～(4)にはpositionもfloatも使ってない、ということは(5)のtopとleftの値は実際にはどう指定されているのですか？コーディングの順番が(2)～(4)→(5)ならば、当然(5)のtopはマイナス値・leftは(2)～(4)の左カラムの幅以上の値が取られている筈ですが。

> この時点でコンテナの下側が間延びします。(6)を配置するとコンテナの最下に配置されるので、(5)と間が空いてしまいます。

コーディングの順番が(5)→(6)で、(6)に配置関係のプロパティが何も与えられていないのであれば当然そうなりますね。

> 適切なカラムレイアウトの方法

非常によくある2カラムのレイアウトですし、左カラムと右カラムの高さが成り行き（高さを固定値にできない）なのであれば、おそらくpositionを使うよりもfloatを使った方が現時点では理解しやすいかと思います。ただし、大抵の場合floatを使う際には適切な場所でfloatの状態を解除するという指定がセットで必要になってきますが、そこさえ気を付ければ楽にできます。

現在のHTMLとCSSのソースを公開して頂けるのであれば、それを元に具体的な修正箇所をアドバイスする事もできますが、もしそれができないのであれば、下記などを参考にして見て下さい。とてもわかりやすいと思います。
【参考】http://www.geocities.jp/multi_column/

上記を最初からじっくり読めばもうお望みの2カラムレイアウトはすぐ実現できると思います。上記にも書いてありますが、(2)～(4)の左カラムと(5)の右カラムのカラムレイアウトをfloatで実現した場合、(6)のフッターにclearプロパティを指定するというのがよく使われる手法です。

お礼

回答を参考にして、目的のレイアウトをつくることができました。
詳しく説明してくださり、有難うございました。

回答No.1

abril

> (5)をcssのposition:relative;で相対位置を指定して配置すると、

ということは、(2)～(4)と(5)のカラムレイアウトはfloatではなくpositionで行っているのですか？
だとしたら(5)の前後に登場する(2)～(4)と(6)のpositionと基点からの位置はそれぞれどう指定されているのでしょう？
とにもかくにも、具体的な(1)～(5)のマークアップとCSSがわからないと、上記の情報だけ切り出されても原因の特定はできかねます。

お礼

ご回答有難うございます。
初心者ゆえ、マークアップ等の言葉はわかりませんが、もう少し具体的な説明をさせていただきます。
　レイアウトは、画面中央にdivコンテナを配置し、その中に(1)～(6)のカラム(というのでしょうか)を配置しています。(1)～(4)については、positionもfloatも指定していません。(5)について、そのまま配置すると(4)の下にきてしまうので、辞典でposition:abusoluteプロパティを調べて使っています。画面で確認しながら、topとleftの値をいじって調整しています。これで配置はできますが、この時点でコンテナの下側が間延びします。(6)を配置するとコンテナの最下に配置されるので、(5)と間が空いてしまいます。
　手元にHTML,css,javascriptの辞典しかありません。あと某大学のホームページのHTMLを参考にして、cssは自前で作ってます。できれば適切なカラムレイアウトの方法について教えていただけると有難いです。
よろしくお願いいたします。

補足

質問者補足：
お礼の文中、position:absoluteというのはposition:relativeの誤りでした。失礼いたします。