404ページの作成

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

ページ構成

404も c-page-kv を帯として使い、見出しやボタンは本文側に置きます。

<div class="c-page-kv c-page-kv--error"></div>

<div class="l-section">
    <div class="l-container-s">
        <p class="c-title-level1-english c-title-level1-english--center">404 error</p>
        <h1 class="c-title-level1 c-title-level1--center">お探しのページは見つかりませんでした</h1>
        <p class="error-text">...</p>
        <div class="error-button">
            <a href="index.html" class="c-button c-button--text-english c-button--size-medium c-button--center">top</a>
        </div>
    </div>
</div>

特別なレイアウトは不要です。共通パーツを組み合わせて、サイトのトーンを崩さないことが大切です。

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