• 締切済み

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
  • 回答数3
  • ありがとう数0

みんなの回答

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

No.2です。 absoluteのつづり間違えてましたね。 単純に、asideを広くしてそれに見合うようにsection sectionの右を空けるだけです。 下記はHTML4.01strictです。 ★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html# ) 　にてチェック済み--ご確認ください。 　文書構造しか書いてないので、内容を内容を追加するのは楽だと思います。なによりもスタイルシートで好きなようにデザインできますし、デザインの自由度も高くなります。またSEOとしても万全です。 　1) HTMLを作成する段階でデザインを考えたらダメです。 　2) HTMLさえきちんと書けていたら下記サイトや例のようにデザインは自由になります。 　3) HTML/CSSがシンプルでわかり易くなり、いずれか一方を見るだけでメンテナンスできます。 　表示させてウィンドウ幅を大きくしても小さくしても中央に表示されるはずですし、スマホの640px幅でもよいはず。 　ナビゲーションなどはHTMLもデザインもしてありません。ナビゲーションリストを様々にデザインしてみよう。 　 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- body{color: #333;} div.header,div.nav,div.section,div.footer{ width:90%;max-width:900px;min-width:640px; margin:0 auto; padding:10px; } div.header{background-color: #E7DBD5;} div.nav,div.footer{background-color: #BD9C8C;} div.section{position:relative;} div.section div.section{margin:0 200px;width:auto;min-width:0;background-color: #F2F2E6;} div.section div.contentTable, div.section div.aside{position:absolute;top:0;width:200px;height:100%;background-color: #E7DBD5;} div.section div.contentTable{left:0;} div.section div.aside{right:0;} /* わかりやすいように色と高さを指定してみる。 */ div.header{min-height:300px;} div.nav{height:30px;} div.section div.section{min-height:600px;} /* 希望によりサイズを変更 */ div.section div.section{margin:0 40% 0 20%;width:auto;min-width:0;background-color: #F2F2E6;} div.section div.contentTable, div.section div.aside{position:absolute;top:0;height:100%;background-color: #E7DBD5;} div.section div.contentTable{width:19%;} div.section div.aside{width:38%;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>ページタイトル</h1> ＿</div> ＿<div class="nav"> ＿＿ナビ ＿</div> ＿<div class="section"> ＿＿<div class="section"> ＿＿＿[本文] ＿＿</div> ＿＿<div class="contentTable"> ＿＿＿[目次] ＿＿</div> ＿＿<div class="aside"> ＿＿＿[付録] ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿[文書情報] ＿</div> </body> </html>

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

