• ベストアンサー
※ ChatGPTを利用し、要約された質問です（原文：CSS3で困ってます！）

CSS3で困ってます！

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

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答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 )

Shin1994
質問者

お礼

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

Shin1994
質問者

補足

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

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する