カードレイアウトにあうCSSクラス名を考えてみよう！

完成イメージ

ここでは既に構造が用意されたHTMLに対して、適切なclass名を自分で考えて記述していく練習を行います。
どの要素にclassを付けるべきか、どのような名前にすべきかを考えることで、構造の把握力や命名設計力を高めることが目的です。

作成ファイル・保存場所

前回作成したcss-class フォルダに以下のファイルを作成しましょう。
今回トレーニングするための HTMLファイルをダウンロードします。そのファイルに classの設定を行い、そのclassに対して、CSS ファイルを作成し、プロパティの設定を行います。

ファイル名	内容
css-class04.html	クラス名を追加するためのHTMLファイルを使用　コピーしてご利用ください。
style-class04.css	自作CSSファイル（リンク設定を行う）

Classをつける前の、HTMLコードは下記をコピーして使用してください。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class04</title>
    <link rel="stylesheet" href="style-class04.css">
</head>

<body>
    <section id="menu">
        <div>
            <h2>Menu</h2>
            <ul>
                <li>
                    <article>
                        <img src="https://placehold.jp/590x357.png?text=image" width="590" height="357" alt="HTML講座">
                        <h3>HTML講座</h3>
                        <p>
                            Web制作の土台となるHTMLの基本構造を学びます。見出しや段落、リストや画像挿入など、正しいタグの使い方と意味を理解しましょう。
                        </p>
                    </article>
                </li>
                <li>
                    <article>
                        <img src="https://placehold.jp/590x357.png?text=image" width="590" height="357" alt="CSS講座">
                        <h3>CSS講座</h3>
                        <p>
                            Webページを装飾するCSSの基本文法と使い方を学びます。色、フォント、レイアウト、ボックスモデルなどを理解し、HTMLにデザインを加えましょう。
                        </p>
                    </article>
                </li>
                <li>
                    <article>
                        <img src="https://placehold.jp/590x357.png?text=image" width="590" height="357"
                            alt="レスポンシブデザイン">
                        <h3>レスポンシブデザイン</h3>
                        <p>
                            スマホからPCまで見やすく調整するレイアウト手法を学びます。メディアクエリやflexboxを活用して、実用的なデザインに仕上げましょう。
                        </p>
                    </article>
                </li>
                <li>
                    <article>
                        <img src="https://placehold.jp/590x357.png?text=image" width="590" height="357" alt="模写コーディング">
                        <h3>模写コーディング</h3>
                        <p>
                            実際のデザインを見ながら、HTMLとCSSで再現する練習です。構造を見極め、クラス名を設計し、実装する力を養いましょう。
                        </p>
                    </article>
                </li>
            </ul>
        </div>
    </section>
</body>

</html>

チェックポイント

適切なclass名を各要素（ul, li, h3, img, pなど）に記述できているか
class名のつけ方に一貫性があるか（命名ルール、ケバブケースなど）
共通スタイル用のクラスと、特定要素用のクラスを分けて使えているか
セクション全体、各カード、見出し、画像、説明文などにクラスが設定されているか
.container や .section-title など、再利用性のあるクラスも活用しているか

指示

ダウンロードしたファイル（css-class04.html）を開く
以下のように、構造を意識したクラス名を追加してください

要素	クラス名（例）	補足説明
`<section>`	menu	セクションの識別用。背景色などをつける時に便利
`<div>`	container	中央揃え・幅制限を行う共通レイアウト枠
`<h2>`	section-title	セクション共通の見出しデザイン用
`<ul>`	menu-list	カード全体を並べるリスト（Gridレイアウト対応）
`<li>`	menu-item	各カード要素のリスト項目。並び順や枠に利用
`<article>`	menu-article	カード全体を囲む要素。背景や影の装飾用
`<img>`	menu-image	カード内の画像。幅や角丸、比率の調整に使用
`<h3>`	menu-name	各カードのタイトル部分。中央揃えなどに使用
`<p>`	menu-description	メニューの説明文。余白や文字幅の調整に使用

HTMLにclassをつけた参考例

HTMLに class をつけた参考例です。クラス名を設定した一例として作成しています。
正解というわけではありませんが、参考として、自分のファイルと見比べてみましょう。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Class04</title>
    <link rel="stylesheet" href="style-class04.css">
</head>

<body>
    <section id="menu" class="menu">
        <div class="container menu-container">
            <h2 class="section-title">Menu</h2>
            <ul class="menu-list">
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="HTML講座">
                        <h3 class="menu-name">HTML講座</h3>
                        <p class="menu-description">
                            Web制作の土台となるHTMLの基本構造を学びます。見出しや段落、リストや画像挿入など、正しいタグの使い方と意味を理解しましょう。
                        </p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="CSS講座">
                        <h3 class="menu-name">CSS講座</h3>
                        <p class="menu-description">
                            Webページを装飾するCSSの基本文法と使い方を学びます。色、フォント、レイアウト、ボックスモデルなどを理解し、HTMLにデザインを加えましょう。
                        </p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="レスポンシブデザイン">
                        <h3 class="menu-name">レスポンシブデザイン</h3>
                        <p class="menu-description">
                            スマホからPCまで見やすく調整するレイアウト手法を学びます。メディアクエリやflexboxを活用して、実用的なデザインに仕上げましょう。
                        </p>
                    </article>
                </li>
                <li class="menu-item">
                    <article class="menu-article">
                        <img src="https://placehold.jp/590x357.png?text=image" class="menu-image" width="590"
                            height="357" alt="模写コーディング">
                        <h3 class="menu-name">模写コーディング</h3>
                        <p class="menu-description">
                            実際のデザインを見ながら、HTMLとCSSで再現する練習です。構造を見極め、クラス名を設計し、実装する力を養いましょう。
                        </p>
                    </article>
                </li>
            </ul>
        </div>
    </section>
</body>

</html>

クラスを使って、以下のようなスタイルを style-class02.css に書いてみましょう：

💡 このあとは？完成イメージを見ながらできるだけ自分でCSSを書いてみましょう。
わからない場合は、この課題ページの下部にある CSS 解答例 を参考にしても大丈夫です。

CSS解答例

解答例ですので、他の記述方法でも問題ありません。自身のコードと照らし合わせみましょう

html {
    font-size: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

address {
    font-style: normal;
}

ul,
ol {
    list-style-type: none;
}

body {
    font-size: 14px;
    line-height: 1.5;
    font-family: sans-serif;
    background-color: #ffffff;
    color: #333;
}

section {
    padding: 2rem 0;
}

.container {
    width: calc(100% - 2rem);
    margin: 0 auto;
    max-width: 1200px;
}

/* 見出し */
.section-title {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 30px;
    position: relative;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 4px;
    background-color: #2d0202;
    margin: 10px auto 0;
}

.menu {
    background-color: #cffdc1;
}

.menu-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: stretch;
}

.menu-item {
    height: 100%;
}

.menu-article {
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0px 0px 3px #dddddd77;
    background-color: #ffffffe2;
    overflow: hidden;
}

.menu-image {
    display: block;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    width: 100%;
    height: auto;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.menu-name {
    text-align: center;
    margin: 1rem 0 0.5rem;
    font-size: 1.2rem;
}

.menu-description {
    padding: 0 1rem 1rem;
    flex-grow: 1;
}


@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    .menu-list {
        grid-template-columns: 1fr 1fr;
        gap: 4rem 2rem;
    }

    section {
        padding: 6rem 0;
    }
}