3カラムレイアウトのレフトメニューを作ります。

手順3　レフトメニューを作る

項目の部分にはリストタグを使いリストマーカーの左部分に 適度な余白を入れるためにインデントさせます。 レフトボックスの右横に中央のボックスを並べるので外部ファイルで float:left;を 指定しておきます。

また、FireFoxなどのブラウザでの見え方の違いを無くすために ulの余白を0にします。

【ブラウザ表示】

<div id="leftmenu">
<h2 class="minititle">ミニタイトル</h2>
<ul>
<li><a href="koumoku1.html">項目1</a></li>
<li><a href="koumoku2.html">項目2</a></li>
<li><a href="koumoku3.html">項目3</a></li>
</ul>
<h2 class="minititle">ミニタイトル</h2>
<ul>
<li><a href="koumoku4.html">項目4</a></li>
<li><a href="koumoku5.html">項目5</a></li>
<li><a href="koumoku6.html">項目6</a></li>
</ul>
<hr>
<ul>
<li><a href="sougo.html">相互リンク</a></li>
<li><a href="tool.html">便利ツール</a></li>
</ul>
</div>

div#leftmenu{
width:120px;
padding:0px 0px 4px;
font-size:95%;
border:1px solid silver;
float:left;
}
h2.minititle{
color:green;
background-color:#90EE90;
border-bottom:1px solid silver;
margin-top:0px;
font-size:100%;
}
ul{
margin-left:22px;
padding:0px;
}

Follow @hp_master_2003

■ その他の項目

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