記事詳細ページの作成

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

見出し階層

記事詳細では、ページタイトルを h1、セクション見出しを h2、その下を h3 にします。

<h1 class="post-title-level1">朝からサクッと高尾山に登って日の出を見てきた！</h1>
...
<h2 class="post-title-level2">タイトル</h2>
...
<h3 class="post-title-level3">タイトル</h3>

見た目の大きさだけでなく、情報の階層としても正しくなるようにしましょう。

本文スタイル

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

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

アコーディオン

よくある質問のような開閉UIは、JavaScriptを使わずに details / summary で実装できます。

<details class="post-accordion">
    <summary class="post-accordion-summary">
        <span>Q. クレジットカードで支払えますか？</span>
        <span class="post-accordion-icon">
            <span></span>
            <span></span>
        </span>
    </summary>
    <div class="post-accordion-contents">
        <p>回答テキスト</p>
    </div>
</details>

開閉アイコンは、2本の線を組み合わせて + / - のように見せるとシンプルです。