ここから本文です。
ナビゲーション縦02
ダウンロード用画像ファイル
- 01
- 02
- 03
- 04
- 05
- 06
↓リスト用アイコンです。必要でしたらダウンロードしてください。
- 01
- 02
- 03
- 04
- 05
- 06
↓全共通画像です。
利用サンプル
そのままご利用の場合
画像に文字を入れた場合
HTMLソース
<div class="nav_box">
<p><img src="images/02_01.jpg" alt="" width="200" height="28" /></p>
<div class="nav_bg">
<ul>
<li>ここはリストタグです。ここはリストタグです。ここはリストタグです。</li>
<li>ここはリストタグです。</li>
<li class="li_last">ここはリストタグです。</li>
</ul>
</div>
</div>
<p><img src="images/02_box_bottom.jpg" alt="" width="200" height="28" /></p>
スタイルの設定
- * {
- font-size:100%;
line-height:1.6;
margin:0px;
padding:0px;
list-style:none; - }
*とは
全てのタグに対して共通のスタイルを指定できます。
この設定をすると、テーブルタグなどで余白を指定してもきかなくなりますのでご注意ください。
この設定はナシにして、下記スタイルに、余白を0pxで指定すれば同様のデザインで利用可能です。
- .nav_box {
- width: 200px;
background-image: url(images/02_box_bg.jpg);
background-repeat: repeat-y;
background-position: left top; - }
nav_box
上記利用サンプルでの画像（02_box_bg.jpg）の場合となります。
画像ファイルをimagesという名前のフォルダへ保存します。
（※フォルダ名は変更して構いませんがスタイルシート内のフォルダ名箇所も変更してください）
- .nav_bg {
- padding: 5px;
margin: 5px 10px 0px 10px;
border: 1px solid #CCCCCC; - }
nav_bg
中にあるボーダーと余白の設定です。
- .nav_box li {
- background-image: url(../images/02_01_list.jpg);
background-repeat: no-repeat;
background-position: 0px 8px;
padding-top: 2px;
padding-left: 15px;
padding-bottom: 2px;
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #CCCCCC; - }
nav_box li
リストタグのアイコンの設定と、下線の設定をしています。
- .nav_box li.li_last {
- border:none;
- }
nav_box li.li_last
リストタグの最後のタグに対して、下線の表示をなくしています
。
こちらのナビゲーションは、お好きな画像を選び、各コンテンツの枠としてご利用いただけます。
画像にコンテンツタイトルなどの文字を入れてご利用いただくとよいかと思いますがそのままでもインパクトがあるかと思います。