【HTML入門】ヘッダーとフッターの構造を組もう

2022年2月4日2022年2月8日 souki202

HTMLのタグには、Webページ上のヘッダーであることを示すheaderとフッターを示すfooterタグがあります。

同時に、これらにはメニューがつきものです。そこで、良いヘッダーのHTML構造を考えていきます。

1 header
- 1.1 ロゴのタグ
- 1.2 ナビゲーションメニュー
2 footer
- 2.1 メニュー
- 2.2 コピーライト
3 まとめ

header

ヘッダーとは、Webページ上部にロゴやメニューなどが並ぶ部分のことです。

まずは、headerタグを利用してヘッダー領域を指定しましょう。

<header>
    <!-- サイトロゴ -->
    <!-- ナビゲーションメニュー -->
</header>

ロゴのタグ

サイトロゴは、h1タグで囲むか、単に表示するだけかのどちらがが多いです。

<header>
    <h1>
        <img src="..." alt="xxoo会社">
    </h1>
    <!-- ナビメニュー -->
</header>

ナビゲーションメニュー

ナビゲーションメニュー(ナビメニュー)は、ヘッダーに並ぶ各ページへのリンクです。

navタグを利用します。リンクは一覧なため、しばしばulタグと複合します。

<header>
    <h1>...</h1>

    <!-- cssで横並びにする -->
    <nav>
        <ul>
            <li>ホーム</li>
            <li>機能</li>
            <li>価格</li>
            <li>お問い合わせ</li>
        </ul>
    </nav>
</header>

これでヘッダーはおおよそ完成です。サイトによっては検索フォームがあったり、ロゴと同じ列に強調したいボタンがあったりなどします。

footer

フッターとは、Webページ下部にロゴやメニューが並ぶ部分のことです。

こちらも同様にfooterタグを利用してフッター領域を指定しましょう。

ロゴはヘッダーと同様にわかりやすく貼りますが、メインではありません。そのため、h1タグなどがつくことはなく、普通の画像+リンクで表示するのが一般的です。

<footer>
    <div class="site-logo">
        <img src="..." alt="xxoo会社">
    </div>
    <!-- メニュー -->
    <!-- copyright -->
</footer>

メニューも単なる列挙であることが多く、ヘッダーより細かい単位でリンクが貼られることがしばしばあります。

メニュー

Webサイトによってバラバラで、そもそもメニューが無い場合もあります。ただ、並べるとしたら縦方向が多いです。

というのも、ヘッダーはメインコンテンツをメインに見せるようにするため、あまり高さは増やしません。しかし、フッターは見終わったあとの場所なので、大きな幅をとっても問題ないためです。

その他、取得認証などを並べることも多いです。

<footer>
    <div class="site-logo">...</div>

    <div class="footer-menus">
        <ul>
            <li>お問い合わせ</li>
            <li>プライバシーポリシー</li>
            <li>SDGs</li>
        </ul>
        <ul>
            <li>機能</li>
            <li>...</li>
        </ul>
        <ul>
            <li>xxコース</li>
            <li>ooコース</li>
            <li>nnコース</li>
        </ul>
    </div>
</footer>

コピーライト

最後に、Webサイトの著作権を示すため、しばしばcopyrightを書きます。

著作権は何かを表明しなくても自動的に付与されるので、本来は書く必要はありません。

<footer>
    <div class="site-logo">...</div>
    <div class="footer-menu">...</div>
    <div class="copyright">
        <p>copyright © 20xx xxoo corp.</p>
    </div>
</footer>

これでfooterも完成しました!