次に2カラムレイアウトのライトメニューを作ります。

手順4　ライトメニューを作る

ライトボックスの横幅は160pxにします。 ライトメニューのリンクの部分にはリストタグを使い、リストマーカーの左部分に適度な余白を入れるためにインデントさせます。 また、FireFoxなどのブラウザでの見え方の違いを無くすために ulの余白を0にします。

ライトボックスの下にフッターのボックスがくるため、5pxの適度な余白を 入れます。

【ブラウザ表示】

<div id="rightmenu">
<ul>
<li><a href="link1.html">リンク1</a></li>
<li><a href="link2.html">リンク2</a></li>
<li><a href="link3.html">リンク3</a></li>
</ul>
<ul>
<li><a href="link4.html">リンク4</a></li>
<li><a href="link5.html">リンク5</a></li>
</ul>
<hr>
<ul>
<li><a href="freetalk.html">雑談掲示板</a></li>
<li><a href="chat.html">チャット</a></li>
<li><a href="toiawase.html">問い合わせ</a></li>
</ul>
</div>

div#rightmenu{
width:160px;
height:400px;
padding:0px;
font-size:95%;
border:1px solid silver;
float:left;
margin-bottom:5px;
}
ul{
margin-left:22px;
padding:0px;
}

Follow @hp_master_2003

■ その他の項目

2カラムレイアウトの解説に戻る