• ベストアンサー
  • 困ってます

ブラウザごとにCSS?

こんにちは。 HTMLとCSSを使ったホームページを作っています。 確認用のブラウザにSleipnirを使っています。 下のように記述し、ブラウザエンジンを切り替えて見たところ、それぞれ幅が違うことに気づきました。 幅が異なると、デザインもグチャグチャになってくるので、大変困っています。 これを回避、対処する方法を教えて欲しいです。 補足もなるべく早くさせてもらいます。 どうかよろしくお願いします。 <style type="text/css"> div{ border:solid #cccccc 1px; width:750px; margin:5px; } #all{ width:800px; height:auto; text-align:center; } #header{ height:200px; } #main{ height:auto !important; height:15em; min-height:15em; } #footer{ font-size:10px; height:2em; } </style> <div id="all"> <div id="header"> </div> <div id="main"> </div> <div id="footer"> </div> </div>

noname#77303
noname#77303

共感・応援の気持ちを伝えよう!

  • 回答数5
  • 閲覧数573
  • ありがとう数5

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

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

参考までに、自分が良く使うブラウザ毎のCSS分けです。 ■import.css ↓Firefoxなど、モダンブラウザ系に使用(これがベース) @import "style.css"; ↓Mac IE5.x用 /*\*//*/ @import "mac_ie5x.css"; /**/ ↓Windows 旧IE5.0~5.5用 @media tty { i{content:"\";/*" "*/}} @import 'win_ie5x.css'; /*";} }/* */ ■HTML ↓Windows IE6専用 <!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" media="screen" /><![endif]--> ↓Windows IE7専用 <!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen" /><![endif]--> あとは、ハックとか使いながらブラウザ毎に読み込む属性を変更したりとか。 ちなみに、DOCTYPEは以下です。 <!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" xml:lang="ja">

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 ブラウザ別にCSSを用意されているとの事で、面倒くさがりな自分とは違い、とても丁寧に作られているんだなあと思いました。 ハックというのも、調べながら実装している最中です。 XHTMLは未だに、Strictのままなのですが、今のところ影響は無いようです。 それにしても、仕様が統一されてさえすれば、1つのファイルで済むのに・・・。

関連するQ&A

  • CSSが正確に反映されません。

    4つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>

    • 締切済み
    • CSS
  • cssで擬似フレームについて

    はじめて質問させていただく、CSS初心者のものです。 下記のdivタグを画面中央寄せにする方法はあるのでしょうか? HTMLとCSSは下記のように書いています。 HTML <body> <div id="header"> (width="800" height="180" のflashファイルを入れています) </div> <div id="main">  ( width="700"のコンテンツを作りスクロールさせていま)  </div> <div id="footer">テキストを一行入れています</div> </body> ___________________ css html{ height:100%; overflow:hidden; } body{ height:100%; width:100%; margin:0px auto; background-color: #000000; }   #header{ position: absolute; height: 180px; width: 800px; overflow: hidden; top: 0px; }  #main{ overflow: auto; position: absolute; width: 800px; top: 180px; bottom: 20px; background-color: #FFFFFF; } #footer{ position: absolute; width: 800px; bottom: 0px; font-family: "Courier New", Courier, mono; font-size: medium; font-style: italic; color: #00FF33; height: 20px; background-color: #000000; overflow: hidden; }  このような感じなのですがなにかいい方法があればご教授お願いいたします。

    • ベストアンサー
    • HTML
  • このようなレイアウトをCSSで記述すると・・・?

    恐縮ですが、単刀直入に質問させてください。 図のようなデザインを作りたいのですが、レイアウトと幅に関する部分だけCSSで書いて頂けませんか? 僕自身勉強して書いてみたのですが、ブラウザによって幅が微妙にズレる事があるようです。 出来れば、そうならないよう記述して頂けると助かります。 どうかよろしくお願いします。 (もちろん、補足要求にもお答えさせて頂きます) :(id名):幅 高さの順で all :width 740px height 560px header :width 720px height 90px news :width 720px height 30px menu :width 150px height 320px main :width 555px height 370px footer :width 720px height 20px allの中にある全ての枠組み(header,news,menu,main,footer)はそれぞれ他の枠組みと10pxだけ空いているようにしたいです。

    • ベストアンサー
    • CSS

その他の回答 (4)

  • 回答No.5
noname#100277
noname#100277

もう既に大抵の回答は出てるので、私からは・・・ 基本的な書式はFirefoxを基準にする。 そして他のブラウザで確認して、表示上で手を入れたい箇所が在ったらハックで入れる。 コレ位でしょうか? 挙動確認は極力多くのブラウザで確認してます。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 Sleipnirひとつで事足りるだろうと思っていた所が甘かったようです。 早速、Firefoxをダウンロードしてみます。

  • 回答No.4
noname#66720
noname#66720

>IE6での表示はきちんとしていました。 その他のブラウザで表示が崩れるときは、CSSでIEのバグを利用してしまっている場合がほとんどです。 SleipnirではGeckoにエンジンの切り替えができるようなので、それをメインにしたほうが良いと思います。 IE6で表示が大丈夫でも、IE7で崩れるかもしれませんし・・・ もう直ったかもしれませんが、 ・widthとpaddingまたはborderを一緒に指定しない ・floatを使った要素にmarginを指定する場合display:inline;を指定する 幅や余白が関係する場合、このどちらかが問題のことが大半です。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 未だに、微妙な誤差は直っていません。 ブラウザエンジンは、普段はIEを使っていたので、Geckoについてもきちんと表示できるようにしたいと思います。 しかしながら、width、padding、borderはどれも必要不可欠なもので、別々にするのは、なかなか難しいです・・・。

  • 回答No.2
noname#66720
noname#66720

記述されている内容からでは怪しいのはborderくらいのものですが・・・ 問題があるとすれば ・dtd宣言で互換モードになる ・xml宣言で互換モードになる というのが一番大きいかもしれません。 対応させるブラウザの範囲にもよりますが、幅が変わってしまうということはxml宣言ありのXHTMLのstrictとかでしょうか。 IE6以上とモダンブラウザ対応ならHTMLで作るか、XHTML transitionalで作るのが無難な気がします。 他の要因だとすれば、大抵はIEのバグが原因なので、 http://cssbug.at.infoseek.co.jp/ こういうサイトで調べて適宜修正していくといいと思います。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 ご指摘の通り、XHTML1.0 Strictでした。 長くならないよう<BODY>の中身だけを引っ張ってきた為、記述していませんでした。 IE6での表示はきちんとしていました。 とりあえず、IE6以外で効果のあるmax-heightやmin-widthを使って一時的にしのぐ事は出来ました。が、それもどうだか・・・。

  • 回答No.1
  • 04510
  • ベストアンサー率58% (548/937)

CSSは、同じIEでもVerによってずれてしまったりするので、 本当、しらみつぶしに治していくしかないとおもいます。 コチラのサイトとか参考になるとおもいます。 http://rich.pleasure911.com/hp_tech/hp_tech08.html google:CSS ブラウザ 互換 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja%3Aofficial&hs=gcU&q=CSS%E3%80%80%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%80%80%E4%BA%92%E6%8F%9B&btnG=%E6%A4%9C%E7%B4%A2&lr=lang_ja

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 教えていただいたページを見ました。 ブラウザによって表現に差が生じてしまうんですね。 幅を細かく指定してしまったため、デザインが崩れるのも無理はないようです・・・。

関連するQ&A

  • CSSで画面を構成しています。

    CSSで画面を構成しています。 左ブロック、右ブロック共に角丸の四角にしたいので、**_head.gifというようなフタとソコになるような画像を使っています。 このままだと左右ブロックの高さが当然そろわないのですが、何か良い方法はないでしょうか? テーブルレイアウト以外であれば、多少イレギュラーな方法でもかまいません。 *css********** div#body{width:800px; margin:10px auto; text-align:center; padding:0; } div#header{padding:0; margin:0 0 10px 0; background-image:url(**.gif); width:800px; height:50px; text-align:left; } div#main{ width:800px; text-align:left; } div#submenu{padding:0; margin:0 10px 10px 0; width:200px; text-align:left; float:left; } div#contents{padding:0; margin:0 0 10px 210px; width:590px; text-align:left; } div#footer{padding:0; margin:0 0 5px 0; clear:both; width:800px; height:30px; text-align:left; } *html**** <div id="body"> <div id="header"> ヘッダー </div> <div id="main"> <div id="submenu"> <img src="img/common/sub_head.gif" width="200" height="10" />  <div>左ブロック</div> <img src="img/common/sub_foot.gif" width="200" height="10" /> </div> <div id="contents"> <img src="img/common/main_head.gif" width="590" height="10" />  <div>右ブロック</div> <img src="img/common/main_foot.gif" width="590" height="10" /> </div> </div> <div id="footer"> フッター </div> </div>

    • ベストアンサー
    • HTML
  • 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での質問です

    初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか? ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか?

  • CSSについて 入力フォームの上下揃い

    CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう?

  • CSS-heightの自動調節について

    CSSを使いホームページ作成をしております。 一番上にロゴやフラッシュ、メニューを置き、その下の #mainという<div>の中に、#sideと#textの2つの<div>を横に並ばせ入れ込んでいるのですが、 #main全体の高さを、背景入りで、文字に合わせて自動調節したいと思っています。 しかし#mainのCSSにheight:auto;を書き込んでも表示されません。 普通はheightは指定しなくても自動で調節されるものだと思っていたのですが、できなかったのでautoと書いたのですがダメでした。 heightをピクセルで指定すると表示されますが、文字を飛び越えて表示されてしまいます。 解る方どうかご回答お願い致します。 CSSについては初心者のため記述がおかしい部分もあるかもしれませんが、HTMLとCSSは以下の通りです。 【HTML】 <div id="main"> <div id="side"> <p>左サイド</p> </div><!--side end--> <div id="text"> <p>右サイド</p> </div><!--text end--> </div><!--main end--> 【CSS】 #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; }

  • footerを{position:absolute;bottom:0p

    footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。            これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか? 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって) </div> <div id="mainContainer"> ・・・・中略(3カラム等あって) </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。

  • cssでコーディング レイアウト重なってしまう

    たすけてください かれこれ数時間<div id>でレイアウトした子たちがいうことをきかずtop=0pxのてっぺんで 重なり作業ができません。positionの設定がいけないのはわかっています。。。 上から順にheader→nav→a→b(c1,c2)→footerです。 jqueryでnavを下にスクロールしていってもwindowの上に表示されるよううごかしたのですが、 navがうごくようになったら他の<div>がきゅっとうえによってしましました。 他のものをposotion:fixedで固定してみたら、今度はmainがくずれ。。。 空が白みはじめたのであきらめましたが配置ができないと次に行けず途方にくれています。 以下にソース書きます。 お願いいたします。 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <script src="jquery.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var dy=$(this).scrollTop(); console.log(dy); $("#nav").css("top",150+dy/8); }); }); </script> <body> <div id="wrap"> <div id="header" class="box"></div> <div id="nav" class="box"></div> <div id="a"></div> <div id="b" class="box"> <div class="c_box" id="c1"></div> <div class="c_box" id="c2"></div> </div> <div id="footer"></div> </div> </body> <style type="text/css"> .box { margin:0 auto; width:1260px; position:fixed;} #wrap { weidth:1260px;} #header { height:145px; background:#fcc; } #nav { height:69px; background:#ccc; top:150px; } #a { width:1285px; height:522px; background:#ccf; } #b { height:758px; background:#cff; padding-top:44px; padding-left:24px; position:relative;} .c_box { width:332px; height:328px; border:1px solid #000; padding:6px 15px 20px -25px; } #c1 { position:absolute; left:24px; top:308px; } #c2 { position:absolute; left:465px; top:308px; } #footer { height:100px; background:#fac; } </style>

    • ベストアンサー
    • CSS
  • cssのmarginについて教えてください

    cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin(下記におけるdiv#header pの部分)が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 (この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。) marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか? div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>

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

    • ベストアンサー
    • CSS
  • perlで3カラムにしたい (css)

    perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム(三段組み)、最下部をフッターにしたいと考えています。 ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。 どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。 m(_ _)m 当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。 よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定(755px)でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>

    • ベストアンサー
    • CSS