箇条書きに画像【list-style-image】:CSS入門

ブログが作りたい!CSS入門 > 箇条書きに画像【list-style-image】:CSS入門

箇条書きに画像【list-style-image】:CSS入門

箇条書きに画像【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】」 »

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

「画像」が表示されました。

とてつもないことが できたようで
今夜はいい気分です。
本当はぼんやりとしかわかっていませんが。

同じフォルダの中でもurlが必要なのですね。

「適当フォルダ」・・・面白いです。

sachiさん、すご過ぎる!

sachiさん、こんばんは。

おー、すごい。
相変わらず、テキパキとこなしますねぇ。
早くもこんなにも進んでいるのですねー。すごい。

(1)ぼんやり
ぼんやりでも十分です。
すべてすぐに使えなくても大丈夫です。

 確かこんなこと出来たはず
  ↓
 あそこに書いてあったはず
  ↓
 発見
  ↓
 出来る

いまの世の中覚えなくてはいけないことが多過ぎます。
常に使わない知識は、書いてある場所さえ覚えておけば、
問題ないと思います。

(2)url
そうですね。同じフォルダ内でもurlと書きます。
記述するルールを考えている人が付けたかったのでしょうね。

しょうがないですよね。付けたいんじゃあ。(o゚ω゚o)

No title

初めまして!(^^)!

いつも参考にさせてもらってます。
ありがとうございます。

いろいろやってる時に思ったことがありましたので質問させてください。

h1~h6のタグを使用した場合ですが、
li同様にコメント最初に画像が常にでるようにすることはできるのでしょうか?

もし、方法があるのでしたら教えてください。

お忙しいとは思いますが、よろしくお願いします。

hタグの先頭に画像を表示する方法

リンさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。


はい、できます。

一般的な方法としては、「background」を使って、
背景画像として表示する方法になるかと思います。

例えば、h1の先頭に画像をつけるとすれば、
次のように書きます。

+----+----+----+----+----+----+----+----+----+----+
h1 {
background-image: url(画像URL);
background-repeat: no-repeat;
background-position: left center;
padding-left: 1em;
}
+----+----+----+----+----+----+----+----+----+----+

何をしているかと申しますと、
「background-image」で、先頭に使用したい画像を指定。
「background-repeat」で、繰り返さない指定。
「background-position」で、おおまかな配置を指定。

そして「padding-left」で、
背景画像と文字がかぶらないようにしています。

また、慣れてきたら、
次のように省略して書いても OKです。

+----+----+----+----+----+----+----+----+----+----+
h1 {
background: url(画像URL) no-repeat left center;
padding-left: 1em;
}
+----+----+----+----+----+----+----+----+----+----+

背景画像と文字の位置があわない場合は、
別途 paddingを足したり数値を変更してみてください。

画像の大きさによって微妙に違ってきます。


「background」については、こちら↓をご覧いただくと、
どんなものかイメージできるかと思います。

http://kumacrow.blog111.fc2.com/blog-entry-296.html


それから、ulリストに関しても、
「background」を使う方が、配置は楽です。↓

http://kumacrow.blog111.fc2.com/blog-entry-511.html


期待する結果にならなかった場合は、
お手数ですが改めてコメントしてくださいませ。

今後もよろしくお願いいたします。(*'‐'*)

No title

最近FC2ブログを始めました。現在FC2のテンプレートを自作中です。基本的なhtml、css等は分かりオープンソースなどのテンプレートもカスタマイズできるのですが、FC2ブログは外部スタイルシート内のbackground-imageなどは、どこにアップしたらいいのか基本的なことが分からないでいます。
ツール内のファイルアップロードにアップするのでしょうか。恐れ入りますが教えていただけると助かります。

ファイルをアップできる場所

tokunakataさん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

CSSのbackground-imageで指定している画像を、
どこにアップしたらいいのか?というお話かしら?(*'‐'*)

それだったら、おっしゃっている通り、
ツールのファイルアップロードになります。


画像に限らず、
HTMLファイルや、CSSファイルなどの場合も同様です。

FC2ブログにて、ファイルをアップできる場所は、
ここだけです。

あまりサーバの調子が良くないですけどね。(´Д`;)

No title

KumaCrow(クマクロ)さん。ありがとうございました。
ファイルアップロードを自分で確認してみました。
今後ともよろしくお願い致します。

これは、これは、ご丁寧に(´▽`)♪

tokunakataさん、こんにちは!(・∀・)/へろー
コメントありがとうございます。

解決したようで、何よりです。

こちらこそ、
今後もよろしくお願い申し上げます。((o(´∀`)o))

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/274-55f7c399
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて