基本のフッターを作る方法
基本のフッターを作る方法を紹介します。このサンプルでは、HTMLとCSSを使用して、Webページの最下部に表示するシンプルなフッターを作成します。フッター内にはサイト名、ナビゲーションリンク、コピーライトを配置し、企業サイト、ブログ、ポートフォリオサイト、サービスサイトなどで使いやすい基本構成にしています。
ナビゲーションには「ホーム」「サービス」「会社概要」「お問い合わせ」のリンクを横並びで表示します。画面幅が狭い場合はリンクが折り返されるため、スマートフォン・タブレット・PCで利用できます。JavaScriptを使用しないため、HTMLとCSSだけで設置でき、複雑な処理を追加せずにWebサイトの最下部を整理できます。
HTMLではサイト名、リンク先、リンク名、コピーライトの内容を変更できます。CSSでは背景色、文字色、余白、リンク同士の間隔、最大幅などを調整できます。基本コードを土台にして、ロゴ付き、SNSリンク付き、複数カラム、サイトマップ型など、用途に合わせたフッターデザインへ展開できます。初めてフッターを作る方や、シンプルな構成からカスタマイズしたい方におすすめのサンプルです。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
ブラウザの横幅を変更すると、640px以下で案内リンクが縦並びへ切り替わることを確認できます。
コードをコピーして使おう！
<!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_title">
基本のフッター
</div>
<!-- 説明文 -->
<p class="basic-footer_text">
ページの最下部に案内リンクとコピーライトを表示します。
</p>
</main>
<!-- フッター -->
<footer class="basic-footer_footer">
<!-- フッターナビゲーション -->
<nav
class="basic-footer_nav"
aria-label="フッターナビゲーション">
<!-- プライバシーポリシー -->
<a href="#">
プライバシーポリシー
</a>
<!-- 利用規約 -->
<a href="#">
利用規約
</a>
<!-- サイトマップ -->
<a href="#">
サイトマップ
</a>
<!-- お問い合わせ -->
<a href="#">
お問い合わせ
</a>
</nav>
<!-- コピーライト -->
<p class="basic-footer_copyright">
© 2026 Sample Site
</p>
</footer>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルは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で利用できます。
コメント