2011.05.25
css

HTMLのul liで点の部分だけ色を変える その2

以前こちらに書いたものよりも便利な方法です。

リストを作るときに点の色と文字の色を別にする方法です。

以前に書いた方法だとリストをする量が少ない場合は簡単で良いですが、たくさんのリストがあるときには逆に手間がかかってしまいます。

リスト表示する量が多いときは、CSSのlist-style-imageを使うと一気に解消します。

色を変えるというのとはちょっと違いますが考え方としては同じだと思います。

点にするイメージ画像を事前に作成して、jpegやgif、pngファイルとして保存し、任意の場所に置きます。

例えば、dot.jpgという画像ファイルを作成した場合、ソースは下記のように。

<ul style="list-style-image: url('画像ファイルのパス/dot.jpg')">
<li>和食</li>
<li>洋食</li>
<li>中華</li>
</ul> 

仮に事前に作成したイメージ画像が

だったとすると

  • 和食
  • 洋食
  • 中華

のように表示されます。

関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP