箇条書きに画像【list-style-image】：CSS入門
CSS入門（12）
今回は、箇条書きタグ（<ul>、<li>）に画像を使ってみようと思います。「list-style-image」を使うとリストマークの箇所を画像にすることができます。
お話は、次の順番で進みます。
箇条書きに画像を使う
1：前回までの状態
（01）
はじめに、前回までの状態を確認しておきましょう。とりあえず、箇条書きのリストマークを、アラビア数字（decimal）にして終わっているはずです。
CSSコードは、次のようになります。
2：画像を用意する
（02）
今回は、「list-style-image」を使って、箇条書きのリストマークに画像を使います。次のような感じになります。
できれば小さい画像を用意してください。これといった画像がない人は、記事「無料Web素材 三角（5）」で同じ三角の画像をダウンロードして使ってください。
私が使っている画像は、色が「indigo（#4b0082）」で、ファイル名は、「free_triangle_005_indigo.gif」です。
保存先なんかは大丈夫ですよね？えぇ、そうです、CSSファイルと同じフォルダ内です。
3：箇条書きに画像を使う
（03）
まず、前回作成した「list-style-type」のコードを削除します。
ul li { list-style-type: decimal; }
あ、でも残しておいても良いですよ。このコードを残しておくと、画像がないときに、「decimal」で表示されるだけです。
（04）
次のように、「list-style-image」で、画像の場所を指定します。url()の括弧の中にファイル名を記述してください。
同じフォルダ内なので、画像のファイル名だけで大丈夫です。
（05）
ブラウザで表示してみましょう。できたかしらん？
CSSコードは、次のようになります。
4：大きい画像を使うと・・・
（06）
ちなみに、どうして「小さい画像を〜」と言っていたかというと、文字サイズより大きい画像の場合は、うまく位置が調整できないことが多いようです。
文字サイズより大きい画像を使いたい場合は、「list-style-image」を使わずに、他の方法で行います。その方法については、また別の機会にお話します。
次回予告
次回は、文字フォントの指定について書く予定です。間に無料写真素材「桜（2）」を、はさみました。
関連記事
CSSに関連する記事を、ご紹介します。
1：カスタマイズ前
2：CSSの基本的なこと
3：色の指定
4：罫線の指定
5：間隔（余白）の指定
6：継承と子孫セレクタ
7：箇条書き（リスト）
8：文字（フォント）の指定
9：idセレクタ、classセレクタ
10：文章を読みやすくする
11：文字の中央揃え（センタリング）
12：レイアウト
13：tableの中央揃え（センタリング）
14：CSSで飾る
15：まとめ
作成日：2008/04/19 更新日：2008/04/19
« 「箇条書きの装飾【list-style-type】」｜「フォントの指定【font-family】」 »
コメントありがとうございます。
現在、コメントさんも、お休みしています。
「画像」が表示されました。
sachiさん、すご過ぎる！
おー、すごい。
相変わらず、テキパキとこなしますねぇ。
早くもこんなにも進んでいるのですねー。すごい。
（1）ぼんやり
ぼんやりでも十分です。
すべてすぐに使えなくても大丈夫です。
確かこんなこと出来たはず
↓
あそこに書いてあったはず
↓
発見
↓
出来る
いまの世の中覚えなくてはいけないことが多過ぎます。
常に使わない知識は、書いてある場所さえ覚えておけば、
問題ないと思います。
（2）url
そうですね。同じフォルダ内でもurlと書きます。
記述するルールを考えている人が付けたかったのでしょうね。
しょうがないですよね。付けたいんじゃあ。(oﾟωﾟo)
トラックバック
http://kumacrow.blog111.fc2.com/tb.php/274-55f7c399
今夜はいい気分です。
本当はぼんやりとしかわかっていませんが。
同じフォルダの中でもurlが必要なのですね。
「適当フォルダ」・・・面白いです。