• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:[CSS]floatを使う理由)

[CSS]floatを使う理由

ORUKA1951の回答

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

ちょっとしたミスの修正  <section>   <h1>このサイトについて</h1>   <p>・・・【中略】・・・</p>   <section>    <h1>HTML5とCSS3による豊かな表現</h1>    <p>・・・【中略】・・・</p>   </section>   <section>    <h1>さらに別の記事</h1>    <p>・・・【中略】・・・</p>   </section>  </section> もしくは  <section>   <h1>このサイトについて</h1>   <p>・・・【中略】・・・</p>   <section>    <h2>HTML5とCSS3による豊かな表現</h2>    <p>・・・【中略】・・・</p>   </section>   <section>    <h2>さらに別の記事</h2>    <p>・・・【中略】・・・</p>   </section>  </section> です。sectioning要素で、そのセクションの階層を判断するのがHTML5の仕様です。そのため以下のいずれかの方法をとることが強く推奨されています。 ★sectionで階層を明示して、すべてh1で見出しをつける。 ★sectionで階層を示すと同時に階層に対応した見だしレベルとする。  前者は、将来、階層が追加されるなどしたときに楽です。  後者は、古いブラウザなどにおいても互換性があります。階層が変更されるとすべて書き直さなければならない。 【引用】____________ここから Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level. Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.  ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[4.4 Sections — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#headings-and-sections )]より 要約すると ・sectionには、すべての階層の見出しを含むことができます。しかし、著者は、h1 要素のみ使用するか、sectionのネストされた階層に見合ったランクの見出しを使うことが、強く推奨される。 ・著者においては、セクショニング・コンテンツの中に、そのセクションを明示的に置くことが推奨される。一つのセクショニング・コンテンツの中に複数の見出しを入れ、それによって、暗黙に生成されたセクションに依存しないほうがよい。  後段は、hgroupやレベルの異なる見出しをおいて、ブラウザの解釈に依存するのではないことを言っています。 <section>  <h1></h1>  <h2></h2> や <section>  <hgroup>   <h1></h1>   <h2></h2>  </hgroup> じゃなくて・・・ <section>  <h1></h1>  <section>   <h2></h2> と言う意味。

関連するQ&A

  • CSSでfloatした要素の高さを100%にしたい

    はじめまして。 下記のコードは、HTMLファイルで<head>内に<style>を設けて、そこでCSSを操作しています。 この中で<section>が一か所あるのですが、この要素を一番したの<footer>まで届かせたいのですが、hight: 100%, min-height:100%などにしても言うことを聞いてくれません。 heightを極端に大きくすれば<footer>まで届きますが、それ以外にCSSを使ってきちんとアジャストする方法があれば、ご教授いただければ幸いです。 以下コードです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> html { height: 100%; } body { height: 100%; margin: 0; position: relative; } #root { background: #ccc; min-height: 100%; width: 100%; } header { background: red; height: 30px; width: 100%; } nav { background: gray; float: left; width: 20%; height: 400px; } section { background: green; float: left; width: 70%; min-height: 100%; /** <----- なぜか下まで行かない **/ padding: 60px 0; } footer { background: blue; height: 200px; width: 100%; position: absolute; bottom: -25px; left: 0; margin: 0; } </style> </head> <body> <div id="root"> <header>header</header> <nav>nav</nav> <section>section</section> <footer>footer</footer> </div> </body> </html> 

    • ベストアンサー
    • CSS
  • HTMLのCSS(float)の設定がよくわかりません

    HTMLのCSS(float)の設定がよくわかりません 画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px~2pxの隙間が できてしまうのですが、その理由をわかる方いらっしゃいますか。 宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。 宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSで全体をセンタリングしたい

    navi address main footer ↑このような4つの<div>をさらにcoverという<div>でくるんだ?レイアウトにしました。 下記のようなCSSにしたのですが、中央にすることができません。 同じような質問もたくさんあり、拝見したのですがどうもうまくいきません。 coverという<div>を作ったのが間違いなのでしょうか? ------------------------------------------- body{ text-align:center; } #cover{ width: 800px; margin-right=:auto; margin-left=:auto; text-align:left; } #navi{ float: left; width: 565px; height: 165px; } #address{ float: right; text-align: left; width: 235px; } #main{ width: 500px; clear:both; padding-right: 150px; padding-left: 150px; font-size: 10px; text-align: left; line-height: 20px; } #footer{ width: 500px; text-align:center; padding-right: 150px; padding-left: 150px; padding-top: 30px; } -------------------------------------------

    • ベストアンサー
    • CSS
  • CSSで、指定されていない空白が開く

    ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。 margin: 0;と設定しても空白が空きます。 section#header { width:80%; height: 63px; margin-right: auto; margin-left: auto; } img.LOGO { width: 700px; height: 63px; float: left; } p.intro { color: #383838; float: right; font-size: 120%; } section#links { font-size: 130%; width: 90%; height: 40px; margin-bottom: 40px; margin-right: auto; margin-left : auto; } nav ul li { display: block; float: left; width: 18%; height: 40px; margin-left: 1px; margin-right: 1px; border-left: #000000 2px solid; border-right: #000000 2px solid; } nav ul li a { display: block; line-height: 40px; width: 100%; height: 100%; text-decoration: none; text-align: center; } div#clear { clear:both; } CSSは以上の通り書きました。 このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、 section#linksで設定したナビゲーション部分に間が空いてしまいます。 どうすれば開かなくなるでしょうか。 閲覧環境はChromeです。

    • ベストアンサー
    • CSS
  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか? <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML
  • フッターの回り込みを防ぐ方法を教えてください(CSS)

    ブラウザ:IE7 左右の二段組みで、左に navi ボックス、右に content ボックスの場合 div#content {float: right; width: 100%; margin-left: -150px; margin-right: auto} div#navi {float: left; width: 150px} div#footer {clear: both} としたのですが、フッターが navi の下に回り込んでしまいます。 {clear: both} は navi の幅 150px の中だけで float が clear されているだけです。 フッターが回り込まないようにするには、どうしたら良いか分かりません。 よろしくお願いいたします。

  • CSS初心者 コンテンツ高さに合わせたメニュー領域の背景色

    CSS初心者です。 Win IE6 環境で制作しています。 「メニュー」部分(右側)と「コンテンツ部分」(左側)とに分けて2段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; } (全体のコンテンツ領域) .contents-left { width:550px; float: left; text-align:center; } (←コンテンツ部分) .contents-right { width:200px; vertical-align:100%; } (←メニュー部分) .footer { width:770px; text-align:center; clear: both; } (フッター) とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • ブラウザ間のCSSの表示違いにつきまして

    現在、趣味のホームページを作成しているのですが、IEでは意図したとおり表示されるのですが、firefoxではCONTENT内上部(float boxの上)に隙間のようなものができてしまって困っています・・・ CSSは以下になります。 #content { width: 680px; margin: 0 10px; padding: 0; background-image: url(../img/content-back.jpg); background-repeat: repeat-y; text-align: center; overflow: auto; text-align: center; } #left { float: left; width: 456px; margin: 0; padding: 50px 0; text-align: center; } #right { float: right; width: 224px; margin: 0; padding: 50px 0; background-color: #000000; text-align: center; } #footer { height: 60px; margin: 0 10px; padding: 0; background-image: url(../img/footer-back.jpg); background-repeat: repeat-x; text-align: center; clear: both; } CONTENTを親要素として、その中にleftとrightボックスを作成しました。 なお、overflow: auto;をなくしてcontent・left・rightに高さを指定したら隙間はなくなるのですが、共に内容に準じた高さ(auto)にしたくて・・・ どなたか解る方いらしたらご教示お願いします!

    • ベストアンサー
    • HTML
  • 【css】floatを指定するとはみ出します

    ブロック要素をfioatで横並びにした際に、画像とテキストが全体を囲っている要素(親要素)からはみ出すことが多々あります。 その度に高さを指定して回避しているのですが、こちらはその他に回避の方法というのはあるのでしょうか? それとも、自分の記述がおかしいのでしょうか? 例えば下記の例です。 こちらは左に画像、右にタイトルとコメントが入ります。 <div class="aaa"> <div class="left"><img src="photo.jpg" width="180" height="120"></div> <div class="right"> <h3 class="title">タイトルです</h3> <div class="comment">コメントです</div> </div> </div> //////////////////////////////////// .aaa{ margin-bottom: 5px; padding-top: 7px; padding-right: 10px; padding-bottom: 7px; padding-left: 10px; clear: both; } .left{ float: left; height: 120px; width: 180px; } .right{ float: left; padding-left: 10px; width: 380px; } .title{ font-size: 90%; line-height: 120%; padding-right: 10px; padding-left: 10px; width: 360px; padding-top: 3px; padding-bottom: 1px; clear: both; } .comment{ font-size: 80%; line-height: 120%; padding: 5px; clear: both; }

  • css: IEでsidebarが表示されない

    cssで2カラムのページを左右を両方floatさせて作っています。 firefoxでは表示されるsidebar(背景、画像、テキストを含むすべて)がIE7では表示されません。clearfixの問題かと思いclearfixを入れてみましたがうまくいきませんでした。 どうしたらよいかご存知の方がいたら教えてください。よろしくお願いします。 ちなみにCSSの主要部分は以下のとおりです。 /*--- container ---*/ #container {position: relative;     background:url(images/background.jpg) repeat-y; width: 800px; hight: 600px; padding: 0; margin-left: auto; margin-right: auto; text-align: left; border: 0; } /*--- header ---*/ #header {width: 800px; height: 107px; margin:0;} /*--- side-bar ---*/ #side-bar{position:absolute; background: transparent url(images/menu_bckgrnd.png) center center no-repeat; width: 150px; padding:0; float:left;} #side-bar ul { margin: 0; padding: 50px 50px 50px 50px;    ist-style: none;         width:30px;} #side-bar li { margin: 0; padding: 0;} #side-bar li a{ display:block;} #side-bar a:hover{position: relative; top: 1px; left: 1px;} /*--- main-nav: content area ---*/ #main-nav {background: url(images/design.png) top left no-repeat; width: 610px; margin-top: 0 0 0 150px; padding: 0 10px 0 30px; float:right;} #main-nav a:hover {position: relative; top: 1px; left: 1px; } #content1{ float:left; width:200px; margin: 0 2px 20px -20px; background:#fff;} #content2{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} #content3{ float:left; width:200px; margin: 0 2px 20px 2px; background:#fff;} /*--- footer ---*/ #footer {width: 800px; height: 100px; background: transparent; margin: -100px 0 0 0; clear: both; text-align:center; padding-top:50px;} /* -- clearfix -- */ .clearfix{ zoom:1; } .clearfix:after{content:'.'; display:block; visibility:hidden; height:0; clear:both;}

    • ベストアンサー
    • CSS