リストマークをCSSで配置する

リストマークをCSSで配置していきます。リストマークなので主にメニューとして使うことを想定しています。
htmlとCSSがまったくわからない人には配置するのは難しいかもしれません。

html

<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>

CSS

ul{/*余白と本来あるマークを消します*/
margin:0;
padding:0;
list-style:none;
}
li{
font-size:14px;
margin:5px 0;
padding:0 0 0 20px;
background:url("表示させたい画像のURL（パス）をいれます") no-repeat;
}

結果

解説

三角マーク素材作成講座で作成したシンプルな三角マークを表示した例となっています。
メニューにリストマークを使う場合、画像の大きさが重要であまり大きく作りすぎると文字サイズとうまく合わなくなり配置が難しくなります。

今回使った画像サイズは20×20ピクセルで三角形の周りの背景は透明なので背景色をつけても大丈夫です。
画像と文字の位置がずれる場合はpaddingで調節するか画像の配置位置で調節が必要となります。

▲トップ