概要
※印刷推奨
PDFにWebサイトのスクリーンショットが掲載されています。
横並びレイアウトが掲載されている箇所を探し、レイアウト用の枠線をかきこみなさい。
記述例
目的
横並びレイアウトを行うには、要素の構造をしっかり作る必要があります。
構造の作り方をマスターします。
書き込む前に、レイアウトの箱を見つけましょう
横並びの見た目をそのまま線でなぞるのではなく、まずHTMLの親子関係を考えます。Flexboxでは、display: flex;を指定した要素の直下の子要素が横並びの対象になります。
<section class="cards">
<article class="card">カード1</article>
<article class="card">カード2</article>
</section>.cards {
display: flex;
gap: 24px;
}この例では、2つの.cardをまとめている.cardsが親要素です。課題画像には、カード1枚ずつだけでなく、2枚をまとめる親要素の範囲も書き込みます。
レイアウト書き込み問題の進め方
- ページ全体を大きな区切りに分けます。 ヘッダー、メイン、フッターのように、外側の大きな箱から考えます。
- 同じ形で繰り返される要素を探します。 カード、メニュー、ボタンなど、横に並ぶ兄弟要素を見つけます。
- 兄弟要素を直接まとめる親要素を囲みます。 Flexboxを指定する候補は、横並びにしたい要素そのものではなく、その直上の親要素です。
- 内側の余白と外側の余白を分けます。 箱の内側は
padding、隣の箱との間隔はgapやmarginとして考えます。 - 解答PDFと照らし合わせます。 線の位置だけでなく、「なぜその範囲を親要素にしたか」を言葉で説明できれば理解が深まります。
よくある間違い
- 横並びにしたい子要素へ、それぞれ
display: flex;を書く： 子要素の中身が並ぶだけです。兄弟要素を並べたい場合は、その直接の親に指定します。 - ページ全体を1つの大きなFlexboxにする： 必要なまとまりごとに親要素を分けると、HTMLもCSSも管理しやすくなります。
- 見た目の空白だけで箱を決める： 余白は要素の境界とは限りません。見出しや画像、文章がどのまとまりに属するかも確認します。
- 最初から
positionで配置する： 通常の横並びはFlexboxから検討します。位置を固定する指定は、装飾など必要な場面に絞りましょう。
ブラウザで確認する方法
実際のHTMLを作ったら、ブラウザの開発者ツールで親要素を選択します。要素にマウスを重ねて、強調表示される範囲が想定した箱と一致するかを確認してください。一時的に次のCSSを加える方法も分かりやすいです。
.cards {
outline: 2px solid #e85d75;
}outlineはレイアウト寸法を変えずに境界を見やすくできます。確認後は削除してください。
次に取り組む教材
- Flexレイアウト練習：親要素と子要素の関係を、実際のコーディングで確かめられます。
- paddingとmarginの違い：箱の内側・外側の余白を整理できます。
- 上下中央に配置する方法：Flexboxを使った中央配置の考え方を学べます。
参考資料
データ
使用ソフト
VisualStudioCode
