フレームを装ったページを作成します。
もちろん擬似ですので、本来のフレームとは違い同じページ内にしかフレーム効果は有効ではありません。辞典などの見出しで動かないメニューがほしい、という場合などにお使い下さい。
まずは上部にメニュー、下部に、見出しごとにアンカーを与された（例ではid属性を用いていますが、name属性でも構いません。）本文を記述します。
<body> <h1>サイト名</h1> <h2>メニュー</h2> <ul> <li><a href="#THEMEONE">リスト1</a></li> <li><a href="#THEMETWO">リスト2</a></li> <li><a href="#THEMETHREE">リスト3</a></li> <li><a href="#THEMEFOUR">リスト4</a></li> </ul> <h2>本文</h2> <h3 id="THEMEONE">テーマ1</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMETWO">テーマ2</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMETHREE">テーマ3</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMEFOUR">テーマ4</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> </body>
縦スクロールバーを出現させるために、文字列の量を多めにしてあります。
h2要素を基準に1セットとし、これをdiv要素でマーク付けしてコンテナとします。class属性を与えてそれぞれのコンテナに意味を与えます（注意すべきことは、class名には構造に関係する名称を与えるようにすることです。「右側に置くからclass="right"」などといった名付け方だと位置を変えるたびに変更しなければならなくなります。同様に、「大きくするからclass="large"」「青にするからclass="blue"」なども避けたほうがいいでしょう）。
<body> <h1>サイト名</h1> <div class="menu"> <h2>メニュー</h2> <ul> <li><a href="#THEMEONE">リスト1</a></li> <li><a href="#THEMETWO">リスト2</a></li> <li><a href="#THEMETHREE">リスト3</a></li> <li><a href="#THEMEFOUR">リスト4</a></li> </ul> </div> <div class="main"> <h2>本文</h2> <h3 id="THEMEONE">テーマ1</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMETWO">テーマ2</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMETHREE">テーマ3</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <h3 id="THEMEFOUR">テーマ4</h3> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> <p>文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列文字列</p> </div> </body>
例ではわかりやすくするためにdiv要素の周りに点線をつけています。
メニュー（ここではclass="menu"）はそれほど幅を必要としないので横幅20%、本文（ここではclass="main"）は、メインとなる部分ですので70%にします。
.menu {
width : 20%;
float : left;
}
.main {
width : 70%;
}
本文（ここではclass="main"）がスクロールするようにします。body要素自体の高さを100%と指定してあげることで、ページ自体のスクロールがされなくなります。本文（ここではclass="main"）の高さがスクロールされて表示される領域となります（ここでは90%と指定し、上部に10%の余白を与えています。こうすることで、サイト名と重なることを回避しています）。overflowプロパティをautoと指定することで自動的に余った分によるスクロールバーが出現するようにします。
メニュー（ここではclass="menu"）に対し、本文（ここではclass="main"）が右に回りこむようにします。NN7などではメニューと本文（が重なってしまいますので、本文にleftプロパティを与え、25%（メニューの幅、20%より多めにしてあります）左から離れるようにしました（本文にpositionプロパティ（static以外）を与えていないとleftプロパティは有効ではありません）。
body {
height : 100%;
margin: 0px;
}
.main {
height : 90%;
position : absolute;
top : 10%;
overflow : auto;
left : 25%;
}
それぞれのコンテナの配置が窮屈ですので、コンテナ自体の左右の余白を1%にします。
div {
margin : 0 1%;
}
h1 {
text-align : center;
}
h2, h3 {
padding-left : .5em;
border-bottom : solid 3px green;
}
h2 {
background : yellow;
color : red;
}
ul li {
list-style-type : square;
}
p {
margin : 1em;
}
ここでは、h1要素の文字をセンタリング、h2要素、h3要素の文字の左に0.5emの隙間、実線で3pxで緑の下線を与え、h2要素には背景色黄色と文字色赤を指定。ul要素内のli要素のリストマークを四角にし、p要素に1emのマージンを与えています。
注意するポイントとしましては、floatプロパティを用いた場合、幅の指定が必要であるということです。
2004.2.29