CSSでメイン部分を80%に表示する方法
- CSSを使ってメイン部分を80%ぐらいに表示するWebサイトを作成する方法について教えてください。
- 質問者はCSSの勉強を始め、HPで左右に10%のスペースを空け、メイン部分を80%に表示しているWebサイトを見かけました。質問は、このレイアウトを実現するためにdiv要素とfloatプロパティを使用するのが正しい方法かどうかです。
- また、メイン部分を中央に表示するためにsidebar-left、main、sidebar-rightという要素を使うのは適切な方法でしょうか。質問者は正しい方法を知りたいとしています。
- ベストアンサー
CSSでメイン部分が80%ぐらいに表示するには？
CSSでメイン部分が80%ぐらいに表示されているWebサイトを作るにはどうしたらいいのでしょうか？ CSSの勉強を始めました。 疑問が沸いたので質問させてもらいます。 HPで左右が10%くらい空いていてメイン部分が80%ぐらいに表示されているWebサイトがあります。 ＿＿＿＿＿＿ ｜｜ ｜｜ ｜｜main ｜｜ ｜｜ ｜｜ ｜｜ ｜｜ ～～～～～～ この両サイドのスペースはfloatを使って sidebar-left, main, sidebar-rightというふうにdivで区切って表示させているのでしょうか？ まず１つ目の質問はこのやり方で合っているのか？です。 メイン部分を真ん中に表示したい為だけに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を使って区切らないという意味が分かりません・・・ その辺りを教えてくださると助かります。
関連するQ&A
- CSSのfloatとdivについて質問です。
CSSのfloatとdivについて質問です。 下記のようにmainの中にlocal-navigationを配置したいのですがやり方が分からないのでご教授お願いします。 現在はlocal-navigationがfooterの上に表示されて自分の意図することが出来ていません。 sidebar-leftとsideba-rightはfooter部分まで伸びていて欲しいのです。 やりたいこと： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜ main ｜sidebar-right ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜ ｜ ｜local-navigation ｜ ｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜footer ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 現在の状況： ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｜header-menu ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜sidebar-left｜ main ｜sidebar-right ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜ ｜＿＿＿＿＿＿｜＿＿＿＿＿＿＿＿＿＿＿＿｜＿＿＿＿＿＿＿｜ ｜local-navigation ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ ｜footer ｜ ｜＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿｜ 過去の質問： 「CSSでメイン部分が80%ぐらいに表示するには？ http://okwave.jp/qa/q7728293.html 」 「CSSのbackground-imageについて http://okwave.jp/qa/q7728304.html 」
- ベストアンサー
- CSS
- CSSのbackground-imageについて
CSSのbackground-imageについて質問です。 前回「CSSでメイン部分が80%ぐらいに表示するには？ http://okwave.jp/qa/q7728293.html 」で質問した者です。 ＿＿＿＿＿＿ ｜｜ ｜｜ ｜｜main ｜｜ ｜｜ ｜｜ ｜｜ ｜｜ ～～～～～～ background-imageでメイン部分以外をパターン画像を使いたいと思いました。 そこでふと疑問が沸いたので質問させてもらいます。 sidebar-left, main, sidebar-rightをdivで区切っていると、 background-imageで背景画像を指定するにはsidebar-leftとsidebar-rightの2カ所に同じ画像を指定しないといけません。 divで区切るたびにbackground-imageを指定するのはは間違っているのでしょうか？ 背景画像を何か所も指定するやり方は間違っているような気がしたので質問します。
- ベストアンサー
- CSS
- CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点 サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。 どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
- CSSレイアウト(2列型)に関して
お世話になります。2列の左列がメインで右列がサイドバーというCSSレイアウトに関してご質問します。 以下のような構造のCSSレイアウトを作成しました。 body | |-- #wrapper | | | |-- #content | | | | | |-- #main | | | | | |-- #sidebar body { background: yellow; } #wrapper { width:700px; background: white; } #content { width: 700px; background: white; } #main { float: left; width: 500px; background: white; } #sidebar { float: right; width: 200px; background: blue; } ※padding: 0;margin: 0;を実際には全てに追加してあります。 ----- 以下HTMLファイル ----- <body> <div id="wrapper"> <div id="content"> <div id="main"> <p> ・・・・・・ </p> </div> <div id="sidebar"> <p> ・・・・・・・ </p> </div> </div> </div> </body> 上記においてIE6ではメイン(#main)の高さがサイドバー(#sidebar)の高さより高い場合、サイドバーの下部は#contentで指定した白になります。しかしFirefoxではサイドバーの下の部分がbody要素に指定したyellowになってしまいます。※Firefox1.07で試しています。 メイン(#main)やサイドバー(#sidebar)の高さを指定していないためと考えますが、メイン及びサイドバー共に高さを可変にするため固定値を設定したくない場合は、FirefoxでIEのように#contentの背景色(白)を反映するにはどうすればよいのでしょうか。 質問が長くなりましたが、手がかりでもつかめればと思っています。どうぞ宜しくお願いします。
- ベストアンサー
- その他（プログラミング・開発）
- CSSでの背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> <div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、 なぜ出ないのか教えていただければと思います。 ブラウザはオペラです。 サイドバーのグリーンしかつきません。 過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。 お願い致します。
- ベストアンサー
- CSS
- CSSだけで奇麗にサイトを作りたい。
Mac Golive CS2を使っています。 大体以下のような形でCSSを記述しています。（他の文字やマージン等細かい設定は省いてます） 自分のイメージとしては灰色の背景に、メインの白い箱があってその中に左右に小箱が並んで入ってる感じです。 CSS : body { background-color: #999; } #main { background-color: white; width: 700px; height: auto; } #left { width: 200px; height: auto; float: left;} #right { width: 500px; height: auto; float: right;} HTML : <body> <div id="main"> <div id="left">左の内容</div> <div id="right">右の内容</div> </div> </body> そこで質問なのですが、上記の場合、mainの縦がautoになっているdivの中にleftやright等のdivを入れるとmainからleftなどがはみ出てしまうのです。（というかmainのdivが表示すらされない。なぜ？） divは入れ子が出来ないのでしょうか？現在どうしてもこの形で作りたいのでleftとrightの箱をtableで代用していますが、tableは使いたくありません。 あとmainの箱にleftなどの箱の大きさの分だけ<br>をたくさん入れるという方法がありますがそれもやりたくありません。 わかりにくい質問かもしれないのですが助言の程頂けましたら有り難いです。
- ベストアンサー
- ホームページ作成ソフト
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
- ＣＳＳ－heightの自動調節について
ＣＳＳを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの２つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのＣＳＳにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 ＣＳＳについては初心者のため記述がおかしい部分もあるかもしれませんが、ＨＴＭＬとＣＳＳは以下の通りです。 【ＨＴＭＬ】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【ＣＳＳ】 #main { width:800px; height:auto; background: #ffffff; margin-right: auto; margin-left: auto; margin-bottom:auto; clear: both; } #side { float:left; width:170px; margin-top:20px; } #text { float:right; width:600px; margin-top:20px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- HTML
- IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。 簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。 しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。 どうにか解決する方法はありませんでしょうか？ 文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
回答ありがとうございます。 自分が目指すところはレスポンシブWebのサイトなので、 考えた結果、 基本はfloatで構成して左上と左下を基準にしたズレにくいブロックだけをposition:absolute;で実現することにしました。