headerとfooterの作成

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

header

header にはロゴ、オンラインショップへの導線、グローバルナビを入れます。

<header class="header">
    <h1 class="header-logo">
        <a href="index.html">
            <img src="img/logo-header.svg" width="200" height="26" alt="supple" />
        </a>
    </h1>
    <a href="https://www.google.com/" class="header-onlineshop" target="_blank" rel="noopener noreferrer">online shop</a>
    <nav class="header-nav">
        <ul class="header-list">
            <li class="header-item"><a href="concept.html" class="header-link">concept</a></li>
            <li class="header-item"><a href="menu.html" class="header-link">menu</a></li>
            ...
        </ul>
    </nav>
</header>

トップページではロゴを h1、下層ページでは p にします。ナビ文言は英語なので、Montserrat を当てるとデザインに合いやすいです。

footer

footer はロゴ、店舗一覧、会社情報、コピーライトで構成します。グローバルナビの複製ではなく、店舗名の並びです。

<footer class="footer">
    <div class="l-container">
        <div class="footer-logo">...</div>
        <nav class="footer-shop-nav">
            <ul class="footer-shop-list">
                <li class="footer-shop-item">北千住店</li>
                <li class="footer-shop-item">代官山店</li>
                ...
            </ul>
        </nav>
        <div class="footer-company-info">
            <span>株式会社 SUPPLE</span>
            <span>〒123-4567 東京都渋谷区ABC</span>
        </div>
        <small class="footer-copyright">&copy; 2024 SUPPLE</small>
    </div>
</footer>