- 締切済み
トップページの横幅を画面いっぱいに表示させたい。
トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/ｘｘｘ.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ごく簡単な例をHTML4.01strictとHTML5で上げておきます。 ウィンドウ幅は、スマホの480px以上だと追随します。幅広ディスプレイでは1200px幅で中央 ★ウィンドウ幅を変化させて確認 白文字なので印刷では適用されません。印刷プレビューで確認 ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )のDATA ⇒W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み HTMLには文書構造しか書かない!! ★タブは＿に置換してあるので戻すこと!! [HTML4.01] <!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 http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css" media="screen"> <!-- html,body{ margin:0;padding:0; background-color:black;color:white; } div.section,div.footer{ width:100%;min-width:480px;max-width:1200px;margin:0 auto; } h1,h2,h3,p{margin:0;line-height:1.6em;} div.header{position:absolute;z-index:10;width:100%;} div.header h1,div.header p{ width:100%;min-width:480px;max-width:1200px;margin:0 auto; } div.section{ width:100%;min-height:430px; background:url(./images/1200_510.jpg) 50% 50%; background-size:cover; padding-top:80px; } div.footer ul,div.footer ul li{ list-style:none;margin:0;padding:0; text-align:center;line-height:30px; } div.footer ul{margin:15px 10px;} div.footer ul li{ display:inline-block; width:10%;height:30px;position:relative; padding:0 5px; } div.footer ul li+li{border-left:solid 1px white;} div.footer ul li a{ display:block;width:100%;height:100%; text-decoration:none; } div.footer ul li a:hover{background-color:gray;color:red;} div.footer address{text-align:center;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿＿<p>メッセージ</p> ＿</div> ＿<div class="section"> ＿＿<h2>本文見出し</h2> ＿＿<p>本文記事</p> ＿</div> ＿<div class="footer"> ＿＿<ul> ＿＿＿<li id="top"><a href="index.html">top</a></li> ＿＿＿<li id="profile"><a href="profile.html">profile</a></li> ＿＿＿<li id="audition"><a href="audition2.html">audition</a></li> ＿＿＿<li id="news"><a href="news.html">news</a></li> ＿＿＿<li id="contact"><a href="mail.html">mail</a></li> ＿＿＿<li id="link"><a href="link.html">link</a></li> ＿＿</ul> ＿＿<address>00000000000000</address> ＿</div> </body> </html> [HTML5] <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <style media="screen"> <!-- html,body{ margin:0;padding:0; background-color:black;color:white; } section,footer{ width:100%;min-width:480px;max-width:1200px;margin:0 auto; } h1,h2,h3,p{margin:0;line-height:1.6em;} header{position:absolute;z-index:10;width:100%;} header h1,header p{ width:100%;min-width:480px;max-width:1200px;margin:0 auto; } section{ width:100%;min-height:430px; background:url(./images/1200_510.jpg) 50% 50%; background-size:cover; padding-top:80px; } footer ul,footer ul li{ list-style:none;margin:0;padding:0; text-align:center;line-height:30px; } footer ul{margin:15px 10px;} footer ul li{ display:inline-block; width:10%;height:30px;position:relative; padding:0 5px; } footer ul li+li{border-left:solid 1px white;} footer ul li a{ display:block;width:100%;height:100%; text-decoration:none; } footer ul li a:hover{background-color:gray;color:red;} footer address{text-align:center;} --> </style> </head> <body> ＿<header> ＿＿<h1>ページタイトル</h1> ＿＿<p>メッセージ</p> ＿</header> ＿<section> ＿＿<h2>本文見出し</h2> ＿＿<p>本文記事</p> ＿</section> ＿<footer> ＿＿<ul> ＿＿＿<li id="top"><a href="index.html">top</a></li> ＿＿＿<li id="profile"><a href="profile.html">profile</a></li> ＿＿＿<li id="audition"><a href="audition2.html">audition</a></li> ＿＿＿<li id="news"><a href="news.html">news</a></li> ＿＿＿<li id="contact"><a href="mail.html">mail</a></li> ＿＿＿<li id="link"><a href="link.html">link</a></li> ＿＿</ul> ＿＿<address>00000000000000</address> ＿</footer> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そもそも矛盾しているような ＞トップページの横幅を画面いっぱいに表示させたいのですが、 最も多い1024px幅やスマホじゃはみ出るし、1680pxとかの幅広ディスプレイじゃいっぱいにならないし。 HTMLもCSSも煩雑で複雑で、詳しく見る気になりません。本人ですら分からないのですから・・ 基本的には html,body要素のmargin,paddingを0とした上で、ルート要素はウィンドウ幅を参照しますから、幅をwidth:100%にする。 IMG要素は置換インライン要素ですから、画像サイズに依存するのでスタイルシートでこりらその要素に変えて親ブロックのサイズを参照する。CSS3でよければbackground-sizeを利用できます。--その画像(images/ｘｘｘ.jpg)が背景だったらそうすべきですが、後方互換を考えるならIMG要素でも仕方ないでしょう。 ナビゲーションは、その上で%指定すると親ブロック(直近のstaticでないコンテナブロック)の幅に追随させることが出来ます。 なお、IEには互換モードがありますから、必ず標準モードで動作するようDOCTYPEを記述してください。
お礼
ありがとうございました
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
ありがとうございました