headerとfooterの作成

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

header

header にはロゴとカートアイコンを入れます。

<header class="header">
    <h1 class="header-logo">
        <a href="index.html">
            <img width="85" height="21" src="img/logo-header.svg" alt="COCO" />
        </a>
    </h1>
    <a href="error.html" class="header-cart">
        <img width="68" height="68" src="img/ico-cart.svg" alt="商品カート" />
    </a>
</header>

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

footer

footer にはロゴ、ナビ、コピーライトを入れます。

<footer class="footer">
    <div class="l-container">
        <div class="footer-logo">
            <a href="index.html" class="footer-logo-link">
                <img width="85" height="21" src="img/logo-white.svg" alt="COCO" loading="lazy" />
            </a>
        </div>
        <nav class="footer-nav">
            <ul class="footer-list">
                <li class="footer-item"><a href="error.html">運営会社</a></li>
                <li class="footer-item"><a href="error.html">利用規約</a></li>
                ...
            </ul>
        </nav>
        <small class="footer-copyright">&copy; 2024 coco, inc.</small>
    </div>
</footer>