独立した記事カードをCSSのGridでレイアウトしよう（rem設計）

複数の記事（<article>）を Grid を使ってスマホでは1列／PCでは2列のカード型レイアウトに切り替える方法を学びます。また、記事単位で <header>・<footer> を使い、1つ1つが独立した情報ブロックであることを意識した構造を練習します。

この課題はモバイルファースト設計で構成されています。
また、フォントサイズなどは rem 単位で設計されています。
html { font-size: 100%; } を基準にし、1rem = 16px としてスタイルを指定します。

作成ファイル・保存場所

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

HTMLファイル：10.htmlHTMLファイルはコピーして使用可
CSSファイル：style10.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課題10</title>
    <link rel="stylesheet" href="style10.css">
</head>

<body>

    <!-- サイト全体のヘッダー -->
    <header>
        <h1>ブログタイトル</h1>
        <nav>ナビゲーションが入ります</nav>
    </header>

    <!-- メインコンテンツ -->
    <main>

        <!-- 記事1 -->
        <article>
            <header>
                <h1>HTMLとCSSの違いとは？</h1>
                <p>最終更新：<time datetime="2025-04-16">2025年4月16日</time></p>
            </header>
            <p>
                HTMLはウェブページの構造を定義するマークアップ言語であり、CSSはその見た目や装飾を整えるスタイルシートです。
                両者は組み合わせて使用されることが一般的で、Web制作の基礎となる重要な技術です。
            </p>
            <footer>
                <p>執筆：Nakamura</p>
            </footer>
        </article>

        <!-- 記事2 -->
        <article>
            <header>
                <h1>Webアクセシビリティとは何か</h1>
                <p>最終更新：<time datetime="2025-04-16">2025年4月16日</time></p>
            </header>
            <p>
                アクセシビリティとは、障害のある方を含むすべてのユーザーにとって利用しやすいウェブを目指す考え方です。
                適切なマークアップとサポート技術への配慮により、情報の公平なアクセスが実現できます。
            </p>
            <footer>
                <p>執筆：Nakamura</p>
            </footer>
        </article>

        <!-- 記事3 -->
        <article>
            <header>
                <h1>JavaScriptの基本構文を学ぼう</h1>
                <p>投稿日：<time datetime="2025-04-16">2025年4月16日</time></p>
            </header>
            <p>
                JavaScriptはWebページに動きを加えるためのプログラミング言語です。
                変数や関数、条件分岐などの基本構文を理解することで、インタラクティブな要素を作成できます。
            </p>
            <footer>
                <p>執筆：Nakamura</p>
            </footer>
        </article>

        <!-- 記事4 -->
        <article>
            <header>
                <h1>レスポンシブデザインとは？</h1>
                <p>更新日：<time datetime="2025-04-16">2025年4月16日</time></p>
            </header>
            <p>
                レスポンシブデザインは、画面サイズに応じてWebページのレイアウトを最適化する手法です。
                スマートフォンやタブレットでも見やすく操作しやすいUIを提供するために欠かせません。
            </p>
            <footer>
                <p>執筆：Nakamura</p>
            </footer>
        </article>

    </main>

    <!-- サイト全体のフッター -->
    <footer class="footer">
        <p><small>&copy; 2025 MyBlog</small></p>
    </footer>

</body>

</html>

指示

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

10.html に style10.css を外部CSSとして読み込んでください。
<main> を display: grid にし、スマートフォンでは1列、PCでは2列にレイアウトしてください。
各 <article> は白背景＋ボーダー＋影をつけてカードのような見た目にしましょう。
<article> 内の <header>, <footer> に適切な装飾を加えて構造を明確に見せてください。
<time> 要素は背景色やサイズを変えて目立たせてみましょう。

補足：`<time>` 要素とは？

<time> 要素は、「日時」や「時間」を明示的に示すためのHTMLタグです。
機械にも読み取りやすくするために、datetime 属性を使って ISO形式で日付を指定することができます。ブログ記事の日付やイベントの開始時間や更新日時のマークアップに使用します。

<time datetime="2025-05-17">2025年5月17日</time>

このように書くことで、人には「2025年5月17日」と表示されつつ、機械（検索エンジンやスクリーンリーダーなど）には「2025-05-17」として認識されます。

チェックポイント

Gridでのレイアウトがスマホ→1列／PC→2列に切り替わっているか
各 <article> が独立した意味のある構造になっているか
time要素のスタイル変更が見た目に反映されているか
rem単位でのスタイル指定が理解できているか

