HTMLでのヘッダーとフッターの作り方【現役エンジニアが解説】
今回は、HTMLでのヘッダーとフッターの作り方について、それぞれに分け、簡単に解説していきます。
ヘッダーの作り方
ヘッダーを作るには、headerタグを使います。
ヘッダーはbodyの開始タグの直後に書くことで、コンテンツの最初に表示されます。
<header style="width:100%;margin:0;padding:10px;text-align:center;">
<h1>ほげぶろぐ</h1>
</header>
上記のコードでは、ほげぶろぐという見出しの文字を含むヘッダーブロックを表示しています。
フッターの作り方
フッターを作るには、footerタグを使用します。
フッターはbodyの終了タグの直前に書くことによって、コンテンツの最後尾に表示できます。
<footer style="width:100%;margin:0;padding:10px;text-align:center;">
<p>© All rights reserved by hogeblog.</p>
</footer>
上記のコードでは、hogeblogというサイトの著作権の表記を含むフッターブロックを表示しています。
位置の固定の仕方
ヘッダーやフッターの位置はpositionプロパティをfixedにすると固定可能です。
固定するには、ヘッダーはtopプロパティを0に、フッターはbottomプロパティを0に設定します。
<header style="width:100%;margin:0;padding:10px;text-align:center;position:fixed;top:0;left:0;">
<h1>ほげぶろぐ</h1>
</header>
<footer style="width:100%;margin:0;padding:10px;text-align:center;position:fixed;bottom:0;left:0;">
<p>© All rights reserved by hogeblog.</p>
</footer>
上記のコードでは、ヘッダーブロックをページの一番上に、フッターブロックをページの一番下に表示しています。