いっしー@Webエンジニア
Webツールプログラミング言語プログラミング学習ITニュースIT用語辞典ポートフォリオ

【HTML/CSS】フッターと戻るボタンの作成｜簡単なポートフォリオサイトの作成

HTMLとCSSでWebサイトのフッターを作成する方法を解説します。コピーライト部分と「ページトップへ戻る」ボタンからなる、実践的な2段構成のフッターを実装します。CSSでの基本的なレイアウト調整に加え、ボタンを円形にする方法や、マウスを乗せると色が変化するホバーエフェクトの付け方も学べます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Editor: Visual Studio Code
  • HTML: 5
  • CSS: 3
  • JavaScript: ES6以降

サンプルコード

/assets/css/style.css

/assets/css/style.css
1 
2 .btn-submit:hover {
3   background-color: #005fa3;
4+}
5+
6+/* Footer 全体構造 */
7+#footer {
8+  margin-top: 80px;
9+}
10+
11+/* 上部：Back to Top ボタン部分 */
12+.footer-top {
13+  background-color: #555;
14+  padding: 12px 20px;
15+  text-align: center;
16+}
17+
18+.back-to-top {
19+  display: inline-block;
20+  width: 24px;
21+  height: 24px;
22+  line-height: 24px;
23+  background-color: #fff;
24+  color: #555;
25+  border-radius: 50%;
26+  text-align: center;
27+  font-size: 12px;
28+  text-decoration: none;
29+  font-weight: bold;
30+  transition: background-color 0.3s ease, color 0.3s ease;
31+}
32+
33+.back-to-top:hover {
34+  background-color: #eee;
35+  color: #222;
36+}
37+
38+/* 下部：コピーライト部分 */
39+.footer-bottom {
40+  background-color: #333;
41+  padding: 20px 20px;
42+  text-align: center;
43+}
44+
45+.footer-bottom p {
46+  font-size: 14px;
47+  color: #ccc;
48+  margin: 0;
49 }
50

/index.html

/index.html
1         </div>
2     </section>
3 
4-    <footer>
5-        <p>&copy; 2025 My Portfolio</p>
6+    <footer id="footer">
7+        <div class="footer-top">
8+            <div class="container">
9+                <a href="#" class="back-to-top" aria-label="ページ上部へ戻る">▲</a>
10+            </div>
11+        </div>
12+        <div class="footer-bottom">
13+            <div class="container">
14+                <p class="copyright">&copy; 2025 YourName</p>
15+            </div>
16+        </div>
17     </footer>
18 
19 </body>
20

コード解説

変更点: フッターの構造を2段構成に変更

/index.html
1-    <footer>
2-        <p>&copy; 2025 My Portfolio</p>
3+    <footer id="footer">
4+        <div class="footer-top">
5+            <div class="container">
6+                <a href="#" class="back-to-top" aria-label="ページ上部へ戻る">▲</a>
7+            </div>
8+        </div>
9+        <div class="footer-bottom">
10+            <div class="container">
11+                <p class="copyright">&copy; 2025 YourName</p>
12+            </div>
13+        </div>
14     </footer>

これまでの単純なフッターを削除し、より実践的な2段構成のフッターに変更しました。まず、<footer>タグにid="footer"を追加し、CSSでフッター全体を特定しやすくしています。

内部は2つの<div>タグで構成されています。

  1. class="footer-top": フッターの上段部分で、「ページトップへ戻る」ボタンを配置します。
  2. class="footer-bottom": フッターの下段部分で、コピーライト表記を配置します。

このように構造を分けることで、それぞれの部分に異なる背景色やスタイルをCSSで簡単に適用できるようになります。

変更点: フッター全体の外側上部に余白を設定

/assets/css/style.css
1+/* Footer 全体構造 */
2+#footer {
3+  margin-top: 80px;
4+}

CSSでフッター全体のスタイルを指定するために、#footerというIDセレクタを追加しました。IDセレクタは、HTMLでid="footer"と指定した要素にスタイルを適用するためのものです。

margin-top: 80px;は、フッターの上側に80ピクセルの外側の余白（マージン）を設定するプロパティです。これにより、フッターとその直前にあるコンテンツとの間に適切な空間が生まれ、ページ全体のレイアウトが見やすくなります。

変更点: フッター上部の背景色と余白を設定

/assets/css/style.css
1+/* 上部：Back to Top ボタン部分 */
2+.footer-top {
3+  background-color: #555;
4+  padding: 12px 20px;
5+  text-align: center;
6+}

フッターの上段部分（class="footer-top"を持つ<div>）の見た目を整えるCSSを追加しました。

  • background-color: #555;: 背景色を濃いグレーに設定しています。
  • padding: 12px 20px;: 内側の余白（パディング）を上下に12ピクセル、左右に20ピクセル設定しています。これにより、要素の内部に空間ができて、コンテンツが窮屈に見えるのを防ぎます。
  • text-align: center;: 中に含まれるテキストやインライン要素（この場合は「ページトップへ戻る」ボタン）を中央に配置します。

