headerとfooterの作成

コンポーネントの次は、全ページで共通利用する header と footer を作ります。今回は1ページ構成ですが、実務では先に共通枠を固めておく流れが基本です。

header

header にはロゴとCTAボタンを入れます。ロゴはSVGで直接書き、視覚的な文字は u-visually-hidden で補足しています。

<header class="header">
    <div class="l-container">
        <div class="header-inner">
            <h1 class="header-logo">
                <a href="index.html">
                    <svg>...</svg>
                    <span class="u-visually-hidden">ドットドック</span>
                </a>
            </h1>
            <button class="c-button">登録/ログイン</button>
        </div>
    </div>
</header>

ロゴとボタンは横並びです。header-inner で左右に振り分けると、レイアウトが安定します。

footer

footer にはリンク一覧とコピーライトを入れます。

<footer class="footer">
    <div class="l-container">
        <div class="footer-inner">
            <ul class="footer-list">
                <li class="footer-item"><a href="">トップ</a></li>
                <li class="footer-item"><a href="">利用規約</a></li>
                <li class="footer-item"><a href="">プライバシーポリシー</a></li>
                <li class="footer-item">
                    <a href="https://www.google.com/" target="_blank" rel="noreferrer noopener">運営会社</a>
                </li>
            </ul>
            <small class="footer-copyright">&copy; 2024 dot-doc inc.</small>
        </div>
    </div>
</footer>

PCではリンクとコピーライトを横並びにし、SPでは縦並びにするとバランスが良いです。