演習課題「リストマーカーの挿入位置を変更してみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されています。
ここで、li要素のlist-style-positionプロパティをinsideから変更して、マーカーがブロックボックスの外側に表示されるようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:マーカーの挿入位置を変える(list-style-position)
このチャプターでは、マーカーの挿入位置について学習します。
CSSのlist-style-positionプロパティは、リストアイテムのマーカー（ビュレット（黒丸）や番号など）を、テキストに対する相対的な位置でどこに表示するかを指定します。
このプロパティは、マーカーがリストアイテムのテキストの内側に食い込むか、外側に配置されるかを制御します。list-style-positionプロパティには、主に以下の値があります。
・outside (デフォルト値): マーカーは、主要なブロックボックスの開始端の外側に配置されます。テキストが複数行にわたる場合、2行目以降はマーカーの下には回り込みません。
・inside: マーカーは、主要なブロックボックスの開始端の内側に配置され、最初のテキスト行の一部として扱われます。テキストが複数行にわたる場合、2行目以降はマーカーの下に回り込みます。
@charset "UTF-8";
li {
list-style-position: inside;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
MDN web docs - list-style-position
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-position