QUESTION2のソースコード

スタイルシート定義部分

.strAtr  /* 各枠共通の定義 */
{
    color:white;                                         /* 前景色白 */
    font-size:expression(document.body.clientWidth/11);  /* フォントサイズをウインドウ幅の11分の1に */
    font-weight:bold;                                    /* フォントを太字に */
    text-align:center;                                   /* センタリング */
}

#leftTop  /* 左上 */
{
    background-color:green;                              /* 背景色緑 */
    position:absolute;                                   /* 絶対位置指定　以下同じ */
    width:expression(document.body.clientWidth/3);       /* 幅をウインドウ幅の3分の1に */
    height:expression(document.body.clientHeight/3);     /* 高さを同じく3分の1に */
    left:0px;                                            /* 左から0ピクセルの位置に */
    top:0px;                                             /* 同じく上から0ピクセル */
}

#rightTop  /* 右上 */
{
    background-color:blue;                                /* 背景色青 */
    position:absolute;
    width:expression(document.body.clientWidth/3);        /* 幅をウインドウ幅の3分の1に */
    height:expression(document.body.clientHeight/3);      /* 高さを同じく3分の1に */
    left:expression(document.body.clientWidth*2/3);       /* 左からウインドウ幅の3分の2だけ離れる */
    top:0px;                                              /* 左上と同じ */
}

#leftBotom  /* 左下 */
{
    background-color:orange;                              /* 背景色オレンジ */
    position:absolute;
    width:expression(document.body.clientWidth/3);        /* 右上と同じ */
    height:expression(document.body.clientHeight/3);      /* 上からウインドウ幅の3分の1だけ離れる */
    left:0px;                                             /* 左上と同じ */
    top:expression(document.body.clientHeight*2/3);       /* 上からウインドウ幅の3分の2だけ離れる */
}

#rightBotom /* 右下 */
{
    background-color:red;                                 /* 背景色赤 */
    position:absolute;
    width:expression(document.body.clientWidth/3);        /* 左下と同じ */
    height:expression(document.body.clientHeight/3);      /* 左下と同じ */
    left:expression(document.body.clientWidth*2/3);       /* 右上と同じ */
    top:expression(document.body.clientHeight*2/3);       /* 左下と同じ */
}

<DIV class="strAtr" id="leftTop">HTML</DIV>               <!-- 左上　IDはleftTop -->
<DIV class="strAtr" id="rightTop">TIPS</DIV>              <!-- 右上　IDはrightTop -->
<DIV class="strAtr" id="leftBotom">&</DIV>                <!-- 左下　IDはleftBotom -->
<DIV class="strAtr" id="rightBotom">TRICKS</DIV>          <!-- 右下　IDはrightBotom -->

トップページ