• ベストアンサー

CSSのレイアウト設定 (初心者)

たびたびの質問失礼します こんばんわ 今回はCSSのレイアウトについて質問があります まずCSSのソースをご覧くださいませ * レイアウトの設定*/ html{ background-color:#c0c0c0; } body{ margin:0px; padding:50px; font-size:90%; } /* ヘッダーの設定*/ #head{ width:900px; height:100px; background-color:#CCFFCC; } /* ラッパーの設定*/ #wrap{ position:relative; width:900px; background-color:#FFFFCC; } /* 左側の設定*/ #left{ width:100px; height:900px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:800px; height:900px; float:right; background-color:#CCCCFF; } HTML <!-- ********* ヘッダー ******** --> <div id="head"> <p>ここにイメージ記載予定</p> <!-- ********* 右側 ******** --> <div id="right"> あああああああああああああああああああああああああああ </div> 一部略 --------------------------------------------------------------- 1.まずヘッダーの部分が少しあいてると思うんですが これを一番上まで持っていき空白を無くす為には何を追加させたらいいんでしょうか? 2.右側に文字を入力したとき ああああ という文字が左側に近寄りすぎてしまいます。。 これを中心に持って行くには <align="center">を入力してもうまく行きませんでしたT_T 説明下手で申し訳ないですが よろしくお願いします ちなみにHP作成は初めてです。

noname#184276
noname#184276
  • CSS
  • 回答数2
  • ありがとう数2

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

  • ベストアンサー
回答No.1

1. body の padding:50px; が不要。 2. align="center" を使えば、たとえば <h1 align="center">あああ</h1> など、その他いろいろとやり方はあるはず。

noname#184276
質問者

お礼

ありがとうございました 無事いけました^^

その他の回答 (1)

  • Pochi09
  • ベストアンサー率75% (42/56)
回答No.2

No.1さんに追加です。  <div id="head">  <p>ここにイメージ記載予定</p> の<p>タグが不要なので、  <div id="head">  ここにイメージ記載予定  </div> 又、スタイルシートでセンタリングしたいなら  #right{  ===途中省略==  text-align:center;  } としてやる方法もあります。 css使うなら、ちょっとずつ調べてみた方が、自分の自由になって楽しいですよ。(多少、htmlの場合と違った指定の仕方をするものもありますし)

noname#184276
質問者

お礼

ありがとうございます 無事いけました^^

関連するQ&A

  • CSSでブラウザごとにレイアウトが崩れたりします。

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■    ■=ヘッダー □□●●●●    □=メニュー □□●●●●    ●=コンテンツ(中身)1 □□○○○○    ○=コンテンツ(中身)2 □□○○○○    ▲=フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー(□)とコンテンツ(○+●)の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー(□)の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ(○+●)部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE7のみでして、IE6やfirefoxなどでは正常に表示されました。 全てのhtmlファイルごとに高さを指定して、divを指定すれば、解決するとは思うのですが、テンプレートを使用しているため、なんとかこのまま解決方法を見いだせればありがたいのですが、、、 どうか教えていただけないでしょうか? body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFFF; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#FFFFFF; } /* 左側の設定*/ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; } /* 右側の設定*/ #right{ width:580px; height:950px; float:right; background-color:#FFFFFF; margin-bottom: 15px; } #sub_main { width: 550px; margin-left: 15px; background-color: #FFFFFF; margin-top: 10px; height: auto; margin-bottom: 5px; } #sub_main2 { width: 550px; margin-left: 15px; margin-top: 15px; background-color: #FFFFFF; height: auto; } #foot{ position:relative; width:100%; height:auto; background-color:#CCFFCC; clear:both; float: left; } ※sub_main1,2は●と○になります。 どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • wrapperなしでCSSのレイアウトは組まない方がいいですか?

    いつもお世話になっております。 実はふとした疑問というか挑戦といいますか・・・ いつもはとあるサイトさんからダウンロードしたテンプレートの枠組みを使用していたので、余り気にしていなかったのですが、今回フッター部分もヘッダー部分と同様にrepeat-xをして永遠に延長したデザインを作りたいと考えています。 ヘッダー部分は背景を上に合わせて作れば問題ないと思うのですが、フッター部分はページごとに縦の長さが違うためそれぞれ別のスタイルシートを要するのもなんとなくやめたほうがいいようなきがしています。 そこでいつもはwrapperで囲っていたためにヘッダー部分しか横軸を延長できなかったのですが、フッター部分だけをwarapperからはずして延長させたいとおもっています。 これは可能でしょうか? どうかよろしくお願いいたいします。 body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> </body> ------------------------------------------------- これを・・・ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:790px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:790px; height:100px; background-color:#CC9999; } /* 左側の設定*/ #left{ width:190px; height:550px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:600px; height:550px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:50px; background-color:#CCFFCC; clear:both; } ------------------------------------- <body> <DIV id="wrap"> <!-- ********* ヘッダー ******** --> <div id="head"> </div> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </DIV> <div id="foot"> </div> </body> ------------------------------------------------- このようにwrapperからはずしてレイアウトすることは可能でしょうか?色々いじっているとなんとか見た目はできたのですが、縮小するとフッターが真ん中あたりに来たり、なにかと不安でして・・・ かなり長文になりましたが、どうかよろしくお願いたします。

    • ベストアンサー
    • HTML
  • CSS:区画のレイアウト1

    現在、CSSの練習中なんですが、 http://kokoro.es.land.to/HTML/Rensyuu.html 上記のURLで、最終的にURL内の下の図(CSSによる区画のレイアウト)のようなレイアウトにしたいのですが、Kukaku4_3(class名、色:red)のところで画面のあるとおり、Kukaku4_2(class名、色:navy)から下の方に範囲が伸びてしまい、うまくいきません。ほかにもいろいろ試したのですが、URL内の下の図(CSSによる区画のレイアウト)のようにするにはどうすればよいでしょうか? 回答よろしくお願いします。 div { float: left;} div.Kukaku1 { background-color:blue; width: 900px; height: 179px } div.Kukaku2_1 { background-color:green; width: 300px; height: 20px } div.Kukaku2_2 { background-color:aqua; width: 300px; height: 20px } div.Kukaku2_3 { background-color:gray; width: 300px; height: 20px } div.Kukaku3_1 { background-color: black; width: 250px; height: 300px; } div.Kukaku3_2 { background-color: fuchsia; width: 650px; height: 150px } div.Kukaku3_3 { background-color: lime; width: 650px; height: 150px } div.Kukaku4_1 { background-color: maroon; width: 500px; height: 80px } div.Kukaku4_2 { background-color: navy; width: 500px; height: 70px } div.Kukaku4_3 { background-color: red; width: 400px; height: 150px }

    • ベストアンサー
    • HTML
  • CSSのレイアウトについて

    CSSのレイアウトをダウンロードしました。 初心者ながら調べてやっていたのですが、2点ほど分からない点があります。 ・ヘッダー、フッター含め全ての幅を画面いっぱいにしたい。 widthを100%にしてみたのですが、レイアウトが崩れるだけで画面幅いっぱいにはなりませんでした。 ・3カラムの真ん中を固定幅900pxにしたい。 ご存知の方いらっしゃいましたらご教示ください。よろしくお願いします。 以下がCSSのソースです。 * { padding: 0; margin: 0; } body { font-family: Arial, Helvetica, sans-serif; font-size: 13px; } #wrapper { width: 922px; } #header { color: #333; width: 900px; float: left; padding: 10px; height: 200px; background: #E7DBD5; } #navigation { float: left; width: 900px; color: #333; padding: 10px; margin: 0px 0px 0px 0px; background: #BD9C8C; } #leftcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #content { float: left; color: #333; background: #F2F2E6; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 460px; display: inline; } #rightcolumn { color: #333; background: #E7DBD5; margin: 0px 0px 0px 0px; padding: 10px; height: 350px; width: 200px; float: left; } #footer { width: 900px; height: 200px; clear: both; color: #333; background: #BD9C8C; padding: 10px; }

    • 締切済み
    • CSS
  • CSSでのレイアウトが崩れてしまうんです。

    お世話になります。CSSビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px(contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。)/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう?素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか? ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }

  • htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困

    htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。 具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか? 【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }

  • <div>でレイアウトすると上下に空白が出る

    現在cssを独学で勉強中です。 どなたか解るか方、教えてください。 <div>の中にまた<div>でBOXをつくりcssでは"float"を使ってレイアウト しようとしています。 下記の内容でHTMLとcssを記述していますが、入れ子にした<div>要素の 上下に20pxくらいの空欄ができます。 これを出ないようにする方法はありますでしょうか? というか、記述としては合っているのでしょうか? 一応いろんなサイトを参考にして記述してはいます。 また、IEとfirefoxでは空欄の出方が違います。 たぶんIEのバグなんでしょうが、対処の方法も含めて教えていただけると ありがたいのですが... 空欄は"margin-top"を「-20px」とかにするとなくなるのですが 今度はSafariでその分要素自体が小さくなってしまいます。 宜しくお願いします。 ---HTML(一応DTDの部分から載せておきます)--------- <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja"> <head> <link rel="stylesheet" type="text/css" href="test3.css" /> <title></title> </head> <body> <div id="container">  <div id="boxA">  A(ヘッダ)  </div>  <div id="wrapper">   <div id="boxB">   B(メインカラム)   </div>   <div id="boxC">   C(サイドバー1)   </div>  </div>  <div id="boxD">  D(サイドバー2)  </div>  <div id="boxE">  E(フッタ)  </div> </div> </body> </html> --- css ----------------------- body { text-align:center; margin-top: 0px; } #container { width:800px; height: 800px; margin-top: 0px; margin-left:auto; margin-right:auto; text-align:left; background-color: #33FF66; } #boxA { width:100%; height: 150px; background-color: #9999CC; } #wrapper { width:620px; height: 200px; float:right; background-color: #33CC00; } #boxB { width:440px; height: 200px; float:left; background-color: #999933; } #boxC { width:180px; height: 200px; float:left; background-color: #FF9966; } #boxD { width:180px; height: 200px; float:right; background-color: #996699; } #boxE { width:100%; height: 150px; clear:right; background-color: #33CCCC; }

    • ベストアンサー
    • HTML
  • 段組みレイアウトがfloatleft上手くいきませ

    先程の投稿は、一度削除させて頂きました。 再度、投稿しなおします。 なんとか、以下の画像のところまで持ってくることが出来ました。 おかしなところ。 Q1 hedderの上に隙間10pxが出来てしまっている(本来は、黄色の色が一番上0pxの所まで持って行きたいです) Q2 全体が、centerに行かない、、、。左によってしまっております。 以上2点です。 宜しくお願いします。 失礼致します。 こんにちは。ycqと申します。 html+CSSでサイトを作っています。 簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。 heightは基本的に autoでも構いません。 #wrapper 950px #head 950px #main 950px (mainの中に) #main_left と#main_right があります。 #main_left 250px で左側メニューfloat:left; #main_right 700px で右側に回り込ませるために、きっちりと float:left; #main_right の中には #right_box_flash #contents #fotter が入ります。 |----------------------| |----|-----------------| | | | | |-----------------| | | | | |-----------------| |___|____________| 画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。 おかしい所がございますでしょうか? Q レイアウトがCenterを指定しているのに、真ん中にいかない。 Q #hedder の上部に10pxぐらいの空白ができている。margin:0px; padding:10px指定 お時間がございましたら、どうぞ、宜しくお願いいたします。 失礼致します。 index.html*************************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hogehoge</title> <link href="css/default.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="wrapper"> <div class="header"> <h2>header</h2> </div> <div class="main"> <div class="main_left"> </div> <div class="left_box_menu">   <h2>left_box_menu</h2> </div> </div> <div class="main_right"> <div class="right_box_flash"> <h2>right_box_flash</h2> </div> <div class="contents"> <h2>contents</h2> </div> <div class="footer"> <h2>footer</h2> </div> </div> </div> </div> </div> </body> </html> **************************************** default.css*********************************** @charset "utf-8"; /* CSS Document */ /*------------------------------*/ 共通設定 /*------------------------------*/ * { margin: 0; padding: 0; line-height: 1.6; font-family: "メイリオ","MS Pゴシック", "ヒラギノ角ゴ Pro W3"; list-style-type: none; } img{ border:none; } body{ margin: 0; padding: 0; text-align:center; background-color:red; } /*------------------------------*/ 大枠ボックス構成 /*------------------------------*/ .wrapper{ width:950px; height:1015; margin:0px auto; padding:0px;background-color:orange; } .header{ width:950px; height:100px; background-color:yellow; } .main{ width:950px; background-color:purple; } .main_left { width:250px; height:915px; margin:0px auto; padding:0px; float:left; background-color:DarkgGldenRod; } .left_box_menu{ width:250px; height:auto; float:left; background-color:khaki; margin:0px auto; padding:0px; } .main_right{ width:700px; height:auto; float:left; } .right_box_flash{ width:700px; height:300px; float:left; background-color:pink; } .contents{ width:700px; height:280px; float:left; background-color:blue; } .footer{ width:700px; height:115px; float:left; background-color:yellow;

    • ベストアンサー
    • CSS
  • CSSを使って、背景色をブラウザの縦100%につづかせたいです。

    こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100%になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 (ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。) --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100%; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>

  • CSSレイアウトについて

    cssによる3カラムを作っているのですがie6で見ると右のカラムが 落ちしてしまいます。 ie6のバグのようでdisplay: inline;を使うなどいろいろと試して みたのですがwidthとmarginの合計で1000px以内にしなければ ならないようなのですがその場合firefoxなどのブラウザで確認 すると若干ではありますが微妙に違いがでてきます。 下記のソースのように特に画像をいれなくてもbackgroundを設定 することによりカラム落ちはしなくなったのですがこの他に解決 方法はあるのでしょうか? また、なぜbackgroundを設定することにより解決したのかも 全く意味不明なのでご存知の方がおりましたら教えてください。 #contents { width: 1000px; } #left { display: inline; float: left; width: 180px; text-align: left; background: url(); } #center { display: inline; float: left; width: 600px; margin: 0 20px; text-align: left; background: url(); } #right { display: inline; float: left; width: 180px; text-align: left; background: url(); } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> ~略~ <div id="contents"> <div id="left">レフト</div> <div id="center">センター</div> <div id="right">ライト</div> </div> ~略~

    • ベストアンサー
    • CSS