今回はリストをレイアウトするときに使えるlist-style-imageのお話。
画像はどこから探せばいいの？
このような疑問に答えながらlist-style-image使い方を初心者向けにわかりやすく解説します。
この記事を最後まで読めばlist-style-imageのプロパティがが使いこなせるようになるはずです。
ぜひ最後まで読んでみて下さい。
目次
list-style-imageとは
list-style-imageの読み方
list-style-imageは【リスト・スタイル・イメージ】と読みます。
listは一覧表・リスト、styleは様式・スタイル、imageは画像を意味します。
list-style-imageはリストのマーカー部分に画像をつけることができるプロパティです。
list-style-imageはリストのマーカー部分を画像で表示します
リストスタイルとは、下記のようになリストになっているものを指します。
表示
- りんご
- バナナ
- メロン
コード
|
1 2 3 4 5 |
<ul> <li>りんご</li> <li>バナナ</li> <li>メロン</li> </ul> |
ちなみに【ol】で囲むと順序付きリストになります。
表示【olで囲んだ場合・順序付き】
- りんご
- バナナ
- メロン
コード【olで囲んだ場合・順序付き】
|
1 2 3 4 5 |
<ol> <li>りんご</li> <li>バナナ</li> <li>メロン</li> </ol> |
【余談】文字で点や数字を打てばいいんじゃないの？
見た目は変わりありませんが、タグを使うことでブラウザに「これはリストですよ」と示すことができるのでタグを使いましょう。
list-style-imageで利用できる値
list-style-imageでは以下の値を使うことができます。
| 値 | 説明 |
|---|---|
| none | 例・list-style-image: none; 画像をマーカーとして使用しないように指定します。この値が設定された場合、代わりに list-style-typeで定義されたマーカーが使われます。 |
| url | 例・list-style-image: url(“../../example.svg”); 表示したい画像のurlを指定します。 |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 完全対応 |
| Edge | 完全対応 |
| Firefox | 完全対応 |
| nternet Explorer | 完全対応 |
| Opera | 完全対応 |
| Safari | 完全対応 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 完全対応 |
| Android 版 Opera | 完全対応 |
| iOS版Safari | 完全対応 |
| Samsung Internet | 完全対応 |
このように全てのブラウザで対応しているので安心して使用できます。
list-style-imageの基本的な使い方
list-style-imageの使い方
cssでulに対して指定します。
|
1 2 3 4 |
<ul> <li>アイテム1</li> <li>アイテム2</li> </ul> |
|
1 2 3 |
ul { list-style-image: url("https://../../../example.gif"); } |
※urlの部分は変更してください。
実装結果
list-style-imageと類似する要素との違い
list-style-imageと類似する要素に【list-style-type】というプロパティがあります。
list-style-typeを指定することで簡単にマーカーを数字や文字に変更できます。
さらにcssでデザインを変えればさらにおしゃれなものに変更できます。
list-style-type
list-style-typeは次のように指定できます。
【list-style-type: none】マーカーなし
- りんご
- バナナ
- いちご
【list-style-type: disc】黒丸
- りんご
- バナナ
- いちご
【list-style-type: circle】白丸
- りんご
- バナナ
- いちご
【list-style-type: square】黒四角
- りんご
- バナナ
- いちご
【list-style-type: lower-roman】小文字のローマ数字
- りんご
- バナナ
- いちご
【list-style-type: upper-roman】大文字のローマ数字
- りんご
- バナナ
- いちご
【list-style-type: lower-greek】小文字のギリシャ文字
- りんご
- バナナ
- いちご
【list-style-type: decimal】算用数字
- りんご
- バナナ
- いちご
【list-style-type: decimal-leading-zero】先頭に0をつけた算用数字
- りんご
- バナナ
- いちご
【list-style-type: lower-latin】小文字のアルファベット
(【list-style-type: lower-alpha】でもOK)
- りんご
- バナナ
- いちご
【list-style-type: upper-latin】大文字のアルファベット
(【list-style-type: upper-alpha】でもOK)
- りんご
- バナナ
- いちご
【list-style-type: cjk-ideographic】漢数字
- りんご
- バナナ
- いちご
【list-style-type: hiraganaひらがなのあいうえお順】
- りんご
- バナナ
- いちご
【list-style-type: katakana】 カタカナのアイウエオ順
- りんご
- バナナ
- いちご
【list-style-type: hiragana-iroha】ひらがなのいろはにほへと順
- りんご
- バナナ
- いちご
【list-style-type: katakana-iroha】カタカナのイロハニホヘト順
- りんご
- バナナ
- いちご
※ヘブライ数字、アルメニア数字、グルジア数字は使用頻度が少ないので、今回は省略します。
最初の点だけが【ul】タグで残りは【ol】タグを使うので覚えておきましょう。
全て暗記する必要はありません。
基本だけ覚えていて応用したい時はググればOKです。
list-style-imageのおしゃれなデザイン【画像の見つけ方】
では実際にどのようなデザインがオススメでしょうか？
いざ画像を使用しようと思ってもおしゃれなフリー画像を見つけるのは難しいです。
そこでオススメなフリーアイコンサイトを3つ紹介します。
ICOON MONO
シンプルなのでマーカーとしても使い勝手がいいです。
ダウンロードする前に画像の色が変えられるので便利です。
ハンコでアソブ
150 outlined icons
https://freebiesbug.com/psd-freebies/150-free-outlined-icons-psd-ai-svg-webfont/
まとめ
いかがだったでしょうか。
今回はlist-style-imageの設定方法や、おしゃれな画像サイトを紹介しました。
リストのスタイルはcssでも設定できますが、画像を使えば簡単におしゃれなリストスタイルが設定できます。
この記事が少しでもお役に立てれば幸いです。
参考文献：https://developer.mozilla.org/ja/docs/Web/CSS/list-style-image
