プログラミング入門30日 の Day 14

第2部 HTML/CSS

Day 14 Flexboxレイアウト

🎯 今日のゴール display: flex で要素を横に並べられる。

<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 の提出欄にアップロードしてください。

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

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

問題番号プログラミング入門30日 Day 14
学籍番号
氏名
提出時間
確認コード

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

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