CSSスキル - 第5章 Lesson8

リストのアイコンを画像に変更する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

リストのアイコンを画像に変更するlist-style-imageプロパティの書き方を、初心者向けに解説しています。



この動画で学べること

・リストマーカーに画像を設定する方法



リストマーカーに画像を設定する方法

リストのマークを自分のすきな画像にする方法を見ていきしょう。
リストマーカーに画像を設定するときには、list-style-imageというプロパティを使い、値に 「url(画像のパス)」と書きます。
まずは前回学んだように「list-style-type: none;」と書き、リストのマークを消してから、リストマークになる画像を設定していきましょう。
では、実際にid名background-imgの<ul>タグのリストマークに画像を設定していきます。



ul#background-img {
list-style-type: none;
list-style-image: url(img/list-check.png);
}



保存してブラウザで見てみましょう。
リストマークが指定した画像になりました。