記事詳細ページの作成

記事カードから遷移する、記事詳細ページを作ります。

記事ヘッダー

メタ情報（カテゴリ・日付）→ タイトル → アイキャッチの順です。

<article class="single-article">
    <div class="c-meta">
        <span class="c-label c-label--javascript">JavaScript</span>
        <time datetime="2024-12-15" class="c-date">2024/12/15</time>
    </div>
    <div class="single-title">
        <h1 class="c-title-level1">コーディング基礎から応用までの学習ロードマップ</h1>
    </div>
    <div class="single-thumbnail">...</div>
    <div class="single-contents">...</div>
</article>

見た目の大きさだけでなく、情報の階層としても正しくなるようにしましょう。ページタイトルは h1、本文中の見出しは h2 / h3 です。

本文スタイル

記事本文は single-contents でスタイリングします。見出し下の余白や本文の行間を整えると、読みやすさが大きく変わります。

今回はダミーテキストを入れています。実際の案件では原稿に差し替えます。

関連記事とCTA

本文下に関連記事一覧（c-posts）と c-cta を置きます。詳細ページでも回遊導線を残しておくのがメディアサイトの基本です。