- ベストアンサー
二段組みのサイトを作成する際の表示不具合
- 自作の一段組みのソースを使い、二段組みのサイトを作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。
- ソースの一部が一段組みのままであり、かなり長いですが、最終的にはサイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。
- 問題のソースコードには、コンテナ、ヘッダー、メニュー、メイン、コンテンツ、フッターというパーツが含まれており、各パーツのスタイルも指定されています。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
<body>以下です。シンプルでわかりやすいと思います。スタイルシートも書きやすい。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) で検証済み なお、タブは＿に置換してありますから戻すこと。 <body> ＿<div class="article"> ＿＿<div class="header"> ＿＿＿<h1>タイトル</h1> ＿＿</div> ＿＿<div class="section"> ＿＿＿<h2 id="introduction"><img src="images/introduction.png" alt="introduction" width="230" height="30"></h2> ＿＿＿<div class="section"> ＿＿＿＿<h2>h2タイトル(1)</h2><!-- sectionごとに見出しが一つだけ入る --> ＿＿＿＿<dl class="info"> ＿＿＿＿＿<dt>1月1日</dt> ＿＿＿＿＿<dd>あああ</dd> ＿＿＿＿＿<dt>1月2日</dt> ＿＿＿＿＿<dd>いいい(以下省略)</dd> ＿＿＿＿</dl> ＿＿＿</div> ＿＿＿<div class="section"> ＿＿＿＿<h2>h2タイトル(2)</h2> ＿＿＿＿<dl class="info"> ＿＿＿＿＿<dt>1月1日</dt> ＿＿＿＿＿<dd> ううう</dd> ＿＿＿＿＿<dt>1月2日</dt> ＿＿＿＿＿<dd>えええ(以下省略)</dd> ＿＿＿＿</dl> ＿＿＿</div> ＿＿</div> ＿＿<div class="footer"> ＿＿＿<div id="topmenu" class="nav"> ＿＿＿＿<ul> ＿＿＿＿＿<li class="contuctUs"><a href="./">お問い合わせ</a></li> ＿＿＿＿＿<li class="siteMap"><a href="./">サイトマップ</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<div class="nav" id="siteMap"> ＿＿＿＿<ul> ＿＿＿＿＿<li><a href="./"><img src="images/button/top.jpg" alt="トップページ" width="254" height="71" id="Image1" onmouseover="MM_swapImage('Image1','','images/button/sw-top.jpg',1)" onmouseout="MM_swapImgRestore()"></a></li> ＿＿＿＿＿<li><a href="./"><img src="images/button/eve.jpg" alt="トップページ" width="254" height="71" id="Image2" onmouseover="MM_swapImage('Image2','','images/button/sw-eve.jpg',1)" onmouseout="MM_swapImgRestore()"></a></li> ＿＿＿＿＿<li>※以下省略</li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<div class="nav" id="lastmenu"> ＿＿＿＿<ul> ＿＿＿＿＿<li class="FAQ"><a href="./">よくある質問</a></li> ＿＿＿＿＿<li class="privacyPolicy"><a href="./">プライバシー&ポリシー</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<p>Copyright BBB. All right reseved.</p> ＿＿</div> ＿</div> </body> </html>
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 この意味がわかりません。左に切れるとは、左によってしまうという意味でしょうか？それとも、左側が空く？ いずれにしても原因は・・・・ div#content { width: 475px; padding-right: 60px; padding-left: 50px; } の部分でしょう。 ここからは、アドバイスです。 わかりにくいHTML,CSSですね。ご自身も後日、見たらわからないでしょう。当然検索エンジンにも理解してもらえない。 [HTML] デザインのためにHTML書いちゃだめです。 ・デザインを変えるたびにHTMLまで書き直さなきゃならない。HTMLに関しては「一段組みのソースのままに」はありえません。 スタイルシートを変更するだけでデザインを変えられるという一番の長所を放棄してしまう。ひたすら文書構造に従って記述しておくと、一段組であろうと、３段組であろうと、またメニューを縦にしようが横にしようが自由自在に操れる。 後日、自分が記事を書き足そうがどこになにを書けば良いかすぐわかる。検索エンジンにとっても理解しやすいページが出来る。 ・段組のために#headerとしない。header,section,footerなどは一つの文書にに一箇所とは限りません。(HTML5参照) [CSS] ・段組のためにfloatを使うと、必然的に文書構造を壊します。また、本文中でfloat→clearが使えなくなります。 ・カスケーディングスタイルシートなのですから、カスケーディングを有効に利用しましょう。 .logo1{}と.logo2{}、重複したプロパティは書きません。カスケーディングをつかいます。 [HTML] 示されたHTMLに対してスタイルシートを書くのは無理ですので、わかりやすいように書き換えさせていただきました。 class名はHTML5の要素名を使っています。<div class="article">→<article>、<div class="header">→<header>,<div class="section">→<section>,<div class="nav">→<nav>と変えるだけで、そのままHTML5になります。 HTML4.01strictに直してあります。HTML5の元になる規格ですから。 ソースを見るだけで、(検索エンジンを含めて)誰でも理解できると思います。 (注)HTML5ではsectionごとに一つだけ見出しが入ります。階層はh1-6の数字ではなくsection>の階層で判断されます。 ★HTML5 における HTML4 からの変更点 「3.1. 新しい要素」( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements ) [CSS]細かいミスがたくさんあります。またfloatとclearを同じセレクタに記述しても無効です。 ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) class名に意味あるものをつけましょう。 <li class="FAQ"><a href="./">よくある質問</a></li>というふうに、CSSを書くとき絶対に楽です。 <!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"> ＿<meta http-equiv="Content-Script-Type" content="text/javascript"> ＿<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;} h1,h2,h3,div.abc,ul{margin:0;} body{background-image: url(images/sora.jpg)} div.article{background:url(images/background0.png);width:90%;margin:0 auto;position:relative;min-width:640px;} div.header{background-image: url(images/header.png);height:background-repeat:no-repeat;height: 169px;} div.footer{background-image: url(images/footer.gif);} div.section{ width: auto; border: 2px solid #400000; margin: 60px 20px 0 180px;/* 上・右・下・左 */ padding:0 0 20px 0; position:relative; } div.section h2{ position:absolute; top:-40px; } div.section div.section{ margin: 30px 60px; border:none; width:auto; padding:0; } div.section div.section h2{ position:static; color: #400000;font-size: 1.8em; letter-spacing: 0.5em; border:#008080 solid 1px; border-width: 0 0 3px 14px; padding-left: 10px; } dl.info{ line-height:2em; width:auto; margin: 15px; } dl.info dt{ float:left; margin-right:2em; padding-left: 17px; color: #000; width:8.2em; background-image: url("images/yazirusi2.gif"); background-position: 0% 58%; background-repeat: no-repeat; } dl.info dd{ padding-left:1em; border-bottom: 2px dotted #400000; margin:0; } #topmenu ul{ position:absolute; top:148px; height:20px;line-height:20px; width:90%; text-align:right; } #topmenu ul li{ display:inline; } #siteMap{ position:absolute; top:180px; left:0; } #siteMap ul{} #siteMap ul li{ list-style:none; background-position: left center; background-repeat: no-repeat; padding-left:35px; } #siteMap ul li.contuctUs{background-image: url("images/mail.png");} #siteMap ul li.siteMap{background-image: url("images/zisyaku.png");} --> ＿</style> </head> ・・・以下次回・・・
- outbrave
- ベストアンサー率60% (231/380)
>mainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 質問はこれですかね。 左に隙間ができるという意味なら /* メニュー */ #menu {margin-left: 40px; ←これが入っているからです。 width:260px}
お礼
ありがとうございます。 マージン、パッディングをいじってみたのですが、うまくいかなかったので。
お礼
ありがとうございます。ソースの書き方の問題個所を含め、ご回答を参考にやり直していきたいと思います。