スタイルシートでの段組指定について

このQ&Aのポイント
  • HTMLやCSSを初めて書いている方へ、スタイルシートの「float」指定を使った段組みについて解説します。
  • 主なブラウザでの表示の違いや、floatの解釈についても説明します。
  • また、ネスケ4.73に対するごまかしテクニックについても考えてみましょう。
回答を見る
  • ベストアンサー

スタイルシートでの段組指定について

こんにちは。HTMLやCSSを初めて書いています。 スタイルシートの「float」指定を使って 左右の段組(合計で左右幅100%)をしたいと思います。 コードは以下のように書きました(背景色は適当)。 ---------------------------------------------- .column { float : left ;} #menu { width : 20% ; background-color : red ;} #main { width : 80% ; background-color : blue ;} ---------------------------------------------- タグ指定は <div class="column" id="menu"> 等です。 これを主なブラウザ(IE6.0/ネスケ7.1/Opera7)で 表示させると「20+80=100%」になるのですが、 ネスケ4.73は「20+80*80=84%」なのか、右に空白ができます。 では、と、#main の80%指定を削ったところ、今度は ネスケ7.1 や Opera7 で float が利いてくれません。 質問1)float については各ソフト、こういう解釈なのでしょうか? それとも私の記述が間違っているのでしょうか? 質問2)そういうものである場合、ネスケ4.73に対する ごまかしテクニックはあるのでしょうか?(テーブルの使用を除く) bodyの背景色を右段と同じにする方法はイマイチです。 よろしくお願いいたします。

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

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

  • ベストアンサー
  • elttac
  • ベストアンサー率70% (592/839)
回答No.1

 詳しく調べていないので外しているかもしれませんが,お答えします。 1)  float の解釈(というか定義)は,Netscpe 7,Opera 7 が「正解」です。width プロパティがない,明示的な幅のない float されたボックスは,「幅が 0」になります。Internet Explorer は,気を利かせて補います(実装としては誤りです)。  Netscape 4 に関しては,CSS の対応は論外です。最悪の場合,CSS の使用でハングすることありますので。どのような結果になっても,こればかりは致し方ありません。 2)  Netscape 4 に CSS を「読ませない」という方法があります。お調べになればすぐにわかることでしょう。  Netscape 4 に別個の CSS を与えることもできますが,これはなかなか難しく,手間の割に報われないと思われます。

noname#8841
質問者

お礼

ご回答ありがとうございました。 閲覧者の立場としてはぼんやりWebページを見ていたのですが 単に画面を2分割し色分けすることが、 こんなに難しいとは思ってもみませんでした。 きれいにつくれたなと思えるものが、Netscape4で確認すると とんでもないコトになり、涙、涙の日々を過ごしています。 Netscape4を無視しちゃえという危険な誘惑にもかられるのですが 知人がその4を使っているんですよね(涙)。 ご助言を受け「振り分け」をキーワードに加え検索してみると、 いろいろと有効な情報を得ることができました。 ありがとうございました。Netscape4を振り分けていこうかなと 考え始めています。

