Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
  • 締切済み

CSS #containerについて

えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に100%にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです>< どなたか原因がわかる方、対処法わかる方 いましたらお願いします>< ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー1</a></li> <li><a href="">めにゅー2</a></li> <li><a href="">めにゅー3</a></li> <li><a href="">めにゅー4</a></li> <li><a href="">めにゅー5</a></li> <li><a href="">めにゅー6</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

スタイルシートに手をつける前にHTMLをきちんと学びなおしたほうが得策です。 DOCTYPEを<!DOCTYPE html>と書かれているところからHTML5を想定されているのだと思いますが、HTML5の目的は大きく二つあります。 ・セマンティクウェブ ・canvasやvideo、formの拡張などインタラクティブな部分  セマンティクウェブでは、文書構造をマークアップすることが強く求められます。これはHTML4.01の時代もそうだった 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 のですが、HTML5では、これでは抽象的過ぎて理解されなかったために、HTML5では、わざわざ新しい要素が追加されました。すなわち、header(文書のヘッダ),section(本文),footer(フッタ),nav(ナビゲーション),aside(本文と関係ないコラなど),figure(挿絵的要素),article(ヘッダー、本文、フッターを持ちうる独立した記事)。これは、HTML4.01の時代、それぞれ<div class="header"><div class="section"><div class="footer">・・・のように書くように推奨されていたものです。  これはHTML5だと <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body>  <header>   <h1>header</h1>   <nav>    <ul>     <li><a href="">めにゅー1</a></li>     <li><a href="">めにゅー2</a></li>     <li><a href="">めにゅー3</a></li>    </ul>   </nav>  </header>  <section>   <h2>本文見出し<h2>   <p>記事</p>   <nav>    <h3>目次<h3>    <ul>     <li><a href="">めにゅー1</a></li>     <li><a href="">めにゅー2</a></li>     <li><a href="">めにゅー3</a></li>    </ul>   </nav>  </section>  <footer>   <h2>文書情報</h2>  </footer> </body> </html> HTML4.01だと下記のようになります。 この様にHTMLも極めてシンプルになります。そして誰が見ても--検索エンジンのロボットが見ても、どこに何が書かれているか一目で判る。  その上でスタイルシートでデザインして行きますが、スタイルシートもこの文書構造に従いますから、とっても簡単になります。あとから誰が見ても理解できる。 HTML4.01とスタイルシートの実例(幅は640~900pxに制限してあります。) タブは_に置換してあるので戻すこと  こんなにシンプルでわかりやすくなるのですよ。(HTMLさえきちんと書けていたら) headerbg,sidebar,main,contentsmenueなど意味不明なclass名を付けたら後で見直してもわからないし、そもそも検索エンジンが理解してくれませんよ。HTML5の新しい要素( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )を参考にすると良いです。そのまま<div class="section">を<section>に変えればHTML5になります。 ★後は自分で工夫してみてください。 <!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=utf-8"> _<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;} body{background: url('hana3.jpg') fixed;font-size: 20px; font-family: Verdana, Arial serif;/* 必ず総称ファミリ名をつける */ } div.header,div.section,div.footer{ background-color: rgba(255,100,0,0.5); max-width:900px;/*幅広ディスプレイ用 */ min-width:640px;/* スマホなど狭いディスプレイ用 */ margin:0 auto; } h1,h2{margin:0 40px;} div.header div.nav{width:100%;} div.header div.nav ul,div.header div ul li{list-style:none;margin:0;padding:0;text-align:center;} div.header div.nav ul li{display:inline-block;width:20%} div.section{position:relative;min-height:600px; /*判りやすくするため高さを指定しておく */ } div.section>*{margin-left:200px;} div.section div.nav{margin:0;position:absolute;width:200px;top:0;left:0; height:100%;background-color:white; } --> _</style> </head> <body> _<div class="header"> __<h1>header</h1> __<div class="nav"> ___<ul> ____<li><a href="">めにゅー1</a></li> ____<li><a href="">めにゅー2</a></li> ____<li><a href="">めにゅー3</a></li> ___</ul> __</div> _</div> _<div class="section"> __<h2>本文見出し</h2> __<p>記事</p> __<div class="nav"> ___<h3>目次</h3> ___<ul> ____<li><a href="">めにゅー1</a></li> ____<li><a href="">めにゅー2</a></li> ____<li><a href="">めにゅー3</a></li> ___</ul> __</div> _</div> _<div class="footer"> __<h2>文書情報</h2> _</div> </body> </html>

すると、全ての回答が全文表示されます。

関連するQ&A