- 締切済み
CSSレイアウトでこのようなことはできる？
ホームページをテーブルを使用しないCSSレイアウトで作成しようと思います。 左右を分けるのにfloatを使用して作っています。 横幅は30%と70%で分けていますが、ブラウザの幅を小さくすると上下にずれてしまいます。 そこでブラウザで800px以下になった時は横バー表示するようにしたいです。 このようなことはできるでしょうか？
- 123isao
- お礼率39% (123/310)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- bavarois
- ベストアンサー率34% (34/100)
さっきのでは横バー表示ができてませんでしたね（*o*）。 .a{ width:100%; ←ここを800px;にすれば800px以下になった時に横バーが出ると思います。 }
- bavarois
- ベストアンサー率34% (34/100)
<html> <head> <style type="text/css"> <!-- .a{ width:100%; height:100%; float:left; background-color:#c8ffdb; } .b{ width:30%; height:100%; float:left; background-color:#f15b7b; } .c{ width:70%; height:100%; float:left; background-color:#ffe7e7; } --> </style> </head> <body> <div class="a"> <div class="b">３０％</div> <div class="c">７０％</div> </div> </body> </html> これでできてると思います。 背景＆heightはご自由に・・・。
関連するQ&A
- cssレイアウトでSafariだけがどうしても崩れます
こんばんわ、いつもお世話になっております。少しまえにも同じような感じで質問させていただいたのですが、 あれからなんとかいろいろなブラウザで修正をして見れるようになったのですが、 どうしてもSafariだけがレイアウトがひどくくずれてしまいます。 どこを直したらいいのかわからない状態でして、もし何かヒントがありましたら教えていただけますでしょうか？ だいたいの感じですが、floatを使用してる部分が（普通はちゃんと左右にレイアウトされる部分が上下にずれている、、）おかしいのですが 何を修正すればいいのかわかりません、。 よろしくお願いいたします。
- ベストアンサー
- HTML
- どう変更してもＩＥ６だけＣＳＳレイアウトが崩れてしまいます。
ＣＳＳレイアウトで、サイトを作成していたのですが、 最近になってＩＥ６で確認してみると、レイアウトが崩れまくっていました。。。 ３カラムレイアウトなのですが、Ｆｉｒｅｆｏｘ等他のブラウザではきちんと表示されるので、なぜかＩＥ６だけ縦１列になってしまいます。。 こちらのサイトでもＩＥ６はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら１日かけてがんばってのですが、できませんでした。もう限界です（涙） 現在のＣＳＳは、 * { margin:0; padding:0; } .wrapper { width: 740px; margin: 0 auto; } .header { width: 740px; } .main { width: 740 px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */ } .menu {display: inline; float: left; width: 205px; } .contents {display: inline; float: left; width: 385px; } .affiliate {display: inline; float: left; width: 150px; } .footer { clear: both; width: 740px; } というような状態です。 どなたかアドバイスいただけますと大変幸いです。 よろしくお願いいたします。
- ベストアンサー
- HTML
- CSSでのレイアウトについて
HTML、CSS超初心者なのですが CSSでレイアウトを組むと ブラウザを縮小したりしたときに レイアウトがぐちゃぐちゃになります paddingやmarginはpxで指定してるのですが それがいけないのでしょうか？ ｜ ｜ ｜あああ｜ ｜ ｜ こういうレイアウトの物が ブラウザを小さくすると ｜｜ ｜｜あああ ｜｜ とボーダーがちいさくなって 中の文字がはみ出してしまいます どうぞよろしくお願いします
- 締切済み
- HTML
- CSSレイアウトの回り込みについて
初めまして、よろしくお願いいたします。 見よう見まねでCSSレイアウトのweb制作に挑戦している者です。以下の現象についてご指南いただければ大変助かります。 ■CSS #wrapper { width : 620px; } #left { width : 300px; float : left; } #right { width : 300px; float : right; } ■ソース <div id="wrapper"> <div id="left"> （左寄せブロック） </div> <div id="right"> （右寄せブロック） </div> </div> 上記のCSSとソースで「620px幅の外枠」の中に「300px幅の左寄せブロック」「300px幅の右寄せブロック」が中央に20pxの隙間を空けて正常に表示されるのですが、右寄せブロックの中に長いテキストを改行せずに書いたら右寄せブロックが右寄せにならず、左寄せブロックの下に落ちて表示されてしまいます。 この現象は、長いテキストが300px幅に指定されている右寄せブロックの幅を押し広げている？から起こるのでしょうか。 右寄せブロックの中に長いテキストを書く場合、いちいち300px幅を意識して自分で改行を入れなくても、300pxの右寄せブロック幅を押し広げることなく自動折り返しされれば良いのですが。（右寄せブロックの高さは指定していないので） また、文字のサイズはpxで固定できない事情があるので、ブラウザで可変できるパーセント指定にしているのですが、ブラウザの文字サイズ中では正常に右寄せされている右寄せブロックが、文字サイズ大に変更したとたんに左寄せブロックの下に落ちてしまいます。 右寄せブロックの中に長いテキストを改行なしで書いても右寄せブロックが左寄せブロックの下に落ちて表示されない様、どなたかご指南いただければ誠に幸いです。
- ベストアンサー
- ホームページ作成ソフト
- 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
- ＣＳＳレイアウトの中にテーブルのような使い方でＣＳＳを入れ子にする方法で質問です。
テーブルを一切つかわないでサイトを作成したいと思っていて、 現在ＣＳＳで２カラムのレイアウトをしています。 困っているのが、 ページの下部に”前のページ ＨＯＭＥ 後ろのページ” という風に横に３つならべたいと思っています。 テーブルであれば簡単にできることなのですが、 それをＣＳＳでできないかと思っております。 そこで外部ＣＳＳに .table{ width: 10px ; background-color: #ffffff; margin: 5px; border: solid 0px ; padding: 0.5em; } と記述し、ＨＴＭＬ部分に <p><span class="table">前のページ</span> <span class="table">ＨＯＭＥ</span> <span class="table">後ろのページ</span></p> という風に記述してみたのですが、 文字を打っていくとどんどんよこに伸びて、横幅を指定している意味がないような感じです。 私のようなＣＳＳの使い方をしたい場合はどのように記述すればよろしいのでしょうか？
- ベストアンサー
- HTML
- cssを使って分割したページのレイアウトが崩れてしまいます
はじめまして。 見よう見真似でcssでページの分割を始めたのですが、ウインドウのサイズを変えるとレイアウトが崩れてしまって、何度手直ししても直らず暗礁に乗り上げてしまった為、質問させて下さい。 幅780で設計しているページ内にコンテンツ(左)とサイドバー(右)で左右に分割表示している部分があります。 コンテンツは幅500、サイドバーは幅260でそれぞれ高さは変動する可能性がある為、指定はしておりません。 ブラウザのウインドウ幅を小さくするとサイドバーがコンテンツの下に回り込んでしまうのでサイドバーをposition:absoluteで固定してみたのですが、今度はウインドウ幅を大きくすると下段のテーブルや最下段に自動でくっついてくる広告がサイドバーに重なってしまうことになり、解決策が見出せずにいます。 ウインドウのサイズを変更してもレイアウトが崩れないようになる手段をご存知の方がおりましたらご教授頂ければと思います。 また、本来やりたかったレイアウトがありまして、コンテンツとサイドバーを左右で分けつつ、更に両方を幅780の一つのボックスに収めることは可能でしょうか？ こちらも手段をご存知の方がおりましたら合わせてご教授下さい。 以下ソース抜粋 htmlファイル↓ <body> 割愛 <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> <div id="content">コンテンツ</div> <div id="sidebar">サイドバー</div> <table cellpadding="0" width="780" bgcolor="#ffffff" cellspacing="0"> <tbody> <tr><td bgcolor="#666666" align="left"></td></tr> </tbody> </table> </body> 読み込んでいる外部cssファイル↓ <style type="text/css"> #container{width:780px;text-align:left;margin:0px auto;} #header{width:780px;margin:0px 0px 15px 0px;} #content{float:left;width:500px;padding:10px 2px 2px 8px;} #sidebar{float:center;width:260px;padding:2px 2px 10px 8px;} #footer{clear:both;width:770px;margin:15px 5px 15px 5px;} </style> div{ font-size: 10pt; margin: 1%; padding: 2%; line-height: 120%; border-style: double; border-color: #F5F5F5; background-image:url("背景画像") }
- ベストアンサー
- HTML
- レイアウトが変わってしまい困っています
ホームページ作成初心者です。 ブラウザの横幅の広さによって、テーブルの変形や意図していない改行が発生してしまいます。 ページのレイアウトを固定するには、どのような入力をすればよいのでしょうか？ どなたかよろしければお願いします。
- ベストアンサー
- HTML
- ブラウザでプレビューでCSSが反映されません・・・
現在、CSSでホームページを作成しているんですが、ブラウザのプレビューで見てみても、なぜかCSSで指定したレイアウトが反映されません。 ドリームウィーバーの画面ではCSSが反映されているんですが、ブラウザだと反映されていない状態です。 どうすればいいのでしょうか？ また、以前はテーブルを使用していました。 大きな枠はCSSで作成するのは比較的簡単なんですが、同じ枠内に｜横2列2列のコンテンツなどを作る時もCSSで作成するべきなのでしょうか？ それともCSSでテーブルを組み合わせて作成しても問題ありませんでしょうか？ 質問内容が2つになってしまいましたが、どうかご教授よろしくお願いいたします。
- ベストアンサー
- HTML
- 画像にリンクを張るとレイアウトが崩れます。
はじめまして。 現在、Dreamweaverでホームページを作成しています。 横幅ジャストサイズ（正確には10pxのスペース画像含む）でメニューを並べています。 一通り画像のレイアウトが済んで、いざそれぞれのメニューボタンにリンクを張ると、なぜかボタンの枠が紫色に囲まれ、あげくには少しずつボタンが横に移動してしまいます。 そして、最後のメニューボタンが収まりきらず下に回ってしまいます。ちなみにCSSで作成しています。 ブラウザでプレビューしてみたところ、画像の周りの紫色の枠は残ったままで、最後のボタンは見えません（これはCSSで縦の枠幅を指定しているからとは思うんですが・・・） リンクを張ってもhtmlをいじるだけで、デザイン上はかわらないと思うのですが、そうではないのでしょうか？ 以前も、コードを通常の改行（<br>じゃない）するとレイアウトが崩れた記憶があります・・・ この現象の解決方法などはあるのでしょうか？
- ベストアンサー
- HTML
補足
すみません、質問の仕方が悪かったみたいです。 通常の表示は横１００％で表示し、横８００ピクセル以下の時のみ横バー表示する方法を知りたいです。 width:100%では常に１００％になりますし、width:800pxでは常に８００ピクセルになってしまいます。