制作実績をCSSのFlexboxとレスポンシブでレイアウトしよう

Flexboxを使用して制作実績をパソコン表示では2列×2行、スマートフォン表示では1列になるようレイアウトします。
また、@media を使って画面サイズによってデザインを切り替えるレスポンシブ対応を学びましょう！

作成ファイル・保存場所

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

HTMLファイル：08.htmlHTMLファイルはコピーして使用可。
CSSファイル：style08.css（今回新たに作成）
HTMLファイルに、metaコードを追加を確認
<meta name="viewport" content="width=device-width, initial-scale=1.0">

htmlは下記からコピー

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>課題08</title>
</head>

<body>
    <!-- ヘッダー部分 -->
    <header>
        <h1>私のWebサイト</h1>
        <p>ようこそ！私のポートフォリオサイトへ</p>
    </header>

    <!-- メインコンテンツ -->
    <main>
        <section>
            <h2>最近の活動</h2>
            <ul>
                <li>ブログを週1で更新しています</li>
                <li>写真を毎月ギャラリーに追加しています</li>
                <li>新しいWebアプリを開発中です</li>
            </ul>
        </section>
        <section class="works">
            <h2>制作実績</h2>
            <div class="work-list">
                <figure>
                    <img src="https://dummy.kobeya.com/?width=300&height=200&bg=ebebeb&color=000000&text=%E4%BD%9C%E5%93%811_300%C3%97200&_=1744770004665"
                        alt="作品1">
                    <figcaption>作品１</figcaption>
                </figure>
                <figure>
                    <img src="https://dummy.kobeya.com/?width=300&height=200&bg=fbeaea&color=000000&text=%E4%BD%9C%E5%93%812_300%C3%97200&_=1744770022244"
                        alt="作品2">
                    <figcaption>作品2</figcaption>
                </figure>
                <figure>
                    <img src="https://dummy.kobeya.com/?width=300&height=200&bg=f7fbea&color=000000&text=%E4%BD%9C%E5%93%813_300%C3%97200&_=1744770040312"
                        alt="作品3">
                    <figcaption>作品3</figcaption>
                </figure>
                <figure>
                    <img src="https://dummy.kobeya.com/?width=300&height=200&bg=d6deff&color=000000&text=%E4%BD%9C%E5%93%814_300%C3%97200&_=1744770061470"
                        alt="作品4">
                    <figcaption>作品4</figcaption>
                </figure>

            </div>
        </section>
    </main>

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

</body>

</html>

覚えているかな？今回使用している要素<header> <main> <figure>に関しては、HTML基礎の課題08から課題12までを確認しましょう。忘れている方は、振り返りの復習をしましょう。

指示

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

08.html に style08.css を外部CSSとして読み込んでください。
ページ全体をセマンティックに整理しつつ、以下のスタイルを適用してください。
制作実績 .work-list を Flexbox を使ってレイアウトしてください。
スマートフォン（最大幅767px）では、画像を1列に表示してください。
リセット、<body>, <h1> 要素は従来通りの内容で、任意の指定とします。

チェックポイント

Flexboxで .work-list を横並びにできているか
スマートフォンで1列に崩れるように @media を使えているか
画像サイズや余白、見出しの整え方が適切か
vertical-align や border-left などの細かい調整ができているか

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

スクロールできます

プロパティ / 構文	よく使う値	説明
display	flex	子要素を横並びにする。Flexboxを有効にします。
flex-wrap	wrap	要素がはみ出したときに自動で折り返します（スマホに必須）
gap	20px	子要素の間に均等なすき間を作ります。margin調整より簡単
justify-content	space-between	横方向に等間隔で並べたいときに使います
align-items	center, stretch	縦方向の揃え方を指定します。高さ揃えや中央寄せに使います
@media	(max-width: 767px)	画面が狭くなったとき（スマホなど）だけに別スタイルを指定できます

@media に関する補足

@media は 画面の幅や高さに応じてスタイルを切り替える仕組みです。
今回は (max-width: 767px) とすることで、画面が767px以下（主にスマホ）のときだけ .work-list figure を width: 100% にし、1列表示に切り替えています。

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

全体のリセットと基本スタイルを指定
- * セレクタを使って margin, padding をリセットし、box-sizing: border-box; を全要素に適用
- body にフォントサイズ・行間・パディングを設定（値は任意）
ヘッダーとフッターに背景色＋中央揃え
- text-align: center
- padding, margin-bottom は適宜調整
見出しのデザイン
- h1: フォントサイズ 28px、下に余白（margin-bottom: 0.5em）
- h2: フォントサイズ 20px、左側に線 → border-left を使用、内側余白に padding-left
補足：border-left を使うと、見出しの左側に装飾的な線を簡単に入れることができます。
リストの調整
- ul に list-style: disc; margin-left: 1.5em; padding-left: 0.5em; を指定し、リストマークと余白を設定
カードエリア .work-list にFlexboxレイアウトを適用
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- justify-content: space-between;
.work-list figure にカード風スタイル
- width: 48%; で2列レイアウト
- border, box-shadow, padding などで枠・余白・影を追加
.work-list img に画像調整
- width: 100%; height: auto;
- vertical-align: bottom; で画像下の余白を防止
補足：ブロック要素ではない画像に vertical-align を指定することで、figcaptionとの間にできる余白をなくすことができます。
.work-list figcaption に説明文のスタイル
- 上下余白・小さめの文字サイズ・やや薄い色指定（例：font-size: 0.9em; color: #555;）
レスポンシブ対応（この回のもう1つのポイント）
- @media (max-width: 767px) を使って、figure を width: 100% に変更し、1列表示に切り替え

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

PCでは3列、スマホでは2列 or 1列に切り替える高度なレイアウト
画像に hover を加えて拡大・変化させる
figcaption の表示位置やアニメーションを工夫してみる

完成イメージ

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

解答例（CSS）

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

body {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 1.8;
    background-color: #f8f8f8;
    padding: 20px;
}

/* --- ヘッダー・フッター --- */
header,
footer {
    background-color: #eaeaea;
    text-align: center;
    padding: 1em 0;
    margin-bottom: 2em;
}

h1 {
    font-size: 28px;
    margin-bottom: 0.5em;
}

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

/* --- 最近の活動（テキスト） --- */
main section {
    margin-bottom: 2em;
}

ul {
    list-style: disc;
    margin-left: 1.5em;
    padding-left: 0.5em;
}

/* --- 制作実績エリア --- */
.work-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.work-list figure {
    width: 48%;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
    padding: 10px;
    text-align: center;
}

.work-list img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
}

.work-list figcaption {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #555;
}

/* --- スマートフォン対応 --- */
@media (max-width: 767px) {
    .work-list figure {
        width: 100%;
    }
}