- ベストアンサー
CSSでメイン部分を80%に表示する方法
- CSSを使ってメイン部分を80%ぐらいに表示するWebサイトを作成する方法について教えてください。
- 質問者はCSSの勉強を始め、HPで左右に10%のスペースを空け、メイン部分を80%に表示しているWebサイトを見かけました。質問は、このレイアウトを実現するためにdiv要素とfloatプロパティを使用するのが正しい方法かどうかです。
- また、メイン部分を中央に表示するためにsidebar-left、main、sidebar-rightという要素を使うのは適切な方法でしょうか。質問者は正しい方法を知りたいとしています。
- selene2010
- お礼率89% (49/55)
- CSS
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞HTML5で書いているのでfloatを解除するのにclear:を使いましたがこれではダメなのでしょうか？ もちろん、floatを解除するのはclearですが、それは決して間違いではありません。 大事なことは、floatの使い道です。本来は挿絵の周囲にテキストを回りこませるものですが、かってブラウザがきちんとサイズを判定できない時代には、絶対配置がブラウザ間の表示差の大下記な原因であり、致命的な問題であった時代があります。IE6やIEの互換モードとウェブ標準ブラウザの差です。 絶対配置だとサイズの算出を間違えると内容がかぶさったりしました。floatでは避けてくれる。しかし、それは別の問題、HTML的には致命的な問題をはらんでいます。floatする要素を、floatされる要素の前に書かなければならないという問題です。 たとえばB(目次)A(本文)C(脚注)と並べたい場合は、その順番ないしBCAという順番で書かなければならない。 HTML B→A→Cに対して B,A{float:left} または、 HTML BCAに対して B{float:left;} C{float:right;} ところが、そのページの主題はHTMLでは、Aに書かれているはずです。 絶対配置だと、 HTML A(本文)→B(目次)→C(脚注)に対して、 B{position:absolute;top:0;left:0;} C{position:absolute;top:0;right:0;} で良いですし、左右を書き換えるのもこの指定を変更するだけでよい。スマホ用に目次や脚注を末尾におきたければ、absoluteを止めればよい・・ そういう意味で、ブロックをfloatさせるのは好ましくないという意味です。さらに、本文内で挿絵を右や左にfloatさせて、かつ本文内の次の段落や見出しでclearすると全体がclearされて、肝心要のところでfloatが使えなくなります。 <header> </header> <section> <section> </section> <section> </section> <aside> <aside> <div class="contentTable"> </div> </section> <footer> <nav> </nav> </footer> は典型的なHTML5ですが、これを ページの最上部にnavをプルダウンでfixさせて、contentTableを本文の左に、脚注を本文の右に、footerは本文終了後に並べてください。スマホなど狭いディスプレイにはそれらを下に。とデザインできますよね。
その他の回答 (2)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
最近の回答では clearfixの記述の仕方 - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7726726.html ) <body> <div class="header"> </div> <div class="section"> </div> <div class="footer"> </div> </body> だとすると、 body{background-color:gray;} div.header,div.section,div.footer{ width:80%;minwidth:680px;max-width:900px; margin:0 auto; background-color:white; } ★スタイルシートに手をつける前にHTMLをきちんと復習して置きましょう。 HTMLにデザインのために何かを加えると、先でデザインを変えようとしたときHTMLまで直さなければならなくなります。 →構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) HTMLには文書構造しか書きません。そうするとデザインがとても楽になります。変更もHTMLを弄らなくてもできるようになります。 <body> <div class="article"> <div class="header"> </div> <div class="section"> </div> <div class="footer"> </div> </div> </body> の場合は、 body{background-color:gray;} div.article{ width:80%;minwidth:680px;max-width:900px; margin:0 auto; background-color:white; } ★ここで紹介したclass名は、HTML5の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )です。したがって、そのまま<header><section><footer><article>に置き換えればよいです。 Webデザインの勉強の仕方 - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7722342.html )でも回答しましたが、まずきちんとHTMLを書いた後、色々なサイトを参考にしてHTMLには一切手を加えないでデザインできるようになりましょう。 結果的にそれが一番の早道です。
お礼
回答ありがとうございます。 clearfixという言葉を初めて知りました。 HTML5で書いているのでfloatを解除するのにclear:を使いましたがこれではダメなのでしょうか？
- rossi46mail
- ベストアンサー率50% (5/10)
質問の内容が70%くらいしか理解できないので間違った回答であれば申し訳ありません。 ヘッダーの部分が900pxあるけど mainが860px フッターが900px みたいな考え方でいいのでしょうか。 その場合ですが、floatを使って区切っていません。 （slidebar-left,rightに何か入れたりしたい場合はやり方が変わってきます） css body { width:900px; margin:0 auto; padding:0; border:none; } #header { width:900px; margin: 0 auto; padding:0; border:none; } #main { margin: 0 auto; width:860px; padding:0; border:none; } #footer { width:900px; margin: 0 auto; padding:0; border:none; } html <body> <div id="header"> ここにヘッダ部分 </div> <div id="main"> ここにメイン部分 </div> <div id="footer"> ここにフッタ部分 </div> </body> backgroun-colorやtext-alignなど細かいことは入れていません。 これでできると思います。 回答違いの場合言って下さい。
お礼
回答ありがとうございます。 body, header, main, footerをdivで区切ってCSSにbackground-imageを指定するとします。 その場合、mainの領域以外を背景画像にするにはbody, header, footerの3つにbackground-imageを指定する必要があるのか知りたいのです。 よろしくお願いします。
補足
すみません。 回答へのお礼を誤りました。 slidebar-left, main, sidebar-rightの3つの領域に分けるのにfloatを使って区切らないでどうやって区切るのでしょうか？ header, main, footerの縦一列なら分かりますが横に区切るのにfloatを使って区切らないという意味が分かりません・・・ その辺りを教えてくださると助かります。
お礼
回答ありがとうございます。 自分が目指すところはレスポンシブWebのサイトなので、 考えた結果、 基本はfloatで構成して左上と左下を基準にしたズレにくいブロックだけをposition:absolute;で実現することにしました。