headerとfooterの作成

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

header

今回の header はロゴのみのシンプル構成です。ダーク背景に白いロゴを乗せて、ブランド名をはっきり見せます。

<header class="header">
    <h1 class="header-logo">
        <img width="220" height="24" src="img/logo-header.svg" alt="Y.T photo studio" />
    </h1>
</header>

トップページではロゴを h1 にします。1ページ構成なので、ナビを置かずスクロールで各セクションへ誘導する形です。

footer

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

<footer class="footer">
    <div class="footer-logo">
        <img width="220" height="24" src="img/logo-header.svg" alt="Y.T photo studio" loading="lazy" />
    </div>
    <small class="footer-copyright">&copy; 2024 Yamada Taro.</small>
</footer>