CSSで擬似的にフレームを作る方法とは？

前へ 次へ
このQ&Aのポイント
  • CSSのoverflow:scrollを利用したフレームのように一部分をスクロールできるページを作る方法
  • 上側をメニューにする方法についての考え方
回答を見る
  • ベストアンサー

CSSで擬似的にフレームを作りたい

CSSのoverflow:scrollを利用した、 フレームのように一部分をスクロールできるページを考えております。 画面左側をメニューにするには <body> <div class="menu"></div> <div class="content"></div> </body> のようなHTMLに *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:100%;float:left;width:100px;overflow:scroll;} .content{height:100%;margin:0 0 0 100px;overflow:scroll;} のようなスタイルシートという形で可能ですが、 上側をメニューにするにはどのようにすれば良いでしょうか？

  • HTML
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
noname#137826
noname#137826
回答No.1

これでどうですか？ .menu { position: absolute; top: 0px; height: 100px; width: 100%; } .content { position: absolute; top: 100px; bottom: 0px; width: 100%; }

tanba1987
質問者

お礼

topとbottomを同時に指定可能とは知りませんでした。 調べてみると、仕様書でもまさに同じやり方が例示されているのですね…。 有難う御座います。 http://www.y-adagio.com/public/standards/tr_css2/visuren.html#absolutely-positioned

その他の回答 (2)

回答No.3

.menuを高さを指定した上でfloatではなく、position:absolute;で上に設置します。 そうすると.contentの高さが100%のまま.menuが上に被るようなレイアウトになると思います。 *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{width:100%;height:100px;position:absolute;top:0;left:0;overflow:scroll;} .content{height:100%;overflow:scroll;} ここで.menuに被る部分に余白を取れば良いのですが、.contentにmarginやpaddingを指定した場合、heightが100%なためウィンドウサイズを超えてスクロールが発生してしまいます。 そこで、.content内の一番最初に来る要素に余白を与えます。 <body> <div class="menu"></div> <div class="content"> <h2>見出し</h2> </div> </body> 例えばHTMLがこんな感じであれば *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{width:100%;height:100px;position:absolute;top:0;left:0;overflow:scroll;} .content{height:100%;overflow:scroll;} .content h2{margin-top:100px;}

tanba1987
質問者

お礼

成程、バーの表示などは少しイメージと違ったのですが、 これはこれで一つの方法ですね。 有難う御座います。

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

パーセンテージで割り直してみたら？ *{margin:0px;padding:0px;} html{height:100%;} body{height:100%;} .menu{height:12%;float:left;width:100%;overflow:scroll;} .content{height:88%;width:100%;float:left;overflow:scroll;}

tanba1987
質問者

お礼