🔍 補足：`rem` 単位でスタイルを統一する理由

この課題では、フォントサイズや余白などの単位に px（ピクセル）ではなく rem を使用しています。

`rem` の特徴

rem は html要素の文字サイズを基準（root em） にして計算される単位です。

例えば、html { font-size: 100%; } の場合、1rem = 16px になります。

利点

全体の文字サイズを一括で調整できる
　→ たとえば body の font-size を変更すれば、1rem 基準のすべてのサイズが連動して変わります。
ユーザーの ブラウザの文字サイズ設定 にも柔軟に対応できます。
デザイン全体を「倍率」でコントロールしやすく、レスポンシブ設計や可読性確保に有利です。

html {
  font-size: 100%; /* ブラウザ標準の16pxが1remになる */
}
/*スマホの時は14pxで*/
body {
  font-size: 0.875rem; /* 0.875 × 16px = 約14px */
}

/*タブレット以上の時は、16pxに*/
/* 48rem × 16px = 768px 相当 */
@media (min-width: 48rem) {
  body {
    font-size: 1rem; /* 1rem × 16px = 16px（標準サイズに戻す） */
  }
}

このように、1か所を変更するだけで全体がスケールアップ・ダウンできるのが大きなメリットです。

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

基本設定
- html { font-size: 100%; } を指定（1rem = 16px）
- body には font-size: 0.875rem（=14px）、line-height: 1.6
main に Grid を設定
- grid-template-columns: 1fr;（スマホ表示）
- gap: 1.25rem;（20px）
- width: calc(100% - 2rem);, max-width: 60rem（960px）
@media (min-width: 48rem) で2列に切り替え
- grid-template-columns: 1fr 1fr;
- body のフォントサイズ → 1rem（=16px）
article カードの装飾
- background-color: #fff, padding: 1rem
- border: 1px solid #ddd, border-radius: 0.375rem
- box-shadow を使って立体感を出す
article header, footer の調整
- header h1: 1.25rem → PCで 1.5rem（24px）
- footer: font-size: 0.85rem, border-top, margin-top, padding-top を設定
time タグの強調
- 背景色：#666、文字色：白、padding: 0.2rem
- font-size: 0.8rem

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

スマホでも2列表示にしてみよう！
→ grid-template-columns: 1fr 1fr; にするだけで実現できます。
→ メディアクエリを使わずにレイアウトを調整できるのがGridの強みです！
PCでは3列にしてみるには？
→ grid-template-columns: 1fr 1fr 1fr; に変更して試してみましょう。

完成イメージ

解答例（CSS）

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

html {
    font-size: 100%;/* 1rem = 16px */
}

body {
    font-family: sans-serif;
    font-size: 0.875rem;/* 14px */
    line-height: 1.6;
    background-color: #f9f9f9;
}

/* --- ヘッダーとフッター（サイト全体） --- */
header {
    text-align: center;
    background-color: #eee;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

h1 {
    font-size: 1.625rem;/* 26px */
}

/* --- メインコンテンツをGridで構成 --- */
main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;/* 20px */
    max-width: 60rem;/* 960px */
    width: calc(100% - 2rem);/* 両サイド1remずつ余白 */
    margin: 0 auto 1.25rem;
}

/* --- 各記事カードのスタイル --- */
article {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    border-radius: 0.375rem;/* 6px */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05);/* 2px 4px */
}

/* --- 記事内のheader/footerの構成 --- */
article header h1 {
    font-size: 1.25rem;/* 20px */
    margin-bottom: 0.2rem;
}

article header p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

article footer {
    font-size: 0.85rem;
    color: #999;
    margin-top: 1.5rem;
    border-top: 1px solid #eee;
    padding-top: 0.5rem;
}

article time {
    background-color: #666;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.2rem;
}

/* --- フッター --- */
footer {
    text-align: right;
}

.footer {
    text-align: center;
    background-color: #4c4c4c;
    color: #fff;
    padding: 1rem 0;
}

/* --- PC時：2カラム表示に切り替え --- */
@media (min-width: 48rem) {
    /* 768px */
    article header h1 {
        font-size: 1.5rem;/* 24px */
    }

    main {
        grid-template-columns: 1fr 1fr;
    }

    body {
        font-size: 1rem;
        line-height: 1.8;
    }
}