headerとfooterの作成

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

header

今回の header はロゴのみのシンプル構成です。1ページLPなので、グローバルナビを置かず、ロゴでブランドを示す形にしています。

<header class="header">
    <h1 class="header-logo">
        <a href="">
            <img src="img/logo-header.svg" width="240" height="60" alt="interior shop migliore" />
        </a>
    </h1>
</header>

ロゴは中央寄せにして、余白で上品さを出します。トップページではロゴを h1 にします。

footer

footer にはコピーライトを配置します。

<footer class="footer">
    <div class="l-container">
        <small class="footer-copyright">&copy; 2024 MIGLIORE, inc.</small>
    </div>
</footer>