404ページの作成

最後に、404ページを作ります。構成はシンプルですが、下層ページの型を確認するのに良い題材です。

ページ構成

404も c-page-kv を使い、見出しと説明、トップへの導線を置きます。

<div class="c-page-kv c-page-kv--error">
    <div class="l-container-l">
        <h1 class="c-title-level1 c-title-level1--white">404 error</h1>
    </div>
</div>

<div class="u-ptb">
    <div class="l-container-s">
        <p class="error-text">...</p>
        <div class="u-mt">
            <a href="index.html" class="c-button c-button--center">top</a>
        </div>
    </div>
</div>

特別なレイアウトは不要です。共通パーツを組み合わせて、サイトのトーンを崩さないことが大切です。ページ下部の c-instagram も他ページと同様に置きます。

ここまでできたら、全7ページのサイト完成です。サンプルコードと見比べて、良いと思った書き方を取り入れてみてください。