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

A 回答 (2件)

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>

この回答への補足

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

補足日時:2009/05/31 02:00
    • good
    • 0
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング