リストのマーカーに画像をつかう

普通にulタグを使うとマーカーとして・が使われますが、 これを自分で用意した画像に置き換えるというテクニックです。

テクニック使用前

• トップページ
• 初心者の館
• 私的デザイン論
• CSSテクニック
• ギャラリー

テクニック使用後

• トップページ
• 初心者の館
• 私的デザイン論
• CSSテクニック
• ギャラリー

このテクニックを使うにはulタグとliタグにスタイルを設定する必要があります。 次のようなソースをスタイルシートに追加します。

ul{
    list-style:none;
    width:***px;
}
li{
    list-style:none;
    padding-left:**px;
    background:url(../../img/point-s.gif) no-repeat center left;
}

このテクニックは、マーカーを消して、背景画像をマーカーに見立てるというテクニックです。

そのためlist-style:none;でマーカーをまず消します。ulとli両方に設定するのは、 うまく処理できないブラウザーがあるからです。

続いてbackground:url(../../img/point-s.gif) no-repeat center left;で 背景画像を指定し、表示方法を決めます。ポイントはno-repeatを使い繰り返さないことです。

最後にpadding-left:**px;を指定して文字の開始位置をずらし、背景に文字がかぶらないようにします。

あとは表示したい場所に合わせてulにマージンやパディングを追加してください。

---

使いこなすための＋α

このテクニックは割りと不安定で、上手く表示されないことがあります。 そのような時はulにwidthを設定してください。これで解決するはずです。

あと、画像と文字の大きさが違うときはliパディングを追加する必要があるかもしれません。

これはおまけですが、liを次のようにすると面白くなります。

li{
    padding-right:**px;
    background:url(../../img/point-s.gif) no-repeat center right;
    text-align:right;
}

• トップページ
• 初心者の館
• 私的デザイン論
• CSSテクニック
• ギャラリー

他にもclassをつくり、背景画像を変えても面白い効果が得られます。

自分なりの活用法を見つけてみてください。

---