変更点: 「ページトップへ戻る」ボタンを円形にデザイン

/assets/css/style.css
1+.back-to-top {
2+  display: inline-block;
3+  width: 24px;
4+  height: 24px;
5+  line-height: 24px;
6+  background-color: #fff;
7+  color: #555;
8+  border-radius: 50%;
9+  text-align: center;
10+  font-size: 12px;
11+  text-decoration: none;
12+  font-weight: bold;
13+  transition: background-color 0.3s ease, color 0.3s ease;
14+}

HTMLで追加した「ページトップへ戻る」ボタン（<a>タグ）に、.back-to-topというクラスセレクタを使って詳細なスタイルを適用しています。

  • display: inline-block;: <a>タグは通常インライン要素で幅や高さを指定できませんが、この指定により幅・高さ・余白が適用できるようになります。
  • width: 24px;とheight: 24px;: ボタンの幅と高さをそれぞれ24ピクセルに設定し、正方形にします。
  • line-height: 24px;: 行の高さをheightと同じ値にすることで、中のテキスト（▲）が垂直方向に中央揃えになります。
  • background-color: #fff;: 背景色を白に設定します。
  • color: #555;: 文字色を濃いグレーに設定します。
  • border-radius: 50%;: 要素の角を丸めるプロパティです。値を50%にすると、正方形の要素が完全な円になります。
  • text-align: center;: テキストを水平方向に中央揃えにします。
  • font-size: 12px;: 文字の大きさを12ピクセルに指定します。
  • text-decoration: none;: <a>タグにデフォルトで付いている下線を消します。
  • font-weight: bold;: 文字を太字にします。
  • transition: ...;: 後述するホバーエフェクト（マウスを乗せた時の変化）が0.3秒かけて滑らかに変化するように設定しています。

変更点: ボタンにマウスホバー時の効果を追加

/assets/css/style.css
1+.back-to-top:hover {
2+  background-color: #eee;
3+  color: #222;
4+}

:hoverは疑似クラス（ぎじクラス）と呼ばれ、要素にマウスカーソルが乗っている間のスタイルを指定します。ここでは.back-to-top要素にマウスが乗ったときのスタイルを定義しています。

  • background-color: #eee;: 背景色を少し明るいグレーに変更します。
  • color: #222;: 文字色をより濃いグレーに変更します。

これにより、ユーザーがボタンにマウスを乗せると色が変わるため、クリック可能な要素であることが直感的に伝わります。前のステップで設定したtransitionプロパティのおかげで、この色の変化が滑らかになります。

変更点: フッター下部の背景色と余白を設定

/assets/css/style.css
1+/* 下部：コピーライト部分 */
2+.footer-bottom {
3+  background-color: #333;
4+  padding: 20px 20px;
5+  text-align: center;
6+}

フッターの下段部分（class="footer-bottom"を持つ<div>）のスタイルを追加しました。

  • background-color: #333;: 背景色を、上段部分よりもさらに濃いグレーに設定しています。
  • padding: 20px 20px;: 内側の余白を上下左右に20ピクセル設定しています。
  • text-align: center;: 中に含まれるコピーライトのテキストを中央に配置します。

変更点: コピーライトのテキストスタイルを調整

/assets/css/style.css
1+.footer-bottom p {
2+  font-size: 14px;
3+  color: #ccc;
4+  margin: 0;
5 }

フッター下段部分にあるコピーライトのテキスト（<p>タグ）のスタイルを調整します。.footer-bottom pというセレクタは、「.footer-bottomクラスの要素の中にある<p>タグ」を指します。

  • font-size: 14px;: 文字の大きさを14ピクセルに指定します。
  • color: #ccc;: 文字色を明るいグレーに設定し、濃い背景色の上でも読みやすくします。
  • margin: 0;: <p>タグにはブラウザがデフォルトで上下に余白（マージン）を設定している場合があります。margin: 0;を指定することでこの不要な余白をリセットし、意図した通りのレイアウトを保ちます。

おわりに

今回は、コピーライトと「ページトップへ戻る」ボタンを持つ、実践的な2段構成のフッターを作成しました。HTMLではdivタグで構造を上下に分割することで、CSSで個別にスタイルを適用しやすくなる点が重要なポイントです。CSSではborder-radiusでボタンを円形にする方法や、:hoverとtransitionを組み合わせて滑らかな色の変化といった視覚的な効果を実装しました。フッターの作成を通して学んだレイアウトや装飾の基本は、Webサイト制作の様々な場面で応用できますので、ぜひ今回のコードを復習してみてください。

【HTML/CSS】フッターと戻るボタンの作成｜簡単なポートフォリオサイトの作成 | いっしー@Webエンジニア