CONTENTS
  1. HOME
  2. CSS
  3. CSS-CLASS設計
  4. セクションを意識したCSSクラス名をつけてみよう

セクションを意識したCSSクラス名をつけてみよう

セクションごとに異なる背景色やデザインを適用することで、Webページの構成を視覚的にわかりやすくします。また、class名のつけ方や共通レイアウト、モバイルファーストの基本的な考え方を理解し、適切なHTML構造とCSS設計ができるようになることを目指します。左がスマートフォン　右がPCです。

作成ファイル・保存場所

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

ファイル名内容
css-class03.htmlクラス名を追加するためのHTMLファイルを使用　コピーしてご利用ください。
style-class03.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>Class03</title>
    <link rel="stylesheet" href="style-class03.css">
</head>

<body>
    <!-- セクションごとにidと同じclass名をつける -->
    <section id="about">
        <div class="container">
            <h2>About</h2>
            <div>
                <p>
                    私たちは、初心者向けにWeb制作の基礎を学べる教材を提供しています。HTML・CSSから始まり、JavaScriptやWordPressまで段階的に学習できます。
                </p>
            </div>
        </div>
    </section>

    <section id="service">
        <div class="container">
            <h2>Service</h2>
            <div>
                <p>
                    オンライン教材の配信、対面型の講座、実践課題の添削など、幅広いサービスで学びをサポートします。ご希望に応じた学習スタイルを選べます。
                </p>
            </div>
        </div>
    </section>

    <section id="access">
        <div class="container">
            <h2>Access</h2>
            <div>
                <div>
                    <p>
                        福岡市中央区にある教室では、実際に講師と対面で学ぶことも可能です。地下鉄赤坂駅から徒歩5分とアクセスも便利です。
                    </p>
                    <address>
                        〒800-0000<br>福岡市中央区XXXXXXX<br>TEL 000-9999-9999
                    </address>
                </div>
    <!-- GoogleMapを貼り付ける -->
            </div>
        </div>
    </section>
</body>

</html>

チェックポイント

  • セクションごとに class を設定して、背景色が切り替わっているか
  • 各セクション内に共通レイアウトの .container が使われているか
  • .section-title クラスで見出しのデザインを共通化できているか
  • 説明文や住所情報を包むブロックに、意味のあるクラス名をつけられているか（例：.access-info）
  • モバイルファーストで記述し、PC向けのスタイルは @media (min-width: 768px) で上書きできているか
  • iframe やテキストの並びがスマホで縦、PCで横になるよう切り替えられているか

指示

  1. ダウンロードしたファイル（css-class03.html）を開く
  2. 以下のように、構造を意識したクラス名を追加してください
要素クラス名の例補足
<section>about / service / access各セクションを識別するクラス名（背景色の変更にも使用）
<div>containerセクション内の共通レイアウト用ラッパー（横幅の制限・中央揃え）
<h2>section-title各セクションの見出しに共通のスタイルを適用するクラス
<div>about-description / service-description各セクションの本文ブロック。背景色や枠線を調整
<div>access-descriptionアクセスセクションのレイアウトを調整するための全体ラッパー（flexレイアウト）
<div>access-infoアクセスの説明文・住所をまとめた情報ブロック

HTMLにclassをつけた参考例

HTMLに class をつけた参考例です。
この「css-class02.html」は、クラス名を設定した一例として作成しています。
正解というわけではありませんが、参考として、自分のファイルと見比べてみましょう。
<!DOCTYPE html>
<html lang="ja">

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

<body>
    <!-- セクションごとにidと同じclass名をつける -->
    <section id="about" class="about">
        <div class="container about-container ">
            <h2 class="section-title">About</h2>
            <div class="about-description">
                <p>
                    私たちは、初心者向けにWeb制作の基礎を学べる教材を提供しています。HTML・CSSから始まり、JavaScriptやWordPressまで段階的に学習できます。
                </p>
            </div>
        </div>
    </section>

    <section id="service" class="service">
        <div class="container service-container">
            <h2 class="section-title">Service</h2>
            <div class="service-description">
                <p>
                    オンライン教材の配信、対面型の講座、実践課題の添削など、幅広いサービスで学びをサポートします。ご希望に応じた学習スタイルを選べます。
                </p>
            </div>
        </div>
    </section>

    <section id="access" class="access">
        <div class="container access-container">
            <h2 class="section-title">Access</h2>
            <div class="access-description">
                <div class="access-info">
                    <p>
                        福岡市中央区にある教室では、実際に講師と対面で学ぶことも可能です。地下鉄赤坂駅から徒歩5分とアクセスも便利です。
                    </p>
                    <address>
                        〒800-0000<br>福岡市中央区XXXXXXX<br>TEL 000-9999-9999
                    </address>
                </div>
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d53181.241647682626!2d130.34514801670718!3d33.583825123965326!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x354193d4b33ced49%3A0x11dc7e62cee4802d!2z56aP5bKh55yM56aP5bKh5biC5Lit5aSu5Yy6!5e0!3m2!1sja!2sjp!4v1748056301153!5m2!1sja!2sjp"
                    width="600" height="300" style="border:0;width:100%" allowfullscreen="" loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"></iframe>
            </div>
        </div>
    </section>
</body>

</html>
  1. クラスを使って、以下のようなスタイルを 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;
}

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

address {
    font-style: normal;
}

section {
    padding: 2rem 0;
}

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

/* 背景ごとのセクション色 */
.about {
    background-color: #fbe6a6;
}

.service {
    background-color: #bad2fe;
}

.access {
    background-color: #f6acac;
}

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

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

/* セクション本文 */
.about-description,
.service-description {
    margin: 0 auto;
    padding: 2rem;
    background-color: #ffffffbc;
}

.about-description {
    max-width: 600px;
    border: 2px dashed #f4c432;
}

.service-description {
    max-width: 800px;
    border: 2px dotted #2f73f1;
}

.access-description {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

/* iframe */
iframe {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    height: 300px;
}

/* ===============================
   タブレット以上向けのレイアウト調整
   =============================== */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    section {
        padding: 6rem 0;
    }

    .access-description {
        flex-direction: row;
        column-gap: 2rem;
    }
}
吹き出し
WebTraining AI
WebTraining AI へようこそ！
HTML / CSS / JavaScript / Wordpress/ PHP など、 コードやプログラミングについて何でも質問できます。