headerとfooterの作成

コンポーネントの次は、全ページで共通利用する header と footer を作ります。

header

header にはロゴとグローバルナビを入れます。

今回のデザインは、背景がメインカラーで、ロゴとナビが中央寄せです。SP時はナビが横スクロールできるようにしておくと、メニューが多くても崩れにくくなります。

<header class="header">
    <h1 class="header-logo">
        <a href="index.html">
            <img src="img/logo-header.png" alt="山頂ジャーナル Summit Journal" width="480" height="117" decoding="async" />
        </a>
    </h1>
    <nav class="header-nav">...</nav>
</header>

トップページではロゴを h1、下層ページでは p にしています。ページの主題がロゴではない下層では、見出しレベルを下げるイメージです。

現在地のメニューには header-link-active を付けて、見た目を変えます。

footer

footer にも同じナビ項目を入れます。加えてコピーライトを配置します。

<footer class="footer">
    <div class="l-container">
        <div class="footer-inner">
            <ul class="footer-list">...</ul>
            <small class="footer-copyright">© 2024 山頂ジャーナル</small>
        </div>
    </div>
</footer>

PCではナビとコピーライトを横並びにし、SPでは縦並びにするとバランスが良いです。