CSS3で困ってます！

2011/09/03 17:58

このQ&Aのポイント

HTML5でサイトを作成中にCSS3での問題が発生しています。
背景のボックスの大きさがbodyの大きさに追随しないため、デザイン的に問題があります。
CSSのソースを調べましたが、問題の解決方法がわかりません。皆さんのアドバイスをお待ちしています。

CSS3で困ってます！

現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません！教えてください（涙） CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。実際のページはここにあります。 http://skino.cyber-ninja.jp/test/

Shin1994
お礼率89% (337/377)

CSS
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/03 20:30 回答No.1

floatは、ブロック内のデータを回り込ませますが、コンテナブロックが小さいとはみ出ます。　この場合、floatを使わないほうがよい。これなら、absoluteのほうが確実です。　そもそもHTMLが無茶苦茶です。ul内にa要素は入りません。HTML5ではなく、「HTML4.01の困った見本」になっています。 <body> 　<section> 　　<header> 　　　<h1>見出し</h1> 　　　<p>こんな会社</p> 　　　<nav id="menu"> 　　　　<ul> 　　　　　<li><a href="index.html"><span>ホーム</span></a></li> 　　　　　<li><a href="news.html"><span>ニュース</span></a></li> 　　　　　<li><a href="access.html"><span>アクセス</span></a></li> 　　　　　<li><a href="contact.html"><span>お問い合わせ</span></a></li> 　　　　</ul> 　　　</nav> 　　</header> 　　<section> 　　　<h2>インフォメーション</h2> とかになるはずです。HTML5なら　まず、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )のような資料の豊富なHTML4.01strictでみっちり勉強しましょう。　上記HTML5ではなく　<div class="section"> 　　<div class="header"> 　　　<h1>見出し</h1> 　　　<p>こんな会社</p> 　　　<div class="nav" id="menu"> 　　　　<ul> 　　　　　<li><a href="index.html"><span>ホーム</span></a></li> 　　　　　<li><a href="news.html"><span>ニュース</span></a></li> 　　　　　<li><a href="access.html"><span>アクセス</span></a></li> 　　　　　<li><a href="contact.html"><span>お問い合わせ</span></a></li> 　　　　</ul> 　　　</div> 　　</div> 　　<div class="section"> 　　　<h2>インフォメーション</h2> とすればよい。文書構造を示そうにもHTML4.01には要素が不足していた。ちゃんと<div class="section">とかマークアップしている人が少なかった　また、リンクターゲットでもないIDとか、DIVの多用とか、HTML5がどこを問題視して修正されたかが理解できていない。　HTML5では、DIVの代わりに使うべき要素が用意されています。【参照】4.4 Sections — HTML5 ( http://www.w3.org/TR/html5/sections.html )

質問者

お礼 2011/09/03 22:30

マジ!? あっ…すいません取り乱しました。ご回答ありがとうございます。そうですか…構文が無茶苦茶なんですか。前に作ったホームページを参考に作ったのでそうなってしまったのかもしれません。前のやつは、XHTML 1.0 Transitionalで作っていたので… HTML5の認識は、単にFlash無しでビデオ再生できるとかそう言うだけだと思っていたので他のシリーズと大差は無いだろうと思って作っていました。実に浅はかでした。駆け出しの超アマチュアレベル（いやそれ以下かも…）なので、こんなことになってしまいました。ご指摘頂いた点を踏まえつつ、しっかり調べながら一から作り直します！

質問者

補足 2011/09/04 00:17

先ほど問題が解決しました！結局のところ、CSSのcontents以下newsまでをそれぞれbox化して、それを左右に並べ右だけをPaddingで左のボックスから少し話すことでレイアウトを崩さずに2つの要素を横に並べれました。背景の問題も解決されました。当方の調べによれば、HTML5においてもレイアウト面ではdivは必要であるとの記事を多数発見しました。質問者様のご指摘と食い違いがありこれまた悩むところであります。素人の僕には、まだdivは使わざるを得ないのかもしれません…