演習課題「インラインブロックボックスを構成してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。また、これらはspan要素であり、displayプロパティにinlineが指定されています。
ここで、displayプロパティをinline-blockに変更して、インラインブロックボックスを構成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「インラインブロックボックスの大きさを指定してみよう」
現在、ブラウザでは、ぱいじょの生徒として霧島京子、六村リオ、緑川つばめと表示されています。また、これらはspan要素であり、displayプロパティにinline-blockが指定されています。
ここで、widthプロパティとheightプロパティを用いて、各ブロックの横幅を300px、縦幅を50pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:インラインブロック(inline-block)
このチャプターでは、インラインブロックを学習します。
display: inline-block;と指定された要素は、インライン要素とブロック要素の両方の特性を併せ持ちます。
・インライン要素のように配置: 他のインラインレベルの要素と同じ行に並び、前後に改行を生じません。
・ブロック要素のように整形可能: widthやheightプロパティで幅と高さを指定できます。
インラインブロック要素は、例えばナビゲーションメニューの項目や、小さな情報カードを横並びにしたい場合などに便利です。要素自体のサイズを制御しつつ、行内に配置したい場合に活用されます。
@charset "UTF-8";
.box {
display: inline-block;
width: 200px;
height: 70px;
background-color: aqua;
}
MDN web docs - display (inline-block値に関する記述)
https://developer.mozilla.org/ja/docs/Web/CSS/display#inline-block