HTMLでの固定ヘッダーとフッターの作成 – HTMLで始めるホームページ作成
固定ヘッダーとフッターを使うことで、ウェブサイトのナビゲーションを向上させることができます。しかし、これを実現するには適切なHTMLマークアップが必要です。さらに、CSSの支援が必要になりますが、ここでは基本的なHTML構造について説明します。
固定ヘッダーの作成
以下は、固定ヘッダーの基本的なHTML構造です。これを使用すると、ページの最上部に固定されたヘッダーを作成することができます。
<div class="header">
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a rel="nofollow" target="_blank" title="ホームへ" aria-label="ホームへ" href="#">ホーム</a></li>
<li><a rel="nofollow" target="_blank" title="サービスへ" aria-label="サービスへ" href="#">サービス</a></li>
<li><a rel="nofollow" target="_blank" title="お問い合わせへ" aria-label="お問い合わせへ" href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
このヘッダーは各ページに含め、さらにCSSで固定することが推奨されます。固定方法については、別の記事で詳しく説明します。
固定フッターの作成
次に、固定フッターの基本的なHTML構造を紹介します。この構造を使えば、ページの最下部に固定されたフッターを作成できます。
<div class="footer">
<p>© 2023 サイト名. すべての権利を保有。</p>
<nav>
<ul>
<li><a rel="nofollow" target="_blank" title="プライバシーポリシー" aria-label="プライバシーポリシー" href="#">プライバシーポリシー</a></li>
<li><a rel="nofollow" target="_blank" title="利用規約" aria-label="利用規約" href="#">利用規約</a></li>
</ul>
</nav>
</div>
このフッターもCSSで固定することで、効果的なナビゲーションを提供します。
追加のリソース
さらに詳しい情報や例については、以下のリソースをご覧ください。
John Doe – Web Development Expert:「固定ヘッダーとフッターは、ユーザーエクスペリエンスを向上させる重要な要素です。」
まとめ
最終的に、固定ヘッダーとフッターを作成することで、ユーザーにとって親しみやすいウェブサイトを構築することができます。ぜひ、これらの手順を参考にして、ご自身のウェブサイトに取り入れてみてください。
