フッターと仕上げ · Martinとコード

サイトの見た目を完成：フッター、小さなディテール、最終チェック。

見てみよう：フッター

フッターはページを締める。通常は暗く落ち着いて、下に固定：

footer {
  background-color: #1f2937;   /* dark gray */
  color: white;
  text-align: center;          /* center the text */
  padding: 24px 16px;
  margin-top: 48px;            /* space away from the content */
}

footer a {
  color: #93c5fd;              /* links in a dark footer need to be light */
}

フッターに入れるもの：誰が作ったか、年、連絡先（架空でも学校のでもOK——自宅の住所や電話番号は絶対載せない）。

見てみよう：プロっぽく見える小さなディテール

ほとんど誰も知らない3つの小さなこと——でも効果は大きい：

/* 1. Smooth scrolling when clicking a link within the page */
html {
  scroll-behavior: smooth;
}

/* 2. Images zoom in slightly when hovered */
.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

/* 3. ...and make that zoom smooth, not instant */
img {
  transition: transform 0.2s ease;
}

transform: scale(1.03) で103%に拡大、transition は「0.2秒かけてスムーズに変化」。写真にマウスを乗せる——優しい浮き上がり。モダンサイトがやってること。

やってみよう 💪

例に従ってフッターをスタイル（ヘッダーの色に合わせてOK）。含めるもの：誰が作ったか + 年。
例の3つのプロ向けディテールを追加。
サイト全体の大チェック。 このリストを確認：
- 全ページから全ページへメニューが動く。
- すべての画像が表示され、alt が入ってる。
- ウィンドウをスマホ幅に——全部収まり、横にはみ出さない。
- フッターに自宅住所、電話、学校・クラスの詳細なし（安全！）。
- 各ページの <title> が意味をなす。

フッター完全版（色は調整して）

HTML（全ページで同じ）：

<footer>
  <p>Made by Jake in 2026 · built with my own two hands and HTML</p>
  <p><a href="index.html">Home</a></p>
</footer>

CSS：

footer {
  background-color: #1f2937;
  color: white;
  text-align: center;
  padding: 24px 16px;
  margin-top: 48px;
}

footer a {
  color: #93c5fd;
}

html {
  scroll-behavior: smooth;
}

img {
  transition: transform 0.2s ease;
}

.card img:hover,
.gallery img:hover {
  transform: scale(1.03);
}

⚠️

安全第一： 次のレッスンでサイトが本物のインターネットに載る。誰でも見られる。だから絶対に載せない：正確な自宅住所、電話、メール、クラス付きの学校名、自分や写ってる人が載せたくない写真。保護者と一緒に確認しよう。

✅

確認： ヘッダーとメニュー、きれいな列のコンテンツ、カード、写真、フッター——ホバーで優しく動く。本物のサイトみたい。だって本物だから！あと一歩：世界に見せる。

このレッスンのまとめ

フッター：暗い背景、明るい文字、text-align: center、margin-top。
transition + transform = プロサイトみたいなスムーズなマイクロアニメーション。
公開前は保護者の目でコンテンツを再確認——個人情報はインターネットに載せない。