演習課題「インラインボックスを構成してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。また、これらはspan要素であり、displayプロパティにblockが指定されています。
ここで、displayプロパティをinlineに変更して、インラインボックスを構成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです!
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
#03:インライン(inline)
このチャプターでは、インラインを学習します。
display: inline;と指定された要素(またはデフォルトでインラインの要素)は、以下の特徴を持ちます。
・新しい行を開始しない: インライン要素は、文章の一部のように、前後の要素と同じ行内に配置されます。コンテンツの幅に合わせて必要な分だけ幅を取ります。
・幅と高さ: widthやheightプロパティを指定しても効果がありません。要素の幅と高さは、そのコンテンツによって決まります。
@charset "UTF-8";
div {display: inline;}
.box_1 {background-color: aqua;}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}
MDN web docs - display (inline値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/display#inline