第2部 HTML/CSS — Day 14 / 30

Flexboxレイアウト

<style>
  .row {
    display: flex;
    gap: 1rem;
  }
  .row .card { flex: 1; }
</style>

<div class="row">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
</div>

親要素に display: flex を指定すると、子要素が横に並びます。gap は要素どうしのすき間、flex: 1 は「余った幅を均等に分け合う」という指定です。

今日の練習

カードの数を増やしたり、.row に justify-content: center; を追加したりして、並び方の変化を観察しましょう。

模範解答を見る

<style>
  .row {
    display: flex;
    gap: 1rem;
    justify-content: center;   /* 中央寄せ */
  }
</style>

<div class="row">
  <div class="card">カード1</div>
  <div class="card">カード2</div>
  <div class="card">カード3</div>
  <div class="card">カード4</div>
</div>

flex: 1 の指定を外すと、justify-content: center による中央寄せの効果が見やすくなります。

理解度チェック

学籍番号と氏名を入力してクイズに正解すると、確認コード付きの提出用画面が表示されます。スクリーンショットを撮って Teams の Class Notebook に提出してください。

学籍番号氏名（フルネーム）

Q. 子要素を横に並べるために親要素に指定するのはどれでしょうか?

display: none display: flex display: block

Completed

正解です！Day 14 の学習を確認しました

科目	経営情報 2026
教材	プログラミング入門30日 Day 14 Flexboxレイアウト
学籍番号
氏名
提出時間
確認コード

提出時間はサーバー時刻に基づきます。

この画面のスクリーンショットを撮り、Teams の Class Notebook に提出してください。