演習課題「ボックスを非表示にしてみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめ、名無しと表示されています。また、名無しにはunknownクラスが適用されています。
ここで、displayプロパティにnoneを指定して、「名無し」を表示しないようにしてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:ボックスを表示しない(none)
このチャプターでは、ボックスを表示しない方法を学習します。
display: none;と指定された要素は、ウェブページ上に表示されず、レンダリングツリーから完全に除外されます。
この設定が適用された要素は、以下のようになります。
・非表示: ユーザーには見えません。
・レイアウトに影響しない: 要素が存在しないかのように扱われるため、ページレイアウトにおいてスペースを占有しません。
・アクセシビリティ: スクリーンリーダーなどの支援技術からも通常はアクセスされません（ただし、実装に依存する場合があります）。display: none;は、JavaScriptと組み合わせて動的に要素を表示したり非表示にしたりする場合や、特定の条件下でのみ要素を隠したい場合によく使用されます。
@charset "UTF-8";
.box_1 {
display: none;
background-color: aqua;
}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}
MDN web docs - display (none値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/display#none