ナビゲーション｜スタイルシートのカスタマイズ方法

現在地: Home » 初級ホームページ作成講座：目次 » CSSのカスタマイズ方法：ナビゲーション

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>

/*----------下記が追加後のソース*/

<div id="sidebar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>
</div>
<!--sidebar部分終わり-->

リストの指定はしていないので今はデフォルトの状態です。サンプル

▲Top

カスタマイズ方法-<ul>部分

リストマークをなくす

#sidebar ul{
list-style-type: none;
}

カスタマイズサンプル

この指定の場合「#sidebar」内の全ての<ul>要素に適用されます。もし各リスト単位で指定を変えたい場合は各リストに個別に「クラスセレクタ」で指定します。

<ul class="menu1">
<li><a href="#">Home</a></li>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">サイトマップ</a></li>
</ul>

<ul class="menu2">
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
<li><a href="#">サブメニュー4</a></li>
<li><a href="#">サブメニュー5</a></li>
</ul>

/*----------CSS*/

.menu1{
list-style-type: none;
}

.menu2{
list-style-type: square;
}

カスタマイズサンプル

リストの配置について

リストの配置については「margin及びpadding」で状況に応じて指定して下さい。

リストマーカーの部分は各ブラウザがデフォルトで余白を持っているので、ちゃんと指定する事をお薦めします。

▲Top

リストマークに画像を使う

「listmark.gif」という画像を指定します。

.menu1{
list-style-type: none;
margin: 0 0 2em 0;
padding: 0;
}

.menu1 li{
background: url(listmark.gif) no-repeat 0 50%; *画像の保存場所によりリンク形式が変わります
padding: 5px 0 5px 15px;
}

/*----------.menu2も指定変更してみました*/

.menu2{
list-style-type: square;
margin: 0 0 0 10px;
padding: 0;
}

.menu2 li{
margin-bottom: 10px;
}

カスタマイズサンプル

▲Top

スタイルシートのカスタマイズ方法

ナビゲーション

サイドバーメニューを追加する

カスタマイズ方法-<ul>部分