- ベストアンサー
固定幅＋可変幅レイアウトがなぜこれで実装可能？
神崎 渉瑠（@taloo）の回答
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2281)
#rightは100%になっていますが、コンテンツが描画される場所は#leftにかからない場所だけです。 #rightの内容を多くすると#leftの下にかかるようになるので、厳密には段組み表示にはなっていません。
関連するQ&A
- フッターを固定したい…
上の写真のようにDivを組んでいるのですが、 Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか? Div4はCSSでbackground-imageとして画像(jpg)が指定されています。 ●html <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>test</title> <link rel="stylesheet" href="design.css" type="text/css"> <style type="text/css"> </style> </head> <body> <div id="body"> <div id="main"> <div id="div1"> <p class="clip"> <img src="clip.jpg"alt="New clip!"> </p> <p class="b-design"> <a href="design.html"> <img src="b-design.jpg"> </a> </p> <p class="b-photo"> <a href="photo.html"> <img src="b-photo.jpg"> </a> </p> <p class="b-mail"> <a href="mailto:a@com"> <img src="b-mail.jpg"> </a> </p> </div> <div id="div2"> </div> <div id="div3"> </div> </div> <div id="div4"> </div> </div> </body> </html> ●CSS * {margin:0; padding:0} body {background-color:black; width:100%;} img {border-style:none} #body {position:relative; margin: 0 auto; width:800px} #main {} #div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")} #div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")} #div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")} #div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")} .clip {position:absolute; top:30px; left:20px} .b-design {position:absolute; top:290px; left:30px} .b-photo {position:absolute; top:320px; left:30px} .b-mail {position:absolute; top:350px; left:30px}
- ベストアンサー
- HTML
- xhtml+cssのレイアウト センタリング カラム落ち
xhtml+cssレイアウト超初心者です。 何か間違っている所があれば教えてください。 よろしくお願い致します。 【問題点】 １）全体がセンタリングにならない □□■■■■■□□ □□■■■■■□□ □□■■■■■□□(左右の中央にしたい) ２）subがカラム落ちしてしまっている？ mainとsubの下に『スト』という文字が入ってしまっています。 【cssソース】 @charset "Shift_JIS"; * {margin: 0; padding: 0; } body {color: #000000; font-size: 62.5%; } /*==wrapper==*/ div#wrapper { width: 950px; margin : 0 auto; } /*==heaber==*/ div#heaber { width: 950px; margin-bottom: 30px; background-color: #66CCFF; } /*==contents ==*/ div#contents { width: 950px; float: left; background-color:#66CCFF; } /*==main ==*/ div#main { width: 740px; margin-right: 20px; float: left; background-color:#6699FF; } /*==sub ==*/ div#sub { width: 190px; float: left; background-color:#6666FF; } /*==siteinfo ==*/ div#siteinfo { clear: both; width: 950px; background-color:#6633FF; } 【HTMLソース】 <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" media="tv, screen, projection, print" href="css/import.css" /> </head> <body> <div id="wrapper"> <div id="header"> <p>テキスト</p> <p>テキスト</p> </div><!--/header--> <div id="contents"> <div id="main"> <p>テキスト</p> <p>テキスト</p> </div><!--/main--> <div id="sub"> <p>テキスト</p> <p>テキスト</p> </div><!--/sub--> </div><!--/contents--> <div id="siteinfo"> <p>テキスト</p> <p>テキスト</p> </div><!--/siteinfo--> </div><!--/wrapper--> </body> </html>
- ベストアンサー
- HTML
- CSSがうまく読み込まれません
いつもお世話になっています。 Dreamweaver CS4でホームページ作りをしているのですが、 突然CSSが読み込まれなくなりました。 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <link href="CSS/test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="1"> <p>1</p> </div> <div id="2"> <p>2</p> </div> <div id="3"> <p>3</p> </div> <div id="4"> <p>4</p> </div> <div id="5"> <p>5</p> </div> </body> </html> cssのソースは body { padding: 20px; width: 850px; margin-right: auto; margin-left: auto; border: 1px solid #999; } #1 { width: 850px; background-color: #666; } #2 { width: 850px; background-color: #999; } #3 { background-color: #CCC; width: 850px; } #4 { background-color: #999; width: 850px; } #5 { background-color: #666; width: 850px; } です。 どちらもエンコーディングはUTF-8です。 ちなみにDreamweaverで制作中の表示ではCSSは反映されているのですが、 プレビューまたはサーバーにアップすると反映されません。 なにが原因なのでしょう。。。 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- cssでの幅の分割（固定・可変混合）がうまくできません
画面左をコンテンツ（幅は可変）・右をメニュー領域（幅は固定）とするために２分割し，さらにコンテンツを２段に分けようとして，次のような構成にしてみたのですが思い通りになりませんでした． <div style="width:200px; height:600px; background-color:#ccf; float:right"> メニュー </div> <div style="width:auto; height:600px; background-color:#fcc;"> <div style="width:50%; height:550px; background-color:#6f6; float:right">コンテンツB</div> <div style="width:auto; height:550px; background-color:#ff6;">コンテンツA</div> </div> ２段組は丁度半分ずつにしたかったので，右（コンテンツBの部分）のwidthを50%，左（コンテンツAの部分）はautoにしました．ＩＥ６では希望通りコンテンツ領域の幅の50%で表示されているようですが，firefoxではメニュー領域も含めたウインドウ全体の50%と解釈されているようで，ＩＥとは表示が異なり困っています．どちらのブラウザでもコンテンツ領域をちょうど半分ずつにするにはどうすればいいでしょうか？ ちなみに，コンテンツ内の左右を共に50%とすると，どちらのブラウザでもレイアウトが崩れてしまいます．firefoxならそうなっても仕方ないと思いますが，ＩＥでも崩れてしまうのは疑問です．できればこの点にも配慮して両方とも幅を50%と指定しても崩れない方法をお教えください．
- ベストアンサー
- HTML
- 枠線でメイン部分を囲み、フッターを一番下にもってくるには？
<!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"> <style type="text/css"> <!-- html,body { margin:0px; padding:0px; height:100%; } div#flame { width: 1000px; height:100%; margin-top: 10px; margin-left: 10px; padding: 20px; border-color: #999999; border-style: solid; border-width: 1px; } div#header { background-color:#999999; color:white; } div#container { background-color:#ffffee; } div#left { background-color: #cccccc; width: 200px; left: 0px; top: 0px; } div#content_right { background-color: #cccccc; margin-left: 210px; font-size: 10pt; line-height: 140%; left: 0px; } div#footer { width:100%; background-color:666666; color:white; } --> </style></head> <body> <div id="flame"> <div id="header">ヘッダー</div> <div id="content_right">メイン記事テキスト</div> <div id="left">左メニュー部分</div> </div> <div id="footer">フッター</div> </body> </html>
- ベストアンサー
- 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で高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- リキッドデザイン3カラム左端幅固定の個別スクロール
現在、リキッドデザインで幅3カラムのレイアウトをしようとしています。 左端のみ幅を178pxに固定し、中央と右のブロックはそれぞれ残りの画面を二分割し、最低幅401pxで制作した上に、それぞれのカラムを個別にスクロールさせようと考えています。 以下のコーディングでFirefoxとChrome、Safariでは想定したレイアウトを概ね実現できたのですが（厳密には中央と右のサイズが微妙に異なっていて調整できていません）、IE9以下は全てレイアウトが崩れて表示されてしまいます。 IE6はともかくとしても、IE7以降で崩れずにレイアウトを完成させる方法は無いでしょうか。 さらに欲を言えば中央と右カラムを完全に二分割のサイズにできるとありがたいです。 （こちらはできればで結構ですが。。。） おわかりいただける方、お知恵をお借りできないでしょうか。 ご迷惑をおかけしますが、よろしくお願いいたします。 ------------html------------ <div id="wrap"> <div id="contents"> <div id="wall"> <div id="nav"> 左ブロック </div> <div id="main"> 中央ブロック </div> </div> <div id="sub"> 右ブロッック </div> </div> </div> ---------------------------- ------------css------------ #wrap{ width:100%; text-align:left; min-height: 100%; font-size: 100%; } #contents{ position:fixed; overflow:auto; width:100%; min-width:980px; height:100%; margin-top:60px; } #wall{ position:fixed; overflow:auto; width:60%; min-width:579px; height:100%; } #nav{ position:fixed; overflow:auto; left:0px; width:178px; height:100%; } #main{ width:100%; min-width:401px; height:100%; margin-left:178px; } #sub{ width:40%; min-width:401px; height:100%; margin-left:60%; } ----------------------------
- ベストアンサー
- CSS
- ヘッダー・左カラムは固定、右カラム可変のレイアウト
CSSでレイアウトを制作中なのですが、途中から分からず止まっております。 今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。 height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。 ■CSS *{ margin:0px; padding:0px; } /** html */ html,body { height:100%; min-height:500px; overflow-y:hidden; } /** ヘッダ */ #header { height:125px; width:100%; } /** 左・右カラムの囲い */ #container { height:85%; margin-left:400px; } /** 左カラム */ #menu { float:left; height:85%; margin-left:-400px; overflow:auto; width:400px; } /** 右カラム */ #main{ float:right; height:100%; margin-left:430px; overflow:auto; width:100%; } /** フッタはありません */ ■HTML側 <div id="header"> ヘッダ </div> <div id="container"> <div id="menu"> 左カラム </div> </div> <div id="menu"> 右カラム </div> 以上です。 理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・ http://maps.google.co.jp/ Googleマップ http://map.yahoo.co.jp/ Yahooマップ どなたかお力添えをお貸しください。 宜しくお願いします。
- ベストアンサー
- CSS
- ２コラムのサイトをCSSで指定する方法
以下のようにtest.htmlとtest.cssを作成して２コラム（左がメニュー、右がコンテンツ）のレイアウトのサイトを作成した場合、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。逆に、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合、メニューの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 どのようにすれば、左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合でも、右のコンテンツ部分のデータ（文字、画像等）の行数が左のメニュー部分のデータの行数よりも多い場合でも下地のカラー（緑）が表示されないようにできるのでしょうか？ 通常、このような問題はどのように対処するのか教えて下さい。 やはり、コンテンツ部分のデータの行数がメニュー部分のデータの行数よりも多くなると推測して下地のカラーの色（id=”main”のbackground-color）をメニュー部分の色（id="sidebar"のbackground-color）と同じ色にしておくしかないのでしょうか？ただし、このようにすると、推測どおりに行かずに左のメニュー部分のデータ（文字、画像等）の行数が右のコンテンツ部分のデータの行数よりも多い場合、コンテンツの下部に空白ができ下地のカラー（緑）が表示されてしまいます。 ＜test.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"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/test.css" type="text/css"> </head> <body> <div id="base"> <div id="header"> <p>ヘッダー</p> </div> <div id="main"> <div id="sidebar"> <p>サイドバー</p> </div> <div id="content"> <p>コンテンツ</p> </div> </div> <div id="footer"> <p>フッター</p> </div> </div> </body> </html> ＜test.cssコード＞ body { background-image:url(../img/example.gif); background-repeat:repeat; margin:0px; padding:0px; } #base { border:2px solid #000000; width:740px; margin:0px auto; text-align:left; background-color:#00FF00; } #header { background-color:#FFFF00; width:740px; height:130px; } #sidebar { width:150px; float:left; min-height:100%; background-color:#FF0000; } #content { width:550px; float:right; padding-left:20px; padding-right:20px; background-color:#FFFFFF; } #footer { clear:both; background-color:#FF00FF; height:130px; } 参考サイト等ありましたら、URL教えて下さい。 よろしくお願いします。
- 締切済み
- HTML