ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >3カラムレイアウト >
レフトメニューを作る

レフトメニューを作る

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

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

横幅120pxのボックスを作り その直下にh2タグの底辺の線だけのボックスを入れます。<h2>タグは上下に 空白が入るのでmargin-top:0px;で上側の余白だけ0にします。 最後に背景色を 指定すれば見出し部分になります。

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

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

【ブラウザ表示】

ミニタイトル

  • 項目1
  • 項目2
  • 項目3

ミニタイトル

  • 項目4
  • 項目5
  • 項目6

  • 相互リンク
  • 便利ツール


レフトメニュー部分のソース

<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;
}

■ その他の項目

レイアウト全体の設定
ヘッダー部分を作る
メインコンテンツを作る
ライトメニューを作る

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


HOME

Copyright (C) 2003-2012 ホームページマスター All rights reserved.