HTMLもCSSもとてもまずいので大変ですね。 HTMLのclass名やidは「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」とされて(1999年)いて久しいのに・・。 　それでは、HTMLを見なくては解らないという悲劇的なことになります。 　HTMLがちゃんと書かれていれば、 body{color: #333;} div.header,div.nav,div.section,div.footer{ width:90%;max-width:900px;min-width:640px; margin:0 auto; padding:10px; } div.header{background-color: #E7DBD5;} div.nav,div.footer{background-color: #BD9C8C;} div.section{position:relative;} div.section div.section{margin:0 200px;width:auto;min-width:0;background-color: #F2F2E6;} div.section div.contentTable, div.section div.aside{position:abslute;top:0;width:200px;height:100%;background-color: #E7DBD5;} div.section div.contentTable{left:0;} div.section div.aside{right:0;} だけで期待された配置になるはずですし、HTMLを見なくても解りますよね。先で目次(contentTable)を右に置こうが、下に置こうが自由自在です。 それでいて、幅広のディスプレイにもスマホのような狭いディスプレイでも中央に表示されますね。HTMLもスタイルシートを見るだけで想像がつきます。 すなわち <body> 　<div class="header"> 　</div> 　<div class="nav"> 　</div> 　<div class="section"> 　　<div class="section"> 　　</div> 　　<div class="contentTable"> 　　</div> 　　<div class="aside"> 　　</div> 　</div> 　<div class="footer"> 　</div> </body> まもなく勧告のHTML5でしたら body{color: #333;} header,nav,section,footer{ width:90%;max-width:900px;min-width:640px; margin:0 auto; padding:10px; } header{background-color: #E7DBD5;} nav,footer{background-color: #BD9C8C;} section{position:relative;} section section{margin:0 200px;width:auto;min-width:0;background-color: #F2F2E6;} section contentTable, section aside{position:abslute;top:0;width:200px;height:100%;background-color: #E7DBD5;} section contentTable{left:0;} section aside{right:0;} <body> 　<header><!-- ヘッダ --> 　</header> 　<nav><!-- ナビゲーション --> 　</nav> 　<section><!-- 本文(章) --> 　　<section><!-- 本文(項) --> 　　</section> 　　<div class="contentTable"> 　　</div> 　　<aside><!-- 本文と直接関係ない記事 --> 　　</aside> 　</section> 　<footer><!-- フッタ --> 　</footer> </body> 配置とは関係ありませんが、colorプロパティは継承されますから親要素に書けば良いです。background-colorは継承されませんがinheritで継承させることが出来ます。 　また、基本的なことですがidはjavascriptやリンクのターゲットになるとか、よほどのことがない限り使わないほうが良いです。id(一意セレクタ)は詳細度が[0,1,0,0,]と高く、しかも一箇所にしか使えませんからスタイルシートが冗長になる原因になります。 　いちいちidをつけなくても、クラスセレクタ、子孫セレクタや兄弟セレクタなどを上手に使いましょう。 　巾とたかさの両方を固定してしまうと、目の悪いユーザーがフォントを大きくすると入りきらなくなっちゃいます。すくなくとも高さはフリーにしておきましょう。

keisuke1258
質問者

補足

ORUKA1951さん 回答ありがとうございます。 実行してみたのですが、ちょっと私の想像するレイアウトとは違いました。 こちらのサイトのようなレイアウトにしたかったのですが。 http://www.yamaga-fc.com/ お手数をお掛けしますが、よろしくお願いします。

  • too_bad
  • ベストアンサー率53% (70/130)
回答No.1

HTMLもお書きいただかないと、どこにどのCSSを割り当てているのかわかりません。 人間を見ただけでどのメーカーのどのPCを使っているかなんてのが分かる人は別ですが、 構造が分からなければ中身だけ伝えられても見えてこないものです。 CSSの内容も必要ですが、併せてHTMLの記述もお願いします。

keisuke1258
質問者

補足

失礼しました。HTMLは下記のようになってます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Fixed Width CSS Layouts - 3 Column - fw-36-3-col</title> <link rel="stylesheet" type="text/css" href="main.css" /> </head> <body> <!-- Begin Wrapper --> <div id="wrapper"> <!-- Begin Header --> <div id="header"> This is the Header </div> <!-- End Header --> <!-- Begin Navigation --> <div id="navigation"> This is the Navigation </div> <!-- End Navigation --> <!-- Begin Left Column --> <div id="leftcolumn"> Left Column </div> <!-- End Left Column --> <!-- Begin Content Column --> <div id="content"> <a href="#">Download this CSS Layout</a> </div> <!-- End Content Column --> <!-- Begin Right Column --> <div id="rightcolumn"> Right Column </div> <!-- End Right Column --> <!-- Begin Footer --> <div id="footer"> This is the Footer </div> <!-- End Footer --> </div> <!-- End Wrapper --> </body> </html>

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

関連するQ&A

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

    はじめまして。 現在、CSS初心者でお店のホームページを作成しているのですが、作ったサイトのレイアウトがブラウザごとにレイアウトが違って見えます。 細かな部分でも違って見えてきてしまっているのですが、大枠のレイアウトが崩れてしまっていて、なんとか修正できないものかと頑張っています。 ■■■■■■　　　　■＝ヘッダー □□●●●●　　　　□＝メニュー □□●●●●　　　　●＝コンテンツ（中身）1 □□○○○○　　　　○＝コンテンツ（中身）2 □□○○○○　　　　▲＝フッター ▲▲▲▲▲▲ このようなレイアウトで組んでいるのですが、初心者なため、ひたすら「div」で囲って、さらにその中をdivで囲ってなんとかレイアウトを組みました。 そこで、問題の崩れているレイアウトですが、メニュー（□）とコンテンツ（○+●）の部分の高さを「auto」にしているのですが、フッターの部分が左のメニュー（□）の高さにしかあっておらず、右のコンテンツの途中からフッターが出てきてしまいます。 ※コンテンツ（○+●）部分はさらに大枠の「right」で囲っており、メニュー部分は「left」で、両方ともdivで、高さは他と同様に「auto」トなっております。 ちなみにこの現象はIE７のみでして、IE６や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
  • CSSでレイアウトが崩れます

    CSSに挑戦したのですが、IE6.0とie7.0で若干表示がくります。 ただ、IEでは何とか表示します。 また、MAC IE5.2では、右側メインが左メニューの下に崩れて表示されてしまいます。 ドリームウィーバーでもやはり表示が崩れるのです。 cssは以下になります。 左と右のレイアウトに問題があるのでしょうか。一部省略しました。 #Wrapper { padding: 0px; width: 800px; display: block; margin: 0px; background: url(../images/bg_img_01.jpg) repeat-y bottom; height: auto; } body { margin: 0px; padding: 0px; text-align: center; color: #333333; font-size: 12px; line-height: 150%; vertical-align: middle; } #imgR { padding: 0px; float: left; width: 500px; margin-top: 10px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #arrow { margin: 0px; padding: 0px; float: left; width: 500px; } #rContents { text-align: left; padding: 0px; margin-top: 30px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; color: #111184; } .TextRink { text-decoration: none; color: #FF6600; display: inline; margin: 0px; padding: 0px 0px 0px 5px; } #WrapperL { margin: 0px; padding: 0px; width: 215px; height: auto; float: left; } #WrapperR { padding: 0px; width: 563px; height: auto; margin-top: 0px; margin-right: 15px; margin-bottom: 0px; margin-left: 0px; } #Footer { padding: 0px; height: 52px; width: 563px; background-image: url(../images/footer.gif); background-repeat: no-repeat; display: block; float: left; background-position: bottom; margin: 50px 0px 0px; vertical-align: bottom; } .sabu-title { padding: 13px 0px 0px; } .underline1 { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #CCCCCC; } #Header { display: block; margin: 0px; padding: 0px; height: 147px; width: 563px; background-image: url(../images/header_img.jpg); background-repeat: no-repeat; } .HeaderText { color: #FFFFFF; padding-top: 3px; margin: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 150px; font-size: 10px; }

  • XHTML、CSSレイアウトでフッターを常に最下部に配置するには?

    フッターを最下部に表示したいのですが、#footerに position: fixed; bottom:0;を付け加えてもフッター だけ最下部に表示されコンテンツ部分がついてきません。 ヘイトに100%をつけくわえるのでしょうか? どうかご教授願います。 body { margin: 0; padding: 0; text-align:center; font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:1em; background-color:#CCCCCC; } ol,ul,li { margin: 0; padding: 0; } li { list-style:none; } h1,h2,h3,p { margin: 0; padding: 0; } #container { margin: 0 auto; text-align: left; width: 740px; height: 100%; background-color:#FFFFFF; } #header { width:740px; height:80px; margin:0; padding:0; background-color:#FFFFFF; background-image:url(img/nine_rogo.gif); background-repeat:no-repeat; background-position:left center; } #contents { width:740px; height:100%; margin:0; padding:0; background-color:#FFFFFF; } #menu { float:left; width:140px; height: auto; margin:0; padding:0; background-color:#FFFFFF; color:#000000; } #main { float:right; width:580px; height:auto; margin:0; padding:0 0 0 10px; background-color:#FFFFFF; color:#000000 } #footer { clear:both; width:740px; height:auto; background-color:#FFFFFF; color:#000000; font-size:1em; padding:0.3em 0; text-align:center; }

  • divタグ+CSSでのレイアウトで、Firefox, Operaで不必要な余白ができてしまいます。

    divタグ+CSSでレイアウトしようとしています。 横関係では全体がセンタリングされていて、縦関係においては、各ブロック要素間の余白がなくぴったりくっついている状態にしたいのですが、Firefox 1.0やOpera 8などを使ってレイアウトを確認すると、上下や要素間に余白が出来てしまい、なかなかうまくいきません。 以下、HTMLとCSSのソースを、レイアウトに関する部分だけ載せます。 [--HTML--] <body> <div id="all"> <div id="header"> <p>header</p> </div> <div id="body"> <p>body</p> </div> <div id="sidebar"> <p>sidebar</p> </div> <div id="footer"> <p>footer</p> </div> </div> </body> [--CSS--] @charset "shift_jis" body { margin: 0 auto; padding: 0; text-align: center; } div#all { width: 760px; background-color: blue; margin: 0 auto; padding: 0 0 20px; text-align: left; overflow: hidden; } div#header { position: relative; left: 17px; width: 717px; height: 50px; background-color: yellow; margin: 0; padding: 0; text-align: left; } div#body { position: relative; left: 17px; width: 522px; height: 200px; background-color: lime; margin: 0 0 2em; padding: 0; text-align: left; float: left; } div#sidebar { position: relative; left:32px; width: 180px; height: 200px; background-color: red; margin: 0 0 3em; padding: 0; float: left; } div#footer { position: relative; left: 17px; width: 717px; height: 100px; background-color: fuchsia; margin: 0; padding: 0; clear: both; } ---------- marginやpaddingを"0"にしているにもかかわらず、余白が生まれてしまうのはなぜなのでしょう・・？

    • ベストアンサー
    • CSS
  • CSSレイアウトの本当の正しいやり方

    CSSでヘッダーとフッター付きの2カラムレイアウトを書籍のサンプルを見て行ないました。 表示は何も問題ないのですが、色々とサンプルレイアウトのサイトを見ていると「main」でleft-marginfを指定しているのはなく、floatを指定しているのが多いのですが、下記でも合っているのでしょうか。 #wrap { width: 700px; margin: 0 auto; text-align: left; } #header { color: #fff; } #menu { width: 160px; float: left; } #main { margin-left: 160px; padding: 10px; } #footer { clear: both; padding: 10px; }

    • ベストアンサー
    • HTML
  • 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; }

  • CSSレイアウト・背景グラデーション

    初めまして <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" でCSSでヘッダー・右袖・左メイン・フッターとレイアウトしてます。 ヘッダーから下は右・左・フッターとコンテンツIDでまとめてます。 bodyと#wrapperを使いセンター表示にしてますがページによって テキストボリュームの差がかなりあるのでそれぞれのheightは設定してません。 autoでも非設定でも複数ブラウザで大丈夫だったので省きました。 このレイアウトでIE・Safari・FireFoxなどでレイアウト崩れはしないのですが、枠線を付けたり背景画像で境界線に影を付けたりすると問題が出ます。 FireFoxとSafariだけヘッダー部分にしか影が出ません。 IEやSleipnirではフッターまで反映されます。 ページ毎のテキストボリュームが違うためheight設定してませんが数値指定するとすべてのブラウザで反映されます。 heightに数値いれるとテキストが少ないページでは無駄な表示域がでてしまうので避けたいです。 解決策や当方の設定に問題点があるでしょうか？ 影画像は820pxで制作#wapperの背景に指定してます。 よろしくお願いします。 body { text-align: center; padding: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #wrapper { text-align: left; width: 800px; margin-top: 0px; margin-bottom: 0px; margin-right: auto; margin-left: auto; padding: 0px; } #header { margin: 0px; padding: 0px; width: 800px; height: 300px; } #contents { padding: 0px; margin-top: 10px; margin-right: 0px; margin-left: 0px; width: 800px; height: auto; margin-bottom: 0px; } #contents #left { margin: 0px; padding: 0px; width: 200px; float: left; height: auto; } #contents #right { padding: 0px; float: right; width: 600px; margin: 0px; height: 1280px; } #footer { margin: 0px; padding: 0px; width: 800px; height: 60px; } 上では#wrapperに画像設定してませんが#wrapperに背景設定してます。 どのブラウザでもレイアウト崩れは起きてないです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 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でレイアウトをセンターにしたい

    CSSで製作したのですが、デザインが右端によってしまいます。 作成している会社のモニターでは真ん中でちゃんとみれるのですが、 家で確認したところ右寄せになっていました。 Centerにもっていくにはどうすればよいでしょうか？ お教えくださいませ(困) 他にもおかしなところがあればお教えくださいませ。 body{ background-color: #000000; background-image: url(../imgs/back.gif); cursor: crosshair; margin: 0; padding: 0; } P{ margin: 0; text-align: center; font-family: DejaVuSans; font-size: 9pt; color: #C0C0C0; } h1{ font-family: serif; font-size: 3pt; color: #000000; } #wrapper{ width: 800px; margin-left: 450px; margin-right: auto; margin-top: 100px; } #logo{ width: 300px; float: left; padding-right: 5px; } #hako { margin-top: 80px; line-height:50px; padding-bottom: 15px; float: right; } #hako li { display:inline; list-style:none; padding-right:12px; float: left; background: url(../imgs/bpin.gif) left top no-repeat; line-height: 12px; padding-left: 20px; } #hako li{ font-family: DejaVuSans; font-size: 80%; } #hako li a{ color:#C0C0C0; text-decoration:none; border-bottom:solid 2px #ADABAE; } #hako li a:hover{ color:#66FFFF; border-bottom:solid 2px #CC0000; } #lightbox{ padding: 20px; width: 100%; text-align: center; background-repeat: no-repeat; }

  • 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作成は初めてです。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する