ホーム グラフィックス、HP素材の作り方 無料素材、HP素材 ウェブデザインのスキル ホームページ作成者のためのリンク集
WEB TIPS > ビュレットのつけかた

よくメニューなどに、画像のマークがついていることがありますね。

あれは、スタイルシートの設定で変換しているのです。

ul {
list-style-image: url(images/arrow01.gif);
}

url(〜〜)のところは、自分の作った画像のパスを指定してください。

取り急ぎ素材がない場合はこれを使ってもらってもかまいません。

リスト形式になると、位置が変わるので、マージン属性(margin-left: 10px;)をつけて位置を修正することをオススメします。

上のスタイルシートと混ぜると、

ul {
list-style-image: url(images/arrow01.gif);
margin-left: 10px;
}

こんな風に入れていきます。

  • あいうえお
  • かきくけこ
  • さしすせそ
  • なにぬねの

ビュレット画像を変えたいなと思ったら、CSSでリンクされている画像を1つ変えるだけです。

 

ページの先頭に戻ります