概要
上記のコードを編集し、以下の画像のようなレイアウトを作成してください。
HTMLコードに必要なclassは追加してあるため、HTMLの修正は必要ありません。
style.css上でスタイル指定が必要なclassがある場合は、必要なセレクタ等を追記してください。
- 横並びにはflexboxでのレイアウトを使用すること
まず「親」と「子」を確認する
Flexboxで横並びにしたいときは、並べたい要素そのものではなく、それらを直接囲んでいる親要素にdisplay: flex;を指定します。親要素がフレックスコンテナー、その直接の子要素がフレックスアイテムになります。
/* クラス名は課題データのHTMLに合わせます */
.親要素のクラス {
display: flex;
}最初はdisplay: flex;だけを書き、横並びになったことを確認してから、間隔や位置を調整すると原因を切り分けやすくなります。
作業手順
- HTMLを見て、横並びにしたい要素を探します。
- その要素をまとめている直接の親要素と、親要素のclass名を確認します。
- CSSで親要素に
display: flex;を指定します。 - ブラウザを再読み込みし、子要素が横並びになったか確認します。
- 目標画像と比べ、必要に応じて
gap、justify-content、align-itemsを一つずつ追加します。
よくある間違い
- 子要素に
display: flex;を書いている：その子の中身が並びます。並べたい要素を囲む親に指定します。 - 親だと思った要素が違う：Flexboxの対象になるのは直接の子要素です。HTMLの開始タグと終了タグを確認します。
- class名が一致していない：HTMLの
class="items"に対して、CSSは.itemsと書きます。 - 一度に多くの指定を追加する：まず横並びだけを確認し、その後に余白と揃え方を追加します。
- CSSが読み込まれていない：横並び以前に色なども反映されない場合は、HTMLとCSSの連携を理解するで読み込みを確認します。
この課題ができたら、要素の中央揃えを扱うmargin: 0 auto;で中央揃えする方法と、もう一段階進んだFlexboxレイアウト練習にも取り組めます。
参考：MDN「フレックスボックスの基本概念」（2026年10月7日確認）
目標となる画像
目的
フレックスボックスによるレイアウトができるようになる。
データ
使用ソフト
VisualStudioCode
答え（作業完了後にみてください。）
Just a moment...
codepen.io
