演習課題「li要素のdisplayプロパティを変更してみよう」
現在、ブラウザでは、ぱいじょの生徒である霧島京子、六村リオ、緑川つばめの3人からなるリストが表示されています。
ここで、li要素のdisplayプロパティをlist-itemからblockに変更してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃01:リストのボックス
このチャプターでは、リストのボックスについて学習します。
CSSのdisplayプロパティの値のひとつであるlist-itemは、要素をリストの項目として表示させます。HTMLのli要素のデフォルトの表示形式です。display: list-item は、主に以下の特徴を持ちます。
・ブロックボックスとマーカーボックスのふたつのボックスから構成されます。
・マーカーボックスは要素の前に生成されます。マーカーの種類や位置は、のちのチャプターで学習するlist-style-typeやlist-style-positionなどのプロパティで制御できます。
@charset "UTF-8";
li {display: block;}
・MDN web docs - display
https://developer.mozilla.org/ja/docs/Web/CSS/display