基本のフッターを作る方法
Webページの最下部に表示する基本のフッターをHTMLとCSSで作る方法を紹介します。このサンプルでは、サイト名、案内リンク、コピーライトをまとめたシンプルなフッターを作成します。JavaScriptを使用せず、HTMLでフッターの構造を作り、CSSで背景色や文字色、余白、リンクの配置などを整える基本的な構成です。
フッターは、Webサイトの各ページからプライバシーポリシー、利用規約、サイトマップ、お問い合わせなどへ移動できる案内エリアとして利用できます。企業サイト、ブログ、サービスサイト、会員サイトなど幅広いWebサイトへ導入しやすく、ページ本文とフッターを視覚的に区別できるよう、背景には青色を使用しています。リンクへマウスを重ねると透明度が変化するため、操作できる項目であることも確認しやすくなっています。
サイト名、リンク名、リンク先、コピーライトはHTMLから変更でき、CSSではフッターの背景色、最大横幅、余白、文字サイズ、リンク間隔などを用途に合わせて調整できます。リンク部分にはFlexboxを使用しており、PCでは横並び、640px以下では縦並びへ切り替わるレスポンシブ対応です。スマートフォン・タブレット・PCで利用しやすく、フッターを初めて作る場合の基本コードとして活用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ブラウザの横幅を変更すると、画面幅に合わせてフッターの内容が縦方向へ切り替わることを確認できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>基本のフッター</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ページのメインコンテンツ -->
<main class="basic-footer_content">
<div class="basic-footer_content-title">
ページコンテンツ
</div>
<p class="basic-footer_content-text">
ページの最下部に基本的なフッターを表示します。
</p>
</main>
<!-- フッター -->
<footer class="basic-footer_footer">
<div class="basic-footer_inner">
<!-- サイト情報 -->
<div class="basic-footer_site">
<p class="basic-footer_logo">
Sample Site
</p>
<p class="basic-footer_description">
シンプルなWebサイトのサンプル
</p>
</div>
<!-- ナビゲーションとコピーライト -->
<div class="basic-footer_right">
<nav class="basic-footer_nav" aria-label="フッターナビゲーション">
<!-- hrefを実際のページURLへ変更してください -->
<a href="#">このサイトについて</a>
<a href="#">お問い合わせ</a>
<a href="#">プライバシーポリシー</a>
</nav>
<!-- コピーライト -->
<p class="basic-footer_copyright">
© 2026 Sample Site
</p>
</div>
</div>
</footer>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLでは、ページのメインコンテンツ、プライバシーポリシー・利用規約・サイトマップ・お問い合わせの案内リンク、コピーライトを配置します。CSSでは、フッターの背景色、文字色、余白、リンクの並び方、区切り線などのデザインを設定します。
sample/
├── index.html
└── style.css
各ファイルの役割
index.htmlはページ全体の内容を構成するファイルです。メインコンテンツのタイトルと説明文、フッター内の案内リンク、コピーライトの文章を変更できます。各リンクのhref="#"を実際のページURLへ変更すると、それぞれのページへ移動できるようになります。
style.cssはページとフッターのデザインを設定するファイルです。メインコンテンツの余白、フッターの背景色、リンクの文字サイズ、リンク同士の間隔、コピーライト上部の区切り線などを変更できます。
設置方法・使い方
sampleフォルダへindex.htmlとstyle.cssを配置し、2つのファイルを同じ階層へ保存します。そのあと、sample/index.htmlをブラウザで開いてください。ページ下部にフッターナビゲーションとコピーライトが表示されます。実際のWebサイトへ設置する場合は、index.html内のフッター部分を使用するページへ配置し、各リンク先を運用中のURLへ変更してください。
カスタマイズできる内容
index.htmlでは、「プライバシーポリシー」「利用規約」「サイトマップ」「お問い合わせ」のリンク名とリンク先を変更できます。不要なリンクを削除したり、必要なリンクを追加したりすることもできます。コピーライトの年やサイト名は、© 2026 Sample Siteの部分を編集してください。
style.cssでは、フッターの背景色と文字色、メインコンテンツの余白、リンクの文字サイズや太さ、リンク同士の間隔、コピーライトの文字サイズ、区切り線の色を変更できます。サイト全体の配色に合わせて調整できます。
数値調整
style.css
padding:80px 20px;
メインコンテンツの内側余白です。80pxを大きくすると上下の余白が広がり、20pxを大きくすると左右の余白が広がります。
margin:0 0 16px;
ページタイトルの下側余白です。16pxを大きくすると説明文との間隔が広がり、小さくすると狭くなります。
font-size:32px;
ページタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
padding:24px 20px;
フッターの内側余白です。24pxを大きくすると上下の余白が広がり、20pxを大きくすると左右の余白が広がります。
gap:12px 24px;
フッターリンク同士の間隔です。12pxは上下方向、24pxは左右方向の間隔です。値を大きくするとリンク同士の間隔が広がります。
font-size:15px;
フッターリンクの文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。
margin:20px 0 0;
コピーライト上部の余白です。20pxを大きくするとナビゲーションとの間隔が広がります。
padding-top:20px;
コピーライトと区切り線の間隔です。値を大きくすると区切り線から文字までの間隔が広がります。
font-size:14px;
コピーライトの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのflex-wrap:wrap;により、横幅が足りない場合はリンクが自動で折り返されます。また、画面幅640px以下ではメディアクエリによってflex-direction:column;へ切り替わり、フッターリンクが縦並びになります。スマートフォン・タブレット・PCで利用できます。
コメント