- 締切済み
画面の分割
フレームを使わずに画面を分割する方法ってありますか？ 分割領域外に出た部分は非表示にしたいです。 また、どうやりますか？
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ryupyon
- ベストアンサー率17% (29/163)
HTMLのタグdivとcssでできますよ ↓のような感じでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> div.top {background-color:#FFFFCC; /*上の背景*/ width:600px; /*上の幅*/ height:50px; /*上の高さ*/ padding:0px; /*帯内の余白*/ position:absolute; /*配置方法*/ top:0px; /*最上部からこの部分が表示されるまでの距離*/ left:150px;} /*左端からの距離*/ div.left {background-color:#FFCC66; /*左の背景*/ text-align:center; width:150px; /*左の幅*/ height:450px; /*左の高さ*/ padding:0px; /*帯内の余白*/ position:absolute; /*配置方法*/ top:0px; /*最上部からこの部分が表示されるまでの距離*/ left:0px;} /*左端からの距離*/ div.right{background-color:#66FFFF; /*右の背景*/ text-align:center; width:600px; /*右の幅*/ height:350px; /*上の高さ*/ padding:0px; /*帯内の余白*/ position:absolute; /*配置方法*/ top:50px; /*最上部からこの部分が表示されるまでの距離*/ left:150px;} /*左端からの距離*/ div.down {background-color:#FF0033; width:600px; /*下の幅*/ height:50px; /*上の高さ*/ padding:0px; /*帯内の余白*/ position:absolute; /*配置方法*/ top:400px; /*最上部からこの部分が表示されるまでの距離*/ left:150px;} /*左端からの距離*/ </style> </head> <body> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="down"></div> </body> </html>
- reverie013
- ベストアンサー率18% (26/143)
補足
回答ありがとうございます サンプルコードから今自分が作成したいようなページを書いてみたのですが、うまく表示されません。 特定部分（下の例では画面全域）を十字に４分割したいのです。しかしFirefoxでは左上と右上だけ、IEでは左上と右上に来るべき部分が右下に来ています。 なぜでしょうか？ よろしくお願いします。 <html> <head> <title></title> <style type="text/css"> div.top { background-color: #FF0000; /*上の背景*/ width: 50%; /*上の幅*/ height: 50%; /*上の高さ*/ position: absolute; /*配置方法*/ top: 0px; } div.left { background-color: #00FF00; /*左の背景*/ width: 50%; /*左の幅*/ height: 50%; /*左の高さ*/ position: absolute; /*配置方法*/ top: 0px; left: 50%; div.right { background-color: #0000FF; /*右の背景*/ width: 50%; /*左の幅*/ height: 50%; /*左の高さ*/ position: absolute; /*配置方法*/ top: 500px; left: 50%; div.down { background-color: #FFFF00; width: 50%; /*下の幅*/ height: 50%; /*上の高さ*/ position: absolute; /*配置方法*/ top: 50%; } </style> </head> <body> <div class="top"></div> <div class="left"></div> <div class="right"></div> <div class="down"></div> </body> </html>