重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

CSSを使用したHPの左メニューとフッターについて

解決済

  • 質問者：noname#181544
  • 質問日時：
  • 回答数：4件

CSSを使用したホームページを作成しています。
左メニューとメインコンテンツ部分があります。
2点ほど、ご教授頂けますと幸いです。

1.左メニューの背景色について
現在、左メニューの背景色がメニュー周りのみとなっています。
これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。

2.ブラウザのサイズ縮小によるフッターの表示について
現在、フッターを常に最下部で表示するように対応してみた所です。
ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。
こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？

以下ソースとなります。
宜しくお願い致します。


HTML
---------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title></title>
</head>
<body>

<div id="container">
<div id="header">
</div>

<div id="main">
<div class="category">
<h1>テスト</h1>
<div class="entry_body">
本文本文本文本文本文本文本文本文本文本文本文本文
</div>
</div>
</div>


<div id="side">
<div class="category">
<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 id="footer">
</div>

</div>
</body>
</html>
---------------------------------------------------------------


CSS
---------------------------------------------------------------
html, body {
height: 100%;
font-size:80%;
line-height: 140%;
letter-spacing:1px;
color: #333333;
background-color:#cccccc;
text-align: center;
margin: 0px auto;
padding: 0px;
}

a:hover {
text-decoration: none;
}

#container {
width:900px;
min-height:100%;
height:auto !important;
height:100%;
position: relative;
margin: 0px auto;
background-color:#FFFFFF;
text-align: left;
}

#header {
border-top:#003366 solid 10px;
margin: 0px 0px 0px 0px;
clear:both;
}

#main {
float:right;
width:688px;
background: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}

#main .category {
width:688px;
margin: 0px 0px 15px 0px;
}

#main h1 {
font-size:105%;
border-left:#003366 solid 6px;
border-bottom:#cccccc solid 1px;
height:17px;
font-size:120%;
font-weight:bold;
margin: 10px 10px 10px 10px;
padding: 11px 10px 10px 20px;
}

#main .entry_body {
margin: 15px 24px 15px 24px;
padding: 0px 0px 0px 0px;
}

#main ul {
margin: 0px 30px 0px 28px;
padding: 0px 0px 10px 0px;
}

#main ol {
margin: 0px 30px 0px 35px;
padding: 0px 0px 10px 0px;
}

#main li {
line-height: 140%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
}

#side {
float:left;
font-size:12px;
width:200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:#336699;
color:#FFFFFF;
}

#side .category {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}

#side h3 {
color:#FFFFFF;
background:#003366;
font-size:12px;
text-align:left;
font-weight:bold;
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
border:#6699cc 1px solid;
}

#side .entry_body {
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
background: #6699cc;
}

#side ul {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
background: #6699cc;
}

#side li {
line-height: 120%;
list-style:none;
margin: 5px 0px 5px 0px;
border:#336699 1px solid;
}

#side li a, #side li a:link, #side li a:visited {
color:#FFFFFF;
text-decoration:none;
display:block;
padding: 10px 10px 10px 10px;
}

#side li a:hover {
color:#333333;
background:#99ccff;
text-decoration: none;
padding: 10px 10px 10px 10px;
}

#footer {
width:900px;
height:10px;
background:#003366;
margin: 0px 0px 0px 0px;
position: absolute;
bottom: 0;
}
---------------------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (4件)

No.4ベストアンサー

  • 回答者： Questa
  • 回答日時：

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;/* 追加 */
}
    • good
    • 0
    • 件
通報する
この回答へのお礼

表示出来ました！
動作については内部用（IE6）を想定しておりますので、問題ありません。通常はcontainer2のように追加した方が良いのですかね？今後の参考とさせて頂きます。
有り難う御座いました！！

通報する
お礼日時：2011/09/19 14:41

No.3

  • 回答者： Questa
  • 回答日時：

◆ 修正案



(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 …）」をご覧ください。

この回答への補足

ご連絡ありがとう御座います。
希望していた動作となっています！
1点可能であれば、container2自体を追加しないで同じ動作となることは可能でしょうか？
HTMLは修正せず、CSSのみの修正で同じになればありがたいです。
若し可能であれば宜しくお願い致します。

補足日時：2011/09/18 17:05
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

希望されていることがよくわからないので、簡単な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_ … )
　Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )

★★★タブは＿に置換してありますから、元に戻す★

<!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>

この回答への補足

ご連絡有り難う御座います。
分かりづらく申し訳ありません。

私のをファイルへアウトプットして頂き、実際に見て頂きたいのですが、左のメニューの背景色を最上部から最下部まで、しっかりと色をつけたいと考えています。いまは、メニュー周りのみの状態です。
もう1点は、私のソースをブラウザで表示し、ブラウザ本体の上下を縮めた際に、フッターがメニューの上に表示されるような形になってしまっています。
通常はメニューとフッターは重ならない形なのですが、どのように対処したら良いか分かっておりません。
宜しくお願い致します。

補足日時：2011/09/16 21:23
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

HTMLやCSSのご教授有り難う御座います。
今後、書き方について再度見直してみます。
有り難う御座いました。

通報する
お礼日時：2011/09/19 14:44

No.1

  • 回答者： ORUKA1951
  • 回答日時：

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-html4 … )］より

　デザインやレイアウトを考えず、文書構造を表すのがHTMLです。CSSはHTMLがきちんと書かれていたら、そんな複雑怪奇なものでなく、極めてシンプルで何を書いているか解ります。HTMLを見なくてもレイアウトできるはず。

★正直、いくら読んでも何をしたいかわからない。
　簡単な図でも示してください。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報