HTMLでのヘッダーとフッターの作り方【現役エンジニアが解説】

PROGRAM

今回は、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>

上記のコードでは、ヘッダーブロックをページの一番上に、フッターブロックをページの一番下に表示しています。