404ページの作成

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

ページ構成

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

<div class="c-page-kv">
    <div class="l-container">
        <h1 class="c-title-level1 c-title-level1--center">404 エラー</h1>
    </div>
</div>

<div class="u-ptb">
    <div class="l-container-s">
        <p class="error-text">...</p>
        <div class="error-button">
            <a href="index.html" class="c-button c-button--size-medium">トップへ</a>
        </div>
    </div>
</div>

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

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