• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：自作の一段組みのソースを使い、二段組みのサイトを）

二段組みのサイトを作成する際の表示不具合

このQ&Aのポイント
  • 自作の一段組みのソースを使い、二段組みのサイトを作っているのですが、サイドメニューまでは、containerにきちんと表示されるのですが、それ以下のmainがcontainerから30px分ぐらい、左に切れた状態で表示されます。
  • ソースの一部が一段組みのままであり、かなり長いですが、最終的にはサイドメニューをフロートレフト、メインをフロートライトにして、二段組みにする予定です。
  • 問題のソースコードには、コンテナ、ヘッダー、メニュー、メイン、コンテンツ、フッターというパーツが含まれており、各パーツのスタイルも指定されています。
  • mx5gg
  • お礼率91% (433/475)
  • CSS
  • 回答数3
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.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="./">プライバシー&amp;ポリシー</a></li> ＿＿＿＿</ul> ＿＿＿</div> ＿＿＿<p>Copyright BBB. All right reseved.</p> ＿＿</div> ＿</div> </body> </html>

mx5gg
質問者

お礼

ありがとうございます。ソースの書き方の問題個所を含め、ご回答を参考にやり直していきたいと思います。

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

その他の回答 (2)

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

＞それ以下の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)
回答No.1

>mainがcontainerから30px分ぐらい、左に切れた状態で表示されます。 質問はこれですかね。 左に隙間ができるという意味なら /* メニュー */ #menu {margin-left: 40px;　←これが入っているからです。 width:260px}

mx5gg
質問者

お礼

ありがとうございます。 マージン、パッディングをいじってみたのですが、うまくいかなかったので。

すると、全ての回答が全文表示されます。
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

サービス解約申請：ひかりTV基本放送プラン
このQ&Aのポイント
  • 実家の母が入院して戻らないため、「ひかりTV基本放送プラン」を解約したい。現在、毎月5280円と2ヶ月毎に3300円が口座から引かれている。
  • テレビの解約だけでは2ヶ月毎の3300円しか解約できないとされており、全ての課金を解約したいと考えている。
  • ISPPぷららの「ひかりTV基本放送プラン」についての質問です。母の入院により解約を希望しています。
回答を見る

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVE セレクト

質問する