記事とサイドバーをCSSでレイアウトしよう（Flex + レスポンシブ応用）

<section> と <aside> を使った2カラムレイアウトを Flexbox で構築し、画面幅に応じて1カラムに切り替えるモバイルファーストでのレスポンシブ設計の基本と応用を学びます。
また、記事本文に画像を含めたり、<dl> を使った構造的なお知らせレイアウトにもチャレンジします。

作成ファイル・保存場所

css-basic フォルダの中に以下の2つのファイルを用意してください：

HTMLファイル：09.htmlHTMLファイルはコピーして使用可
CSSファイル：style09.css（今回新たに作成）
meta: <meta name="viewport" content="width=device-width, initial-scale=1.0"> を <head> に追加してください（レスポンシブ対応のため）

htmlは下記からコピー

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML課題09</title>
    <link rel="stylesheet" href="style09.css">
</head>

<body>
    <!-- ヘッダー -->
    <header>
        <h1>Webデザイン通信</h1>
    </header>
    <!-- メインコンテンツ -->
    <main>
        <!-- 最新記事セクション -->
        <section>
            <h2>最新記事</h2>
            <article>
                <h3>CSSグリッドの基本</h3>
                <p>CSSグリッドは、レイアウトを柔軟に作れる強力な機能です。この記事では基本構文を紹介します。</p>
                <figure>
                    <img src="https://dummy.kobeya.com/?width=800&height=400&text=CSS+Grid" alt="CSSグリッドの解説画像">
                </figure>
            </article>

            <article>
                <h3>Figmaでのプロトタイピング</h3>
                <p>Figmaはデザインと共有が簡単なツールです。今回はプロトタイピング機能の使い方を解説します。</p>
                <figure>
                    <img src="https://dummy.kobeya.com/?width=800&height=400&text=Figma+UI" alt="Figmaの解説画像">
                </figure>
            </article>
        </section>

        <!-- サイドコンテンツ -->
        <aside>
            <h2>お知らせ</h2>
            <dl>
                <dt>4月</dt>
                <dd>春の短期講座 開講</dd>
                <dt>5月</dt>
                <dd>新しい教材を追加予定</dd>
                <dt>6月</dt>
                <dd>ポートフォリオ作品展 開催</dd>
                <dt>7月</dt>
                <dd>講評会 開催予定</dd>
                <dt>8月</dt>
                <dd>JavaScript基礎講座 公開</dd>
                <dt>9月</dt>
                <dd>秋期受講生 募集中</dd>

            </dl>
        </aside>

    </main>

    <!-- フッター -->
    <footer>
        <p><small>&copy; 2025 MySite</small></p>
    </footer>

</body>

</html>

目的

このCSSはモバイルファースト（スマートフォン優先設計）で書かれています。
画面が広くなると、@media によって2カラムレイアウトなどに切り替わる構成です。

指示

以下の条件に従って、CSSファイルを作成・適用してください。

09.html に style09.css を外部CSSとして読み込んでください。
レイアウトはスマートフォンでは縦並び、PCでは記事＋サイドバーの2カラム構成にしてください。
article の画像には余白・サイズ調整を行い、aside には背景色・ボーダーを加えてサイドバーらしくしてください。
<dl> の表示を2列（dt:dd）で左右に整列させてください。
meta viewport の記述を <head> に追加して、レスポンシブ表示が可能になるようにしてください。
リセット、<body>, <h1> 要素は従来通りの内容で、任意の指定とします。

チェックポイント

main がスマホでは縦並び、PCでは2カラムになるようになっているか
article 内の画像が正しくリサイズされて表示されているか
aside のスタイルが視覚的に「サイドバー」として成立しているか
dl の表示が左右2列で整っていて、内容の可読性が高いか
@media によるレイアウト切り替えが正しく効いているか
calc() や gap などを使って柔軟な余白調整ができているか

今回使うCSSプロパティのポイント

この課題では、Flexbox によるレイアウトに加えて、calc() 関数や要素の表示順序を変える order といった、少し応用的なプロパティも登場します。

vertical-align: bottom

インライン要素（特に画像など）の垂直位置を揃えるために使います。
今回の課題では、画像の下にできる「余白（すき間）」をなくすために指定しています。

通常、画像はベースライン（文字の下線）に揃って表示されるため、下に余白ができやすいですが、
vertical-align: bottom を使うことで、画像の下端を親要素にぴったり揃えることができます。

img {
  vertical-align: bottom;
}

display: flex

Flexbox（フレックスボックス）を使うと、要素を横並びや縦並びに整列できます。
flex-wrap: wrap をつけることで、画面が狭いときに折り返し表示されるようになります。

