演習課題「ブロックボックスを構成してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。また、これらはspan要素です。
ここで、displayプロパティにblockを指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「ブロックボックスの大きさを指定してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。また、これらはspan要素であり、displayプロパティにblockが指定されています。
ここで、widthプロパティとheightプロパティを用いて、各ブロックの横幅を200px、縦幅を50pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:ブロック(block)
このチャプターでは、ブロックを学習します。
display: block;と指定された要素（またはデフォルトでブロックレベルの要素）は、以下の特徴を持ちます。
・新しい行から開始: ブロック要素は常に新しい行から始まり、その後に続く要素も新しい行から開始されます。
・幅: 親要素の幅全体を占めるのが基本です。widthプロパティで幅を明示的に指定できます。
・高さ: heightプロパティで高さを指定できます。指定しない場合は、内容に応じた高さになります。
@charset "UTF-8";
span {
display: block;
width: 300px;
height: 50px;
}
.box_1 {background-color: aqua;}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}
MDN web docs - display (block値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/display#block