CSSスキル - 第5章 Lesson9

背景画像を利用したリストアイコンの表示方法

   

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

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

list-style-imageは、アイコンの位置が調整できず、文字とずれて見えてしまう場合があります。
ここでは、背景画像としてリストアイコンを表示させ、綺麗なリストを作成する方法を解説します。



この動画で学べること

・位置調整のできるリストアイコンを作成する方法



位置調整のできるリストアイコンを作成する方法

位置調整のできるリストアイコンを作成してみましょう。
前回学んだlist-style-imageプロパティは、位置調整ができないため、実はWeb制作ではあまり使われません。
実際使われるのは、backgrounで画像を表示させるという方法なので、今回はその方法を見ていきましょう。
まず、前回のlist-style-imageはもう必要ないので消しておきましょう。
backgroundプロパティを書き、値に「url(画像のパス)」を入力してください。





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




一度、保存してブラウザで見てみましょう。
画像がリストの背景全体に敷き詰められました。
全体に表示させる必要は内ので、画像に「no-repeat」を指定して、1度だけ表示させる用にします。
また、リストの文字からpaddingの余白をとることによって、画像と文字が重ならないようにしましょう。




ul#background-img li {
list-style-type: none;
background: url(img/list-check.png) no-repeat;
padding-left: 30px;
}




保存してブラウザで見てみましょう。
backgroundによる画像の表示が上手くいきました。