ヘッダーとフッターのHTML固定方法とデザインまとめ

2025/08/04Webデザイン

ヘッダーやフッターを固定し、ユーザービリティを高めながら、サイト構築する方法があります。

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

今回は、ヘッダー・フッターのHTML（HTML5）固定方法、ヘッダー・フッターのデザイン、ヘッダー・フッターとSEOについて中心に解説したいと思います。

この記事でわかること

HTML5のheader/footerタグの記述例と、position:fixedによる固定方法
itomakihitode.jpを例にした実際のHTML・CSSコードによるヘッダー固定の実例
ヘッダー・フッターのデザイン参考になるギャラリーサイト4つの紹介
アンカーテキスト最適化やphpインクルードによる共通化などSEO・運用面の工夫

おすすめの読者層

ヘッダーやフッターをスクロール固定で実装したいコーダーの方
ヘッダー・フッターのデザイン事例を参考にしたいWeb制作担当者の方

ヘッダー（header）とは
フッター（footer）とは
ヘッダー・フッターのHTML（HTML5）固定方法
ヘッダー・フッターのデザイン
ヘッダー・フッターとSEOについて
ヘッダー・フッターの共通化
まとめ

ヘッダー（header）とは
フッター（footer）とは
ヘッダー・フッターのHTML（HTML5）固定方法
ヘッダー・フッターのデザイン
ヘッダー・フッターとSEOについて
ヘッダー・フッターの共通化
まとめ

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

ヘッダー（header）とは

ヘッダー（＜header＞）とは、HTMLファイルのbody内に記述するタグの一つで、webページ上部のコンテンツを表示するために指定するタグ要素です。
ヘッダー（＜header＞）は、HTML5から追加されたタグ要素です。

ヘッダーの記述例

<body>
<header>
<h1>サンプルサイト</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="menu01.html">メニュー1</a></li>
<li><a href="menu02.html">メニュー2</a></li>
</ul>
</nav>
</header>
</body>

<body>

<h1>サンプルサイト</h1>

<nav>

<ul>

</ul>

</nav>

</header>

</body>

ヘッダー（＜header＞）は、HTMLファイルのbody外の＜head＞タグとは異なります。

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

フッター（footer）とは

フッター（＜footer＞）とは、HTMLファイルのbody内に記述するタグの一つで、webページの下部コンテンツを表示するために指定するタグ要素です。
フッター（＜footer＞）は、HTML5から追加されたタグ要素です。

フッターの記述例

<body>
<footer>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="menu01.html">メニュー1</a></li>
<li><a href="menu02.html">メニュー2</a></li>
</ul>
</nav>
</footer>
</body>

<body>

<nav>

<ul>

</ul>

</nav>

</footer>

</body>

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

ヘッダー・フッターのHTML（HTML5）固定方法

ヘッダーとフッターの位置をHTML（HTML5）で固定するには、「css（スタイルシート）ファイルで、position:fixed;を指定する」方法があります。

HTMLファイルのタグ要素や指定したidやclass属性に対し、以下のよう、cssでposition:fixed;を指定する。

HTMLファイルの記述例

<header id="sample">
<h1>サンプルサイト</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="menu01.html">メニュー1</a></li>
<li><a href="menu02.html">メニュー2</a></li>
</ul>
</nav>
</header>

<h1>サンプルサイト</h1>

<nav>

<ul>

</ul>

</nav>

</header>

css（スタイルシート）の記述例

header#sample {
　position:fixed;
}

header#sample {

　position:fixed;

}

上記方法を活用し、スクロールしてもヘッダーが固定されてるサイト（itomakihitode.jp）実例が以下になります。

ヘッダー固定の際に、実際のHTMLファイルへの記述は以下になります。

<div id="header02">
<div id="devo-menu">
<script type="text/javascript" src="http://devo.jp/crosstab_service/crosstab_service_new.js"></script>
</div>
<div id="header-inner">
<div class="fl-l">
<a href="/"><img src="/images/common/header_logo.jpg" /></a>
</div>
<div class="fl-r login-style">
<a href="http://itomakihitode.jp/login.php" id="login_btn"><img src="/images/common/header_login.jpg" /></a>
</div>
</div>
</div>

</div>

</div>

</div>

ヘッダー固定の際に、実際のCSS（スタイルシート）ファイルへの記述は以下になります。

#header02 {
background-image: url(../images/common/header_bg.jpg);
background-repeat: repeat-x;
background-position: 0px 50px;
width: 100%;
height: 112px;
clear: both;
position: fixed;
margin-top: 0;
z-index: 1;
}

#header02 {

background-image: url(../images/common/header_bg.jpg);

background-repeat: repeat-x;

background-position: 0px 50px;

width: 100%;

height: 112px;

clear: both;

position: fixed;

margin-top: 0;

z-index: 1;

}

上記方法は、ヘッダーのみならずフッターやその他、固定したい箇所に応用できます。

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

ヘッダー・フッターのデザイン

ヘッダーとフッターのデザインは、以下のようなサイトが参考になりそうです。

フッターデザイン.com -Webデザインの“フッター”を集めたサイト-
主に日本国内中心に、いろんなWEBサイトのフッター部分（ページ下部も含んでいます）を集めたデザインまとめサイトです。
参考にしたいヘッダーデザインのまとめ | | モノづくりブログ – 株式会社8bit
参考にしたいヘッダーデザインを厳選し、まとめたサイトです。
フッターデザインが素晴らしい国内のwebデザインのまとめ20 | ポケットラボ
国内のwebサイトに限定し、素敵なフッターを20個厳選したフッターデザインまとめサイトです。
Header Love – Website Header Inspiration
約300個のヘッダーデザインを閲覧できる海外のギャラリーサイトです。

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

ヘッダー・フッターとSEOについて

ヘッダーとフッターを最適化することで、以下のようなSEO効果が考えられます。

ヘッダーとフッターのリンクをテキストにし、SEO効果を高める
ヘッダーとフッターメニューをアンカーテキストにし、リンク効果を高めながら、サイト評価されやすくする。
また、ヘッダーとフッターにあるリンクが画像の場合、画像にalt属性を記述し、リンク効果を高め、サイト評価されやすくする。
ヘッダーとフッターのデザインを見やすくし、SEO効果を高める
文字の大きさや色、位置などデザイン調整して利便性を上げ、ヘッダー・フッターメニューのクリック率を高めながら、ページセッション、直帰率、平均セッション時間などを改善する。
ページセッション、直帰率、平均セッション時間などを改善し、サイトパフォーマンスを向上させ、サイト評価されやすくする。
※ページセッションは、ユーザーがサイト訪問した際に閲覧するページ数のこと。

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む

ヘッダー・フッターの共通化

ヘッダーとフッターを共通化し、サイト編集を効率化するには以下のような方法があります。

phpインクルードを活用する
ヘッダーとフッターの表示コードが書かれたphpファイルをそれぞれ個別に作っておき、それらを表示させたい箇所にphpインクルードで読み込ませ、共通化する方法。
専用ソフトのテンプレートやライブラリー機能を活用する
HTML編集ソフト「Dreamweaver」のテンプレートやライブラリー機能を活用し、ヘッダーとフッターを共通化する方法

＼申込簡単！今なら、欠点がわかる調査結果資料無料配布中!／SEO無料調査を申し込む