CONTENTS
  1. HOME
  2. CSS
  3. CSS-CLASS設計
  4. footerにあうCSSのclass名をつける

footerにあうCSSのclass名をつける

完成イメージ

この課題では、Webページの最下部にあたる「フッター」エリアを作成します。
住所や電話番号、著作権情報、ページトップへのリンクなど、実用的な情報を整理し、意味のあるHTMLタグと適切なクラス名でマークアップする力を身につけます。左がSP 右がPCです

作成ファイル・保存場所

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

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

<body id="top">
    <footer>
        <div>
            <a href="#top" aria-label="ページの先頭に戻る">▲</a>
        </div>

        <div>
            <p><a href="#top">Web制作教室 ABCスクール</a></p>

            <address>
                <p>〒802-0000 福岡県北九州市小倉北区サンプル町1-2-3</p>
                <p>TEL: 093-000-1234</p>
            </address>

            <p>&copy; 2025 Web制作教室 ABCスクール</p>
        </div>
    </footer>
</body>

</html>

チェックポイント

  • <footer> 要素を使用し、ページの終端を適切にマークアップしているか
  • address タグで住所・連絡先を正しく囲っているか
  • tel: リンクを使い、スマートフォンでの利便性に配慮しているか
  • ページトップへ戻るボタンがあり、レイアウト上の工夫がされているか
  • .footer-title や .footer-address など、クラス名が意味をもって整理されているか
  • モバイルファーストで記述し、PC向けには @media で拡張できているか

指示

  1. ダウンロードしたファイル（css-class05.html）を開く
  2. 以下のように、構造を意識したクラス名を追加してください
要素クラス名（例）補足説明
<footer>footerフッター全体の構造を示すセクション
<div>container / footer-container幅制限と中央揃えを行う共通レイアウト枠
<p>footer-titleサイト名・ロゴに相当するリンクを含むタイトル部分
<address>footer-address住所や電話番号など連絡先を意味的に囲むブロック
<p>footer-info住所・電話番号などの情報行
<a>（tel:リンク）スマホで直接電話をかけられるようにする
<div>backtoTopページ上部に戻るためのボタンブロック
<a>（中のリンク）「▲」などの記号でページトップに移動するボタン
<p>footer-copyright著作権表記。小さな文字で年とブランド名を記述

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>Document</title>
    <link rel="stylesheet" href="style-class05.css">
</head>

<body id="top">
    <footer class="footer">
        <div class="backtoTop">
            <a href="#top" aria-label="ページの先頭に戻る">▲</a>
        </div>

        <div class="container footer-container">
            <p class="footer-title"><a href="#top">Web制作教室 ABCスクール</a></p>

            <address class="footer-address">
                <p class="footer-info">〒802-0000 福岡県北九州市小倉北区サンプル町1-2-3</p>
                <p class="footer-info">
                    TEL: <span class="mobile-only"><a href="tel:0930001234">093-000-1234</a></span>
                    <span class="desktop-only">093-000-1234</span>
                </p>
            </address>

            <p class="footer-copyright"><small>&copy; 2025 Web制作教室 ABCスクール</small></p>

        </div>
    </footer>

</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: 20px 0;
}

/* フッター */
.footer {
    background-color: #2d0202;
    color: #fff;
    position: relative;
    text-align: center;
    padding: 20px 0;
}

.footer-title a {
    font-size: 1.5rem;
    color: #fff;
    text-decoration: none;
    word-break: break-word;
}

.footer-title a:hover {
    color: rgb(251, 143, 19);
}

.footer-address {
    margin: 1rem 0;
}

.footer-info a {
    color: #fff;
    text-decoration: none;
}

.footer-copyright {
    font-size: 0.75rem;
    margin-top: 1rem;
}

/* 「上へ戻る」ボタン（モバイル） */
.backtoTop {
    text-align: center;
    margin-top: 1rem;
}

.backtoTop a {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #fff;
    background-color: rgb(96, 47, 5);
    text-decoration: none;
    border-radius: 50vh;
    font-size: 1rem;
}

.backtoTop a:hover {
    background-color: rgb(251, 143, 19);
}

/* モバイル専用表示 */
.mobile-only {
    display: inline;
}

.desktop-only {
    display: none;
}

/* =========================
   PC向けスタイル（拡張）
   ========================= */
@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 1.8;
    }

    .footer-title a {
        font-size: 2rem;
    }

    .backtoTop a {
        width: 60px;
        height: 60px;
        line-height: 60px;
        font-size: 1.5rem;
    }

    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: inline;
    }

}