CONTENTS
  1. HOME
  2. CSS
  3. CSS-CLASS設計
  4. CSSクラス名を付けてスタイルの土台を作ろう

CSSクラス名を付けてスタイルの土台を作ろう

完成イメージ（参考）

  • 既存のHTML構造に対して適切なクラス名を追加する
  • HTMLを修正せずに見た目を変えられるクラス指定の柔軟性を理解する
  • セクション単位やパーツ単位でのクラス設計の第一歩を学ぶ

画像は https://dummy.kobeya.com/ を使用してOKです。
クラスを適用することで、構造はそのままでも見た目が変わる体験をしてみましょう。

作成ファイル・保存場所

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

ファイル名内容
css-class01.htmlクラス名を追加するためのHTMLファイルを使用　コピーしてご利用ください。
style-class01.css自分で作成するCSSファイル
Classをつける前の、HTMLコードは下記をコピーして使用してください。
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>class01</title>
</head>

<body>

    <!-- ヘッダー -->
    <header>
        <h1>Webデザイン通信</h1>
    </header>

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

        <!-- 最新記事セクション -->
        <section>
            <h2>最新記事</h2>

            <article>
                <h3>CSSグリッドの基本</h3>
                <p>CSSグリッドは、レイアウトを柔軟に作れる強力な機能です。この記事では基本構文を紹介します。</p>
                <img src="https://dummy.kobeya.com/?width=300&height=200&text=CSS+Grid" alt="CSSグリッドの解説画像">
            </article>

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

        <!-- サイドコンテンツ -->
        <aside>
            <h2>お知らせ</h2>
            <ul>
                <li>4月：春の短期講座 開講</li>
                <li>5月：新しい教材を追加予定</li>
                <li>6月：ポートフォリオ作品展 開催</li>
            </ul>
        </aside>

    </main>

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

</body>

</html>

※ CSSファイルは VSCode やテキストエディタで新規作成し、<link rel="stylesheet" href="style-class01.css"> をHTML内の <head> に追加しましょう。

チェックポイント

  • 各エリア（ヘッダー／メイン／サイド／フッター）に分かりやすいクラスが付けられているか
  • CSSのクラス名とHTMLがしっかり対応しているか
  • クラスを使って、レイアウトや背景色の指定ができているか

指示

  1. css-class01.htmlを開く
  2. 以下の箇所にクラス名を追加してください。
    クラス名は自由に決めてOKですが、意味が分かる名前にするのがポイントです。
要素タグクラス名の例用途の説明
<header>class="header"サイト全体のヘッダー領域
<main>class="content"メインコンテンツ領域
<section>class="news-section"記事一覧をまとめたセクション
<article>class="news"各記事の個別ブロック
<aside>class="sidebar"お知らせや補足情報エリア
<footer>class="footer"フッター領域

HTMLにclassをつけた参考例

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

<head>
    <meta charset="UTF-8">
    <title>CSS Class練習 01</title>
    <link rel="stylesheet" href="style-class01.css">
</head>

<body>

    <!-- ヘッダー -->
    <header class="header">
        <h1>Webデザイン通信</h1>
    </header>

    <!-- メインコンテンツ -->
    <main class="content">

        <!-- 最新記事セクション -->
        <section class="news-section">
            <h2>最新記事</h2>

            <article class="news">
                <h3>CSSグリッドの基本</h3>
                <p>CSSグリッドは、レイアウトを柔軟に作れる強力な機能です。この記事では基本構文を紹介します。</p>
                <img src="https://dummy.kobeya.com/?width=300&height=200&text=CSS+Grid" alt="CSSグリッドの解説画像">
            </article>

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

        <!-- サイドコンテンツ -->
        <aside class="sidebar">
            <h2>お知らせ</h2>
            <ul>
                <li>4月：春の短期講座 開講</li>
                <li>5月：新しい教材を追加予定</li>
                <li>6月：ポートフォリオ作品展 開催</li>
            </ul>
        </aside>

    </main>

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

</body>

</html>
  1. クラスを使って、以下のようなスタイルを style-class01.css に書いてみましょう
    • ヘッダーに背景色と上下の余白をつける
    • セクション（記事一覧）とアサイドを並べる準備として、display: flex を使ってみる
    • 各記事（article）に枠線や背景色などの装飾を加える
    • フッターの文字を中央寄せにし、文字サイズも少し小さめに調整する

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

応用ポイント

  • 今後のために「命名規則」（例：news-section, site-header, main-area など）についても調べてみよう
  • BEM記法や命名ルールに興味がある場合は css-class03 で詳しく学びます！

CSS解答例

解答例ですので、他の記述方法でも問題ありません。自身のコードと照らし合わせみましょう
/* 全体 */
body {
    margin: 0;
    font-family: "Segoe UI", sans-serif;
    background-color: #f5f7f9;
    color: #333;
}

/* ヘッダー */
.header {
    background-color: #4aaf7c;
    padding: 1.5em;
    color: #fff;
    text-align: center;
}

.header h1 {
    margin: 0;
    font-size: 1.8rem;
}

/* メインコンテンツレイアウト */
.content {
    display: flex;
    gap: 2rem;
    padding: 2em;
}

/* 最新記事セクション */
.news-section {
    flex: 2;
}

.news-section h2 {
    margin-top: 0;
    border-left: 4px solid #4aaf7c;
    padding-left: 0.5em;
    font-size: 1.4rem;
}

/* 記事ブロック */
.news {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em;
    margin-bottom: 1.5em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.news h3 {
    margin-top: 0;
    color: #2e7d57;
}

.news img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 0.5em;
}

/* サイドバー */
.sidebar {
    flex: 1;
    background-color: #e9f7f0;
    padding: 1em;
    border-radius: 6px;
}

.sidebar h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

.sidebar ul {
    padding-left: 1.2em;
}

/* フッター */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em;
    font-size: 0.8rem;
}