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

ライトメニューを作る

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

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

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

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

【ブラウザ表示】

  • リンク1
  • リンク2
  • リンク3
  • リンク4
  • リンク5

  • 雑談掲示板
  • チャット
  • 問い合わせ


ライトメニュー部分のソース

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

■ その他の項目

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

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


HOME

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