メニューリストのリストマークを画像に

メニューリストのリストマークを画像に

通常、リストに付けられるストマークは黒丸や白丸になりますが、CSSを使えばリストマークに画像を使用することができます。

HTMLの書き方

親カテゴリと子カテゴリの2階層からなるカテゴリリストを例に、リストマークの画像化を行います。

<ul class="sideMenu">
	<li><a href="/cat1/">パソコン関係</a>
		<ul>
			<li><a href="/cat1/cat11/">パソコン本体</a></li>
			<li><a href="/cat1/cat12/">パソコン周辺機器</a></li>
			<li><a href="/cat1/cat13/">パソコンソフト</a></li>
		</ul>
	</li>
	<li><a href="/cat2/">家電製品関係</a>
		<ul>
			<li><a href="/cat2/cat21/">デジタルカメラ</a></li>
			<li><a href="/cat2/cat22/">電気シェーバー</a></li>
		</ul>
	</li>
</ul>

この状態だと、サイドバー用メニューリストのHTML構造に記載したサンプルのように、リストマークが黒丸と白丸で表示されます。

CSSの書き方

第1段階 - リストマークを非表示にする

まずは、自動的に付けられるリストマークを、list-styleプロパティで非表示（none）にします。

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li { list-style:none; }

同時に、「.sideMenu」と「.sideMenu ul」（クラス「sideMenu」内のulタグ）のmarginとpaddingをゼロにします。marginとpaddingを同時に指定するのは、IEとFirefoxとで、リスト左部の余白のとり方が異なるためです。（IEはmargin、Firefoxはpadding）すると、上記サンプルの通り、親カテゴリと子カテゴリがリストマークなしで一列に並びます。

第2段階 - 親カテゴリのリストマークを画像化

次に、まず親カテゴリからリストマークを画像に置き換えていきます。親カテゴリのリストマーク用として次の画像を利用します。

（folders.gif　横20px×縦26px）

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li {
	list-style:none;
	padding-left:25px;
	background:url('folders.gif') left top no-repeat;
	line-height:26px;
}

まず、padding-leftプロパティでリスト左側の余白を背景画像の横幅と同程度に指定します。画像とテキストの間隔が狭く感じるようでしたら、画像より少し大きめの値を指定してください。なお、ここでmargin-left使ってしまうとリストの外側に余白が作られ、liタグに指定する背景画像にアンカーテキストが被って表示されてしまいますので、ご注意ください。

背景画像はbackgroundプロパティでURL、表示位置（left top＝左上に表示）、繰り返し方法（no-repeat＝繰り返しなし）を指定、また、line-heightプロパティで、1行の高さを画像と同じ高さ（ここでは26px）に指定します。

背景画像の表示位置は、サンプルでは「left top（左上）」に指定しましたが、リストの行数が1行で収まる場合は「left（左中央）」でも構いません。（この場合、2行になるとリストマークが2行中の真ん中に表示されてしまい、少々カッコ悪くなります。）

なお、リストマークはlist-style-imageプロパティで画像を指定することができますが、この場合、画像の大きさや1行の高さによってリスト画像がずれて表示されてしまうことがあるため、このページでは崩れの少ないbackgroundを利用したリスト画像使用方法を解説しています。

最終段階 - 子カテゴリのリスト画像を変更

このままですと、親カテゴリと子カテゴリのリストマークが同じになってしまい少々分かりづらいので、子カテゴリの画像を変更することにします。親カテゴリのリストマーク用として次の画像を利用します。

（folder.gif　横20px×縦26px）

.sideMenu , .sideMenu ul { margin:0; padding:0;  }
.sideMenu li {
	list-style:none;
	padding-left:25px;
	background:url('folders.gif') left top no-repeat;
	line-height:26px;
}
.sideMenu li ul li { background-image:url('folder.gif'); }

背景画像の表示位置と繰り返し方法は親カテゴリと同様ですので、ここではbackground-imgaeプロパティを使用し、背景画像のURLだけを変更します。

すると、上記サンプルのとおり、親カテゴリでは2つのフォルダが重なった画像、子カテゴリではフォルダ1つの画像が表示されるようになります。

ここでは指定していませんが、実際にサイドバーで利用する際は、親ボックス（.sideMenu）の上下の余白や、各liタグのフォントサイズ・1行の高さなどを、周囲のデザインや使用する背景画像の大きさなどに合わせて指定し、見栄えを整えましょう。

【備考】
ここで使用しているフォルダ画像は、ご自由にご利用いただけます。ただし、直リンクはせず、ご自身のサーバーにアップしてご利用ください。