演習課題「リストマーカーの種類を変更してみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されており、リストマーカーは非表示となっています。
ここで、li要素のlist-style-typeプロパティをnoneから変更して、リストマーカーを「白丸」に設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「リストマーカーに連番を指定してみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されており、リストマーカーとして白丸が表示されています。
ここで、li要素のlist-style-typeプロパティをcircleから変更して、リストマーカーを数字の連番に設定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃03:マーカーを変える(list-style-type)
このチャプターでは、マーカーを変える方法について学習します。
CSSのlist-style-typeプロパティは、リストアイテムのマーカーの種類を指定します。これにより、順序付きリストや順序なしリストのマーカーを様々なスタイルに変更することができます。
このプロパティは、リストの見た目をカスタマイズするための基本的な手段です。list-style-typeプロパティには、以下のような多くの値があります。
・disc (デフォルト値): 黒丸 (●)
・circle: 白丸 (○)
・square: 黒四角 (■)
・decimal: アラビア数字 (1, 2, 3, ...)
・none: マーカーを表示しません。
その他にも、ローマ数字や日本語の「いろは順」、ギリシャ文字など、多様な値が存在します。
@charset "UTF-8";
li {
list-style-position: outside;
list-style-type: square;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
@charset "UTF-8";
li {
list-style-position: outside;
list-style-type: decimal;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
リストマーカーとして文字列を設定しようとすると警告が表示されますが、実行上は問題ありません。@charset "UTF-8";
li {
list-style-position: outside;
list-style-type: 'x';
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
@charset "UTF-8";
li {
list-style-position: outside;
list-style-type: none;
margin-top: 5px;
margin-bottom: 5px;
padding: 5px;
background-color: yellow;
}
MDN web docs - list-style-type
https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type