回答有難う御座います。 ただ、今回の事例はパーセントでは不都合なのです。 その事を前提として書いておくべきでした。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • HTML、ＣＳＳ が、なかなかうまくいきません。

    お世話になります。 HTMLを始めたばかりですので、 ご教授いただけたら幸いです。 以下の図のような感じに並べたいのですが、 なかなかうまい具合にいきません。 黄色は、全てボタンになります。 赤は、ボタンについた吹き出し部分となります。 上段の２つのボタンは、やや大きい感じのボタン。 下段の３つのボタンは、上段に比べて、少し小さい感じのボタンになります。 ボタンは、上段(A)と下段(B)で、 HTML と CSS は、分けようかと考えています。 【HTML】 <div class="Button"> <div class="contents"> <div class="Button_boxA clearfix"> <div class="Yellow_Btn_01"><img src="img/Yellow_Btn_01.png" width="200" height="75" /> </div> <div class="Yellow_Btn_02"><img src="img/Yellow_Btn_02.png" width="200" height="80" /> </div> </div> <div class="btn_boxB clearfix"> <div class="Yellow_Btn_03"><img src="img/Yellow_Btn_03.png" width="100" height="60" /> </div> <div class="Yellow_Btn_04"><img src="img/Yellow_Btn_04.png" width="100" height="65" /> </div> <div class="Yellow_Btn_05"><img src="img/Yellow_Btn_05.png" width="100" height="60" /> </div> </div> </div> </div> 【 CSS 】 div.Button{ width:600px; margin-top:20px; margin-right:auto; margin-left:auto; padding-right:25px; } div.btn_boxA{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_01{ width:200px; height:75px; margin-left:auto; margin-right:auto; margin-bottom:10px; float:left; } div.low_btn_02{ width:200px; height:80px; margin-left:auto; margin-right:auto; padding-left:25px; margin-bottom:10px; float:left; } div.btn_boxB{ width::500px; margin-left:auto; margin-right:auto; margin-bottom:10px; } div.low_btn_03{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } div.low_btn_04{ width:100px; height:65px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; ] div.low_btn_05{ width:100px; height:60px; margin-left:auto; margin-right:auto; margin-bottom:10px; padding-left:25px; float:left; } 長ったらしくなってしまいましたが、 ご教授いただけたら、幸いです。 宜しくお願いします。

    • 締切済み
    • CSS
  • CSSで、フレーム的な表現をしたいのですが、スマートなやり方を教えてください。

    CSSにて、「サイドメニュー」「ヘッダ」「コンテンツ」と言うコンテンツを制作したく、以下のソースを記述したのですが、コンテンツ部分（.contents）を100%にすると当然、ヘッダ部分（.header）の100px分がはみ出てしまい、サイドメニュー（.side）の下に余白がでてしまいます。 これを回避するために、現状position: fixed;を使用し、IE用には分岐で他のcssを読ませるようにしているのですが、もっとスマートに、ひとつのcssでこのレイアウトを実現する方法はないものでしょうか？ <!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" xml:lang="ja"> <head> <title>test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> <!-- *{ margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: auto; } .header { position: absolute; left: 200px; width: 300px; height: 100px; background-color: #ddd; } .side { position: absolute; width: 200px; height: 100%; background-color: #aaa; } .contents { position: absolute; margin-top: 100px; margin-left: 200px; width: 300px; height: 100%; background-color: #333; overflow: auto; } --> </style> </head> <body> <div class="header"> header </div> <div class="side"> side </div> <div class="contents"> contents<br /> </div> </body> </html>

  • padding-leftがききません。。。

    padding-left効かないです...原因教えて下さい。 ソースは以下です。 <div id="right"> <div class="plofile"> </div> </div> #right { width:250px; float:left; overflow:hidden; } .plofile { width:190px; height:265px; padding-left:10px; float:left; margin-top:35px; background:url(plofile_bg.png); padding-left:20px; }

  • 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> ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ ｃｓｓ 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：floatを使っての段組で困っています

    図のような段組をしたいのですが、ソースはあっているでしょうか？ サイトを作成しているとズレたりするので、根本的な段組が間違っているのか見て頂けると助かります。 ■HTML <body> <div id="container"> <div id="box-2">box-2</div> <div id="box-3">box-3</div> <div id="box-4">box-4</div> <div id="box-5">box-5</div> <div id="box-6">box-6</div> <div id="box-7">box-7</div> <div id="box-8">box-8</div> </div> </body> ■CSS body { margin: 0 auto 0 auto; padding: 0px; height:100%; } #container { width: 800px; } #box-2 { float: left; width: 800px; height: 30px; } #box-3 { float: left; width: 400px; height: 300px; } #box-4 { float: left; width: 400px; height: 300px; } #box-567 { clear:left; float: left; width: 800px; } #box-5 { float: left; width: 300px; height: 200px; } #box-6 { float: left; width: 300px; height: 200px; } #box-7 { float: left; width: 200px; height: 200px; } #box-8 { clear:left; width: 800px; }

    • ベストアンサー
    • HTML
  • cssによる配置の計算が合いません

    cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <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 { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </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の段組で要素がかけてしまいます

    いつもお世話になります。 今CSSで段組をしています。 #content{ width:780px; height:auto; } #content{ float:left; width:440px; padding-left:20px; padding-right:20px; } #menu{ float:right; width:440px; padding-right:20px; } で左右のボックスを作り、 それぞれにテキストや画像などの子要素を入れていきます。 html <body> <div id="content"> <div　id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div> 　<div　id="menu"> <div class="sub3"> </div> <div class="sub4"> </div> 　　<div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </html> という具合です。子要素(sub）には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんとおさまるのですが、 IE（６，７とも）右の3番目(sub5)の要素が欠落し、（飛ばされている感じ） safariでは右の4番目(sub6）の要素が右の1番上の要素にかぶって表示されます。 どうしたらいいでしょう？どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。

  • 擬似フレームを中央に表示したい。

    ただいまＨＰ作成に奮闘中の者です。 いつもはネットでちくちくと検索をしながらhtml等について学びながら作成しているのですが、今回検索エンジンでも上手くヒットしなく、しばらく行き詰まってしまったので質問させてください。 現在擬似フレームを使ってHPのTOP画面が6割ほどできたのですが全てが左に寄っています。 それを中央に表示させたいのですが、どうすればよいのでしょうか？ ■■■□□ ■■■□□　　これを↓ ■■■□□ ■■■□□ □■■■□ □■■■□　　この様にしたい □■■■□ □■■■□ 以下タグです。 <!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"> <title>タイトル</title> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <!-- ------ FLASH ACTIVATION SCRIPT--------> <script src="flash_activate.js" type="text/javascript"></script> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:120px; float:left; background-color:#3399ff; } #tops { width:300px; height:120px; float:left; background-color:#ffcc33; } #topss { width:750px; height:280px; crear:both; background-color:pink; } #left { width:250px; height:100px; float:left; background-color:white; } #menu1 { width:250px; height:100px; clear: both; } #menu2 { width:250px; height:100px; clear: both; } #menu3 { width:250px; height:100px; clear: both; } #menu4 { width:250px; height:100px; clear: both; } #menu5 { width:250px; height:100px; clear: both; } #menu6 { width:250px; height:100px; clear: both; } #middle { width:300px; height:600px; float:left; background-color:white; } #right { width:200px; height:600px; float:left; } #under { width:750px; height:10px; clear: both; background-color:#cc66cc; } --> </style> </head> <body> <div id="top">ここにHPロゴ</div> <div id="tops">ここに説明やテーブル</div> <br style="clear:both" /> <div id="topss"></div> <div id="left"> <div id="menu1"><A Href="http://www.yahoo.co.jp/"><Img Src="about_us.png"></A></div> <div id="menu2"><A Href="URL"><Img Src="member.png"></A></div> <div id="menu3"><A Href="URL"><Img Src="movie.png"></A></div> <div id="menu4"><A Href="URL"><Img Src="blog.png"></A></div> <div id="menu5"><A Href="URL"><Img Src="link.png"></A></div> <div id="menu6"><A Href="URL"><Img Src=""></A></div> </div> <div id="middle">更新履歴など</div> <div id="right"> </div> <div id="under"></div> </body> </html> ご回答頂けたら幸いです。 よろしくお願いしますm(_ _)m

    • ベストアンサー
    • HTML
  • CSSでfloatがうまくいきません。

    CSSでfloatがうまくいきません。 .main{ width: 1000px; } .wrap{ width: 900px; height: 120px; margin-left: 50px; background-color: #ffffff; overflow:auto; } .head_l { width: 300px; height: 120px; float: left; } .head_r { width: 600px; height: 120px; float: left; } <div class="main"> <div class="wrap"> <div class="head_l">ロゴ画像</div> <div class="head_r">項目</div> </div> </div> mainの中にwrapという箱を作りhead_l(ロゴ画像)とhead_r(項目ボタン)という箱を横並びに表示させたいのですが、スクロールバーが出たりします。うまくいきません。どのようにしたらいいでしょうか？

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する