ホームページ作成 スタイルシートを使用して画面を３分割したい
- ホームページをスタイルシートを使って画面を３分割する方法を教えてください。
- head部分を一番上、foot部分を一番下に表示する方法を教えてください。
- ウィンドウのサイズを変えても画面が崩れないように設定する方法を教えてください。
- ベストアンサー
ホームページ作成 スタイルシートを使用して画面を３分割したい。
ホームページ作成 スタイルシートを使用して画面を３分割したい。 下のようなソースを作成しました。 head と body と foot に画面を３分割してます。 footを高さ30pxにしてますが、これをウィンドウの一番下にくっつけて 画面解像度、ウィンドウサイズを変更してもhead部分は一番上へfoot部分は一番下に表示したいと思ってます。 どのような指定をすれば出来ますでしょうか？ご教授願いします。 -------------------------------------------------- <html> <head> <style> * { padding: 0; margin: 0; } #head { height: 100px; width: 100%; background-color: #FFFF00; } #body { width: 100%; } #foot { height: 30px; background-color: #000000; color: #FFFFFF; } </style> </head> <body> <div id="head"> タイトル </div> <div id="body"> テストページ </div> <div id="foot"> copyright(c) </div> </body> </html>
- WOVOW
- お礼率11% (7/61)
- CSS
- 回答数2
- ありがとう数23
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#1です。連投申し訳有りません。 完全ヘッダフッタ固定でしたら以下のページが参考になるかとおもいます。
その他の回答 (1)
- rurino
- ベストアンサー率55% (38/68)
中身が薄い場合だけ下にぴたっとくっつくのか、 Frame使用時のように常に下に表示されているのかでもソースが変わってきます。 上記のほうであればこんなページがあります。
関連する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
- ベストアンサー
- その他([技術者向] コンピューター)
- スタイルシートで画面を上下に分割，高さを上部はpxで指定，下部は残り全部にする方法
画面を上下に分けて，上部の高さをpx単位で指定して下部は残り全部にするのをスタイルシートで実現したいと思い，次のようにしてみたんですがうまくいきません． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> <div style="width:100%; height:100%; background-color:#fcc; "> 画面下部 </div> </body> </html> 要は下部の「残り全部」のやり方がわかっておらず，全体的な高さが100px+100%になり，表示画面より下に100pxはみ出してしまいます． 次のようにdivを入れ子にするとうまくいくんですが，内部に表示させる内容によっては不具合が出るので，どうしてもdivどうしが独立した形で実現させたいです． <html> <body style="margin:0px; padding:0px;"> <div style="width:100%; height:100%; background-color:#fcc; "> <div style="width:100%; height:100px; background-color:#ccf;"> 画面上部 </div> </div> </body> </html> 他の質問サイトでも尋ねてみたのですが，質問の意味を理解してもらえずに別に問題はないという回答を１件頂いたのみで解決できませんでした．また，テーブルではなく必ずスタイルシートで実現したいです．対策をご存知の方，ご教示よろしくお願いします．
- ベストアンサー
- HTML
- スタイルシートでのデザイン
HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。
- ベストアンサー
- 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.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>
- ベストアンサー
- HTML
- このcssをIEで見ると？
お世話になります。 下記のように書くと、div#bの左からのマージンがIEで見ると、なぜか倍の20pxになってしまいます。FirefoxやOperaはちゃんと表示されるのですが、原因はなぜなんでしょうか？ ご存知の方、よろしくお願いします。 <html> <head> <style type="text/css"> <!-- div#a { width:748; height:200px; background-color:#cccccc; } div#b { margin-left:10px; float:left; width:354px; height:100px; background-color:red; } div#c { float:left; margin-left:20px; width:354px; height:100px; background-color:#0000ff; } --> </style> </head> <body> <div id="a"> <div id="b">b</div> <div id="c">c</div> </div> </body> </html>
- ベストアンサー
- HTML
- スタイルシートを使用したサイト作りで
サイトページの真ん中に４５０ｐｘの白の柱に本文を入れ、周りをすべて黒というスタイルにしたく思ってます。 柱をウィンドウの上から下まで表示したいのですが、どうしてもうまくいきません。どうぞ御指南下さい！！作ったタグを載せます。 *{margin:0; padding:0; font:normal normal normal x-small/1.5em Verdana,"ＭＳ ゴシック",Osaka,Gothic,sans-serif;} body{ height:100%; background-color:#000000; color:#000000; cursor:default;} br{ letter-spacing:normal;} #body{margin:0px auto; width:450px; height:100%; background:#ffffff;} #header{padding:0px} #menu{padding:0px 0px 5px; text-align:center;} #main{padding:0px 10px;} #navi{text-align:right; padding:0px 10px;} #foot{height:123px; background:url(img/img2.gif) no-repeat 0% 0%;} .text{padding:0px 0px 10px;} p{padding:1px 0px;} h1,h2{font-weight:bold;} h1{text-align:center; color:#666666; font-size:190%; padding:10px 0px 0px;} h2{ text-align:left; color:#000000; font-size:100%; padding:0px 2px; margin:5px 0px;} サイトページ <body> <div id="body"> <div id="menu"> <h1 id="TOP">- ABOUT - </h1> </div> <hr class="none"> <hr class="none"> <div id="main"> <h2>test</h2> <div class="text"> <p>test</p> </div> <h2>test</h2> <div class="text"> <p> test </p> </div> </div> <div id="navi"> <p>INDEX // <a href="#TOP">PAGE TOP</a> // </p> </div> </div> </body> </html>
- ベストアンサー
- その他([技術者向] コンピューター)
- htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困
htmlを組んでいるのですが、DIVを使用した階層の作り方がわからず困っています。 2レベルまでの階層ならば、まだわかるのですが、3レベル以上になった場合に思い通りに動作させることができなくなってしまいます。 具体的には、下で記述した場合、 <div id="test"> テスト </div> が、右寄せにならないのですが、何がいけないのでしょうか？ 【-------------html-------------】 <DIV id="wrap"> <div id="head"> <div id="logo"> ロゴ配置予定 </div> <div id="test"> テスト </div> </div> <div id="menu"> メニュー </div> <div id="left"> レフト </div> <div id="right"> メインコンテンツ </div> <div id="foot"> フッタ </div> </dib 【-------------css-------------】 /* レイアウトの設定*/ body{ margin:0px; padding:0px; text-align:center; } /* ラッパーの設定*/ #wrap{ position:relative; width:600px; background-color:#FFFFCC; margin:0px auto; text-align:left; } /* ヘッダーの設定*/ #head{ width:600px; height:350px; background-color:#CC9999; div#logo{ position: absolute; float: left; width:200px; height: 30px; } div#test{ width:100px; height: 30px; float: right; } } /* ヘッダーの設定*/ #menu{ width:600px; height130px; background-color:#CC9900; } /* 左側の設定*/ #left{ width:150px; height:300px; float:left; background-color:#FFAC99; } /* 右側の設定*/ #right{ width:450px; height:300px; float:right; background-color:#CCCCFF; } /* フッターの設定*/ #foot{ position:relative; width:100%; height:30px; background-color:#CCFFCC; clear:both; }
- ベストアンサー
- その他（プログラミング・開発）
- スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- ベストアンサー
- HTML
- ｃｓｓについて困っています
<html> <head> <title>Webサイト</title> <style type="text/css"> body { background-color : #FFEAEF } <!-- #example { /* 親ボックス */ width: 750px; height: 900px; background-color: #FF95E4; position: absolute; top: 50px; left: 100px; ; } #example1 { /* position: absolute; */ width: 750px; height: 300px; top: 50 px; left: 150 px; background-color: #FFAAEA } #boxL { /* ボックス左 */ width: 150px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 1px; } #boxR { /* ボックス右 */ width: 599px; height: 600px; background-color: #ffffff; position: absolute; top: 150px; left: 150px; } #footer { width: 748px; height: 100px; background-color: #ffffff; position: absolute; top: 750px; left: 1px; } --> </style> </head> <body> <div id="example"> <div id="example1"> <h1>テスト中</h1> </div> <div id="boxL"> ボックス左 </div> <div id="boxR"> ボックス右 </div> <div id="footer"> <strong><center>ここに必要ならタグと共に記入<BR> <a href="test2.html">top</a></strong> </div> </div> </body> </html> これを表示した時、下のピンクの部分に文字やリンクを書きたいのですがどうしたらいいですか？
- ベストアンサー
- その他([技術者向] コンピューター)
お礼
回答ありがとうございます。 これでなんとかなりそうです。助かりました。