.work-list {
  display: flex;
  flex-wrap: wrap;
}

flex-direction

子要素の並ぶ方向を指定できます。

flex-direction: row;     /* 横並び（デフォルト） */
flex-direction: column;  /* 縦並び */

row-gap（または column-gap）

要素間の「すき間（余白）」を調整するプロパティです。Flexboxの縦方向に間隔を空けたい場合は row-gap を使います。column-gap を使えば、横方向のすき間も調整できます。

.work-list {
  row-gap: 20px;
}

width: calc()

CSSの calc() 関数を使うと、数値やパーセントを計算式で組み合わせて使うことができます。たとえば、親要素から余白を引いた幅を指定できます。この例では「全体幅100%から40pxを引いた幅」となり、左右に20pxずつの余白を確保する意図があります。単位が混ざる場合（% と pxなど）は、calc() を使うと柔軟に指定できます。

main {
  width: calc(100% - 40px);
}

マイナスの左右に半角スペースが必要です。

スタイルの指定内容（style09.css）

全体のリセットと基本設定
- * { box-sizing: border-box; } などを含むリセット
- body にフォントサイズ、背景色、読みやすさのための line-height を設定
main に Flexbox を使って縦並び（スマホ）/横並び（PC）に切り替え
- flex-direction: column;
- width: calc(100% - 2em);（左右に余白）
- margin: 0 auto; で中央揃え
- row-gap: 30px; でセクション間に縦の余白
💡補足：
flex-direction: column のときは row-gap を使って上下の間隔を調整します。
calc(100% - 2em) を使うことで、スマホ表示でも左右に程よい余白が取れます。
@media (min-width: 768px) で PC表示に切り替え
- flex-direction: row;
- section { width: 70%; }
- aside { width: 30%; }
- gap は column-gap: 20px; に調整
article に余白・画像サイズ調整
- img { width: 100%; vertical-align: bottom; }
- 最後の article の下に余白が出ないように :last-child を使用
aside に背景色・内側余白・枠線をつけてサイドバー風に
- background-color: #f4f4f4;, padding: 1em;, border: 1px solid #ddd;
aside dl を2列表示に調整
- display: flex; flex-wrap: wrap;
- dt { width: 20%; text-align: center; }
- dd { width: 80%; }
- border-bottom を使って行の区切りをつける

応用ポイント（任意で挑戦！）

aside を右側に表示させるか、左側にしてみる（order の使い方）
aside の dt をもっと強調（色・太字）してみる

完成例　表示イメージ

左がスマートフォン　右がPCの表示イメージです。

解答例（CSS）

この課題では、メイン+サイドバーの2カラム構成と、そのレスポンシブ切り替えを体感できます！
Webメディア・ニュースサイト・ブログなど、実際のレイアウトに近い経験ができます

/* --- リセットと基本 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "メイリオ", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fdfdfd;
}

/* --- ヘッダー・フッター共通 --- */
header {
    background-color: #efefef;
    text-align: center;
    margin-bottom: 2em;
}

h1 {
    font-size: 28px;
    padding: 1em 0;
}

h2 {
    font-size: 20px;
    margin-bottom: 0.5em;
    border-left: 10px solid #ccc;
    padding-left: 10px;
}

h3 {
    font-size: 18px;
    margin-bottom: 0.3em;
}

/* --- レイアウト全体 --- */
main {
    display: flex;
    flex-direction: column;
    width: calc(100% - 2em);
    margin: 0 auto 20px;
    /* 縦並びの時は、横並びのcolumn-gapはききません */
    /* column-gap: 30px; */
    row-gap: 30px;
}

/* --- セクションとアサイドのレイアウト --- */
section {
    background-color: #ffffff;
    padding: 1em;
    border: 1px solid #ddd;
}

article {
    margin-bottom: 2em;
}

article:last-child {
    margin-bottom: 0;
}

article img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

/* --- サイドバー風アサイド --- */
aside {
    background-color: #f4f4f4;
    padding: 1em;
    border: 1px solid #ddd;
}

aside dl {
    display: flex;
    flex-wrap: wrap;
    font-size: 0.9em;
}

aside dl dt,
aside dl dd {
    border-bottom: 1px solid #ddd;
}

aside dl dt {
    width: 20%;
    text-align: center;
}

aside dl dd {
    width: 80%;
}

footer {
    background-color: #373737;
    text-align: center;
    color: #fff;
}

/* --- レスポンシブ：PC表示で横並びに --- */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    main {
        flex-direction: row;
        /* PCの時は、横方向にすきまをあける */
        column-gap: 30px;
        max-width: 960px;
        margin: 0 auto 20px;
    }

    section {
        width: 70%;
    }

    aside {
        width: 30%;
    }
}