画面の分割

締切済

質問者：sainte
質問日時：2009/05/28 02:53
回答数：2件

フレームを使わずに画面を分割する方法ってありますか？
分割領域外に出た部分は非表示にしたいです。
また、どうやりますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： reverie013
回答日時：2009/05/28 10:45

一先ず参考程度に。

http://www.tagindex.com/stylesheet/box/overflow. …

- 0
- 件

通報する

No.2

回答者： ryupyon
回答日時：2009/05/29 06:37

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>

この回答への補足

回答ありがとうございます
サンプルコードから今自分が作成したいようなページを書いてみたのですが、うまく表示されません。
特定部分（下の例では画面全域）を十字に４分割したいのです。しかし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>