演習課題「リストマーカーに画像を指定してみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されています。
ここで、index.htmlやstyle01.cssのファイルと同じディレクトリに保存されているlistmarker.pngをリストマーカーに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:リストのマーカーに画像を適用する(list-style-image)
このチャプターでは、リストのマーカーに画像を適用する方法について学習します。
CSSのlist-style-imageプロパティは、リストマーカーとして、デフォルトの記号や数字の代わりに画像を使用することを可能にします。
このプロパティを使用することで、リストの視覚的な魅力を高めたり、特定のデザインに合わせてカスタマイズしたりすることができます。list-style-imageプロパティの値は、以下のように指定します。
・none (デフォルト値): 画像マーカーを使用しません。この場合、list-style-typeで指定されたマーカーが使用されます。
・<url>: マーカーとして使用する画像のURLを相対パスで指定します。例えば、url('images/image.png')のように記述します。
画像が何らかの理由で表示できない場合（例: URLが間違っている、画像ファイルが存在しないなど）は、代わりにlist-style-typeプロパティで指定されたマーカーが代替として表示されます。
@charset "UTF-8";
li {
list-style-position: outside;
list-style-image: url(image.png);
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
MDN web docs - list-style-image
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-image