関連するQ&A

  • スタイルシートで上手く段組が出来ません。

    スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか? よろしくお願いしますm(_ _)m

  • CSSの背景の指定

    2つのブロック要素を左右に分けて表示しようとしましたが、#contentの内容と#naviの内容が大きさに差がある場合に背景が透けてしまうのですがどうすればよいでしょうか? 僕の予想では、#main_contentの背景が適用されると思ったのですがうまく機能していないみたいです。ここには書いていませんが、bodyに背景画像を入れていて、その画像がボックス内に出てしまうという感じです。 #naviや#contentにheightを指定してやると#main_contentの背景が余白の部分にちゃんとくるのですが、そのページごとにどちらが長くなるか予想できないので余った部分にきちんと指定した色がくるようにしたいです。 (ここでは便宜的に背景色を3色別々にしています。本来はすべて#fffにしようと思っています。) #main_content { background-color: #ff0; } /*content*/ #content { float: right; width: 512px; background-color: #f0f; } #content_inner { } /*navi*/ #navi { float: left; width: 256px; background-color: #0ff; } #navi_inner { }

    • ベストアンサー
    • HTML
  • カラムで段組と段組の間に隙間が埋ができる

    カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。

    • ベストアンサー
    • HTML
  • Firefox、Netscapeでレイアウトが崩れる(スタイルシート)

    2段組レイアウト、 左がナビゲーションメニューで ロールオーバーボタンのような効果を出したくて、 IEとOperaでは正常に表示・動作したのですが FirefoxとNetscapeで、レイアウトが大きく崩れてしまいます。 メニュー箇所のソースは以下です。 【HTML】 <div id="side"> <div id="sidelist"> <ul> <li><a href="#">メニュー1</a></li><br> <li><a href="#">メニュー2</a></li><br> </ul> </div> </div> 【CSS】 #side{ float:left; position:absoulte; width:200px; height:100%; padding:0; background-color:#ffffff; } #sidelist ul{ margin:0; padding:0; list-style:none; } #sidelist li{ display:inline; } #sidelist a,#sidelist a:link #sidelist a:visited{ width:100%; height:100%; padding:10px 20px; border-bottom:1px solid #333333; background-color:#cccccc; color:#333333; text-decoration:none; } #sidelist a:hover{ width:100%; height:100%; paddint:0; margin:0; color:ffffff; background-color:#666666; } headerの幅を800px、mainの幅を600pxに指定したので ナビゲーションメニューとなるsideは 200pxに指定しましたが、 数値を減らしてみてもやはり崩れます。 FirefoxとNetscapeでも崩れずに 表示させる方法はあるでしょうか? よろしくお願いします。 なお、ブラウザは全て最新バージョンです。

    • ベストアンサー
    • HTML
  • スタイルシート 外部ファイルについて質問です。

    スタイルシート 外部ファイルについて質問です。 レイアウト用のスタイルシート <style type="text/css"> <!-- .outer { width:; background-color:; padding:15px; margin:0 auto 0 auto; } .menu { float:left; width:20%; background-color:; height:100%; } .main { float:right; width:70%; background-color:; height:100%; } .clears{ clear:both; } --> </style> を、外部ファイルに移したいのですが、やり方が分かりません。 現在ページ内で <div class="outer">   <!-- 左スタイル 開始 -->   <div class="menu">   文章など   </div>   <!-- 右スタイル 開始 -->   <div class="main">   文章など   </div>   <!-- 右スタイル おわり --> <br class="clears"> </div> <!-- 左右スタイルシート おわり --> という方法で表記しています。 外部ファイルへの移し方、外部ファイルの中身をどうしたらいいか、 お手数ですが、教えていただけると幸いです。

  • スタイルシートのpositionでフッターを位置指定するには

    こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }

  • floatによる段組について

    昨日はお叱りを受けて全面的に見直しています。 つきましては、この機会にお伺いしたい事があります。 divをfloatで並べることを段組というみたいですね。 下でclearを入れてます。これが定番らしいので。 #contentの中にdivAとdivBがあります。 その下にクリア用のdivCを置いてます。   #contentをwidth:100%で指定するとカラム落ちします。 なのでwidth:800pxとかで指定しています。 そしてdivAとdivBのwidthも固定で指定しています。 こうするとカラム落ちが防げます。 width:100%が流動的で自然なのは分かります。 こちらでカラム落ちしない方法があればベストです。 上記のように固定で考えるのは仕方ないのでしょうか。

    • ベストアンサー
    • CSS
  • 段組みレイアウトが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
  • スタイルシートでのレイアウトについて

    スタイルシートでレイアウトしたく、フリーのテンプレートからソースをもってきました。  -HTML- <div id="outline"> <div class="main"> メイン上部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド上部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="main"> メイン下部コンテンツ部分 </div><!-- end main --> <div class="side"> サイド下部メニュー部分 </div><!-- end side --> <br class="c-both"> <div class="footer"> フッター部分 </div><!-- end footer --> </div><!-- end outline -->  -CSS- #outline{ width : 750px ; text-align : left ; border : solid 1px #000000 ; } .main { width : 200px ; background : #ebebeb ; margin-bottom : 10px ; float : left ; } .side { width : 540px ; background : #ebebeb ; margin-bottom : 10px ; float : right ; } .c-both { clear : both ; } .footer{ width : 100% ; background : #ebebeb ; } そこで、"上部コンテンツ部分"と"下部コンテンツ部分"の高さを、それぞれ違う高さにしたいのですが、どうしたら良いでしょうか? あと、メイン上部コンテンツ部分・サイド上部メニュー部分、メイン下部コンテンツ部分・サイド下部メニュー部分の下に、同じように行を追加したいのですが、どうしたら良いでしょうか? スタイルシートの段組みで、非常に困っています。 助けて下さいm(_ _)m

  • 外部スタイルシートは同じなのですが…

    こんばんは。 HTMLをコーディングしていて困ったことが出て来たのでご指導願います。 外部スタイルシートで共通のスタイルシートを指定し、コンテンツを組んでいるのですが、画像を挿入するとセンターで指定しているボックスが微妙に左へずれるのです。 HTMLのコードは下記/// <body> <div class="bace"> <div class="hedder"></div> <div id="menu"> <div class="menu"> <div class="menu_box"><a href="info.html">当サイトについて</a></div> <div class="menu_box"><a href="time.html">時間</a></div> <div class="menu_box_act">アクセス</div> <div class="menu_box"><a href="profile.html">紹介</a></div> <div class="menu_box"><a href="index.html">トップページ</a></div> <div class="clear"></div> </div> </div> <div class="main"> <h1>アクセス</h1> <div class="main_text"> <div align="center"><img src="map.jpg"/></div>  ←この部分で画像指示をするとレイアウトが左へずれる。 </div> <div class="main_text"> <h2>アクセス/設備</h2> ○○○徒歩3分<br /> 駐車場2台(バリアフリー)<br /> <br /> <h2>住所</h2> 〒000000000000000000000000<br /> 電話 123-456-789 </div> </div> <div class="futter">Copyright &copy; 2007 All Rights Reserved</div> </div> </body> CSSは下記/// * { margin:0; padding:0; } .bace{ width:750px; height: auto; margin-right: auto; margin-left: auto; font-size:90%; } .hedder{ width:750px; height:150px; background-image: url(hed.jpg); background-repeat: no-repeat; } .menu{ width:700px; height:30px; margin-top: 10px; padding-right: 25px; padding-left: 25px; } .menu_box{ height:30px; width:120px; float:left; margin-right: 10px; margin-left: 10px; } .menu_box_act{ height:30px; width:120px; float:left; margin-right:10px; margin-left:10px; display:block; text-align:center; line-height:30px; background-image: url(menu_back2.jpg); background-repeat: repeat-x; } .main{ width:670px; padding-right: 40px; padding-left: 40px; margin-top: 15px; height: auto; } .main_text{ margin-top: 5px; padding-right: 15px; padding-left: 15px; width: 640px; margin-bottom: 5px; height: auto; position: relative; } .futter{ height:15px; width:750px; text-align:center; background-color: #002187; color: #CCCCCC; margin-top: 15px; font-size: 90%; } .clear{ float:clear; } /* メニュー用リンクスタイル */ #menu a{ display:block; color:#333333; height:30px; line-height:30px; text-decoration:none; text-align:center; background-image: url(menu_back1.jpg); background-repeat: repeat-x; } #menu a:hover,a:focus{ color:#333333; background-image: url(menu_back3.jpg); background-repeat: repeat-x; } #menu a:active{ color:#333333; background-image:url(menu_back2.jpg); background-repeat:repeat-x; } 画像を入れないと全くぶれないのに、入れた途端レイアウトはそのまま左右へぶれるということが起こるのでしょうか? リンクをサイト内でたどるとこのページだけ左へずれて違和感があります。 ご指摘の程、どうぞよろしくお願いいたします。

    • ベストアンサー
    • HTML

専門家に質問してみよう