headerとfooterの作成

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

header

header は、ロゴ＋SNSアイコンの上段と、カテゴリナビの下段に分かれています。

<header class="header">
    <div class="l-container">
        <div class="header-head-inner">
            <h1 class="header-logo">...</h1>
            <div class="c-sns">...</div>
        </div>
    </div>
    <nav class="header-nav">...</nav>
</header>

ロゴは picture でSP/PCの画像を切り替えます。トップページではロゴを h1、下層ページでは p にします。

ナビはカテゴリへのリンクです。SP時は横スクロールできるようにしておくと、項目が多くても崩れにくくなります。

footer

footer は、サイト情報（ロゴ・説明・SNS）とナビ、コピーライトで構成します。

<footer class="footer">
    <div class="l-container">
        <div class="footer-inner">
            <div class="footer-site-info">
                <div class="footer-logo">...</div>
                <p class="footer-site-description">...</p>
                <div class="footer-sns">...</div>
            </div>
            <nav class="footer-nav">
                <ul class="footer-nav-list">
                    <li class="footer-nav-item"><a href="about.html">武者への道とは</a></li>
                    <li class="footer-nav-item"><a href="company.html">会社概要</a></li>
                    <li class="footer-nav-item"><a href="privacy.html">プライバシーポリシー</a></li>
                    <li class="footer-nav-item"><a href="contact.html">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
        <small class="footer-copyright">&copy; 2024 Road to MUSHA, inc.</small>
    </div>
</footer>