- ベストアンサー
CSSを使用したHPの左メニューとフッターについて
- CSSを使用したホームページを作成しています。左メニューとメインコンテンツ部分があります。2点ほど、ご教授頂けますと幸いです。
- 現在、左メニューの背景色がメニュー周りのみとなっています。これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。
- 現在、フッターを常に最下部で表示するように対応してみた所です。ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？
- HTML
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
No. 3 の補足 > 1点可能であれば、container2自体を追加しないで同じ動作となることは可能でしょうか？ 一応可能ですが、ボックスを追加する場合よりも複雑な記述になります。 また、IETesterのIE7モードで表示が乱れました。更新ボタンで正常な表示になりましたが、実際のIE7での表示に不安を持っています。 Fx6, GC11, IE6, IE8は正常、IE9は未確認です。 ◆ 修正案 (HTML) 変更なし (CSS) #container { /* background-color: #FFFFFF; */ background: #fff url("幅200px.gif") repeat-y left top; /* 追加：メニュー部背景 */ overflow: hidden; /* 追加：for IE6以外 */ } * html #container { /* 追加：for IE6 */ overflow: visible; display: inline-block; /* 下と重複するが省略できない */ } * html #container { /* 追加：for IE6 */ display: block; } #header { background: #fff; /* 追加：メニュー部背景を隠す */ } #main { /*padding: 0px 0px 0px 0px;*/ padding: 0px 0px 10px 0px; /* 変更：footerの高さと同じ */ } #side { /*padding: 0px 0px 0px 0px;*/ padding: 0px 0px 10px 0px; /* 変更：footerの高さと同じ */ } #footer { left: 0; /* 追加 */ }
その他の回答 (3)
- Questa
- ベストアンサー率48% (13/27)
◆ 修正案 (HTML) container直下に header～sideを含むボックス（container2）を追加します。 <div id="container"> <div id="container2"> <!-- 追加 --> <div id="header"> </div> …（同じ）… </div> <!-- 追加 --> <div id="footer"> </div> </div> </body> (CSS) …（同じ）… #container { width: 900px; min-height: 100%; height: auto !important; height: 100%; position: relative; margin: 0px auto; /* background-color: #FFFFFF; */ /* 次行へ移動 */ background: #fff url("幅200px.gif") repeat-y left top; /* 追加：メニュー部背景画像、天地ぶち抜き */ text-align: left; } #container2 { /* 追加 */ padding-bottom: 10px; /* footerの高さと同じ */ overflow: hidden; /* clear代替 */ } #header { margin: 0px 0px 0px 0px; border-top: #003366 solid 10px; clear: both; background: #fff; /* 追加：メニュー部背景画像を隠す */ _zoom: 1; /* 追加：for IE6 */ } …（同じ）… ◆ 説明 1.左メニューの背景色について main,sideの floatを clearすると、floatボックスの最大高が親ボックスの高さになります。その状態で親ボックスに sideと同じ幅の背景画像を repeat-yで与えれば、ご希望の表示になるはずです。（古典的手法）。 2.ブラウザのサイズ縮小によるフッターの表示について floatを解除していないため main,sideの高さが containerの高さに含まれていません。min-height:100%がなければ footerは headerの直後に位置するはずです。修正案では float解除を overflow:hiddenで行っています。 container2の追加は、main,sideとfooterを重ねないためのものです。詳細は「フッタを常に下部に配置（http://www.lucky-bag.com/archives/2005/04/footer.html）」をご覧ください。
補足
ご連絡ありがとう御座います。 希望していた動作となっています！ 1点可能であれば、container2自体を追加しないで同じ動作となることは可能でしょうか？ HTMLは修正せず、CSSのみの修正で同じになればありがたいです。 若し可能であれば宜しくお願い致します。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
希望されていることがよくわからないので、簡単なCSSを書いてみました。 ★ウィンドウ幅をどんなに変えても（小さなウィンドウでも）４つの枠になります。 ★基本はウィンドウ幅の80%ですが、最小450px(i-phone)、最大900pxです。 ★縦は本文記事の内容量に合わせて伸縮しますが、ナビゲーションの縦サイズを確保するため200pxより低くならないようにしてあります。 ★heightは、非置換要素の場合ウィンドウサイズを参照できません。 html, body {height: 100%;}はダメ!! ★floatは、ブロックの配置には原則として使わない。本文中でfloat(本来の使い道)が使えなくなります。 ★HTMLが文書構造をきちんと書かれていると、CSSはシンプルになり、HTMLを見なくても書けるはずですし、何よりもメンテナンスが楽です。下のスタイルシートは、HTMLを見なくても意味が読み取れると思います。 HTMLもCSSも、よくわかると思います。当然検索エンジンにもね。 ※同じプロパティを何度も書かなくて済むようにセレクタはグループ化してあり、継承されるプロパティは親要素に指定してあります。 ※必要なときは、詳細度を高くして上書きしてあります。 ウェブ標準でHTML4.01strict,CSS2.1で書かれています。 なお、下記で検証してあります。 W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★★★タブは＿に置換してありますから、元に戻す★ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- html,body{ ＿margin:0;padding:0; ＿color: #333333;background-color:silver; } p{text-indent:1em;} div.header, div.article, div.footer{ /* 共通するプロパティはセレクタをグループ化する */ ＿width:80%; ＿margin: 0 auto; ＿max-width:900px; } div.header,div.article, div.article div.nav,div.footer{ ＿background-color:white; ＿border:white 1px solid; } div.header{ /* ヘッダ */ ＿background-color:blue; ＿border-color:blue; ＿color:red; } div.article{ /* 記事 */ ＿position: relative; } div.article div.section{ ＿margin:0 1em 0 31%; ＿min-height:200px; /* ナビゲーションの最大サイズ */ } div.article div.nav{ ＿width:30%; ＿position:absolute; ＿top:-1px;left:-1px; ＿height:100%; ＿background-color:#336699; ＿color:#FFFFFF; ＿border-color:#336699; } div.footer{ ＿background-color:#003366; ＿color:white; ＿border-color:#003366; } --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>見出し</h1> ＿＿<div class="abstract"> ＿＿＿<h2>要約</h2> ＿＿</div> ＿</div> ＿<div class="article"> ＿＿<div class="section"> ＿＿＿<h1>テスト</h1> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>ここに本文が入る。本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿＿<p>本文本文本文本文本文本文本文本文本文本文本文本文</p> ＿＿</div> ＿＿<div id="navigation" class="nav"> ＿＿＿<h3>メニュー</h3> ＿＿＿<ul> ＿＿＿＿<li><a href="../test1/">test1</a></li> ＿＿＿＿<li><a href="../test2/">test2</a></li> ＿＿＿＿<li><a href="../test3/">test3</a></li> ＿＿＿＿<li><a href="../test4/">test4</a></li> ＿＿＿＿<li><a href="../test5/">test5</a></li> ＿＿＿</ul> ＿＿</div> ＿</div> ＿<div class="footer" id="DOCUMENT_INFORMATION"> ＿＿<dl class="document-version"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2005-06-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2005-06-10 12:00:00 (JST)</dd> ＿＿</dl> ＿</div> </body> </html>
お礼
HTMLやCSSのご教授有り難う御座います。 今後、書き方について再度見直してみます。 有り難う御座いました。
補足
ご連絡有り難う御座います。 分かりづらく申し訳ありません。 私のをファイルへアウトプットして頂き、実際に見て頂きたいのですが、左のメニューの背景色を最上部から最下部まで、しっかりと色をつけたいと考えています。いまは、メニュー周りのみの状態です。 もう1点は、私のソースをブラウザで表示し、ブラウザ本体の上下を縮めた際に、フッターがメニューの上に表示されるような形になってしまっています。 通常はメニューとフッターは重ならない形なのですが、どのように対処したら良いか分かっておりません。 宜しくお願い致します。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
HTMLは文書構造にしたがってマークアップしましょう。さすれば、CSSを悩むことは無い。 ナビゲーションリンクを本文の高さに収めると言うことは、本文の一部ということですから本文内に記述されるはずです。すなわちHTMLは、 <body> <div class="header"> <h1>見出し</h1> <div class="abstract"> <h2>要約</h2> </div> </div> <div class="article"> <div class="section"> <h1>テスト</h1> <p>本文本文本文本文本文本文本文本文本文本文本文本文</p> </div> <div class="section"> <h1>テスト</h1> <p>本文本文本文本文本文本文本文本文本文本文本文本文</p> </div> <div id="navigation" class="nav"> <h3>メニュー</h3> <ul> <li><a href="../test1/">test1</a></li> <li><a href="../test2/">test2</a></li> <li><a href="../test3/">test3</a></li> <li><a href="../test4/">test4</a></li> <li><a href="../test5/">test5</a></li> </ul> </div> </div> <div class="footer" id="DOCUMENT_INFORMATION"> <dl class="document-version"> <dt id="FIRST-PUBLISHED">First Published</dt> <dd>2005-06-10</dd> <dt id="LAST-MODIFIED">Last Modified</dt> <dd>2005-06-10 12:00:00 (JST)</dd> </dl> </div> </body> </html> 位でよいはずです。 デザインのために、IDやclassやその名前をつけてしまうと、スタイルシートを書くときに「訳解らん」になってしまいます。 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より デザインやレイアウトを考えず、文書構造を表すのがHTMLです。CSSはHTMLがきちんと書かれていたら、そんな複雑怪奇なものでなく、極めてシンプルで何を書いているか解ります。HTMLを見なくてもレイアウトできるはず。 ★正直、いくら読んでも何をしたいかわからない。 簡単な図でも示してください。
お礼
表示出来ました！ 動作については内部用（IE6）を想定しておりますので、問題ありません。通常はcontainer2のように追加した方が良いのですかね？今後の参考とさせて頂きます。 有り難う御座いました！！