演習課題「リストマーカーの設定をまとめてしてみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されています。
ここで、li要素のlist-styleプロパティを用いて、マーカーをブロックボックスの外側に表示されるようにし、さらにマーカーの種類を「白丸」に設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:リストの設定をまとめてする(list-style)
このチャプターでは、リストの設定をまとめる方法について学習します。
CSSのlist-styleプロパティは、リストアイテムのマーカーに関する複数のスタイル（種類、画像、位置）を一度にまとめて設定するためのプロパティです。
このプロパティを使用することで、list-style-type、list-style-image、list-style-positionの各プロパティを個別に記述する手間を省き、CSSコードを簡潔にすることができます。list-styleプロパティには、以下の値を1つから3つまで、任意の順序で指定できます。
・list-style-typeの値 (例: disc, decimal, none)
・list-style-imageの値 (例: url('image.png'))
・list-style-positionの値 (例: inside, outside)
例えば、list-style: square inside; や list-style: url('custom-bullet.png') outside; のように記述します。
値が1つまたは2つだけ指定された場合、残りのプロパティはそれぞれの初期値に設定されます。もしlist-style-imageがnone以外の値に設定され、かつ画像が正常に読み込める場合、list-style-typeによるマーカーは表示されません。
@charset "UTF-8";
li {
list-style: square inside;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
MDN web docs - list-style
https://developer.mozilla.org/ja/docs/Web/CSS/list-style