運営者情報ページの作成

運営者情報ページは、ページ見出し・画像・テキストというシンプルな構成です。

ページ構成

<h1 class="c-title-level1">運営者情報</h1>

<div class="l-page-main-body">
    <div class="about-thumbnail">
        <img src="img/pic-post-thumbnail.png" alt="..." width="1200" height="1000" decoding="async" />
    </div>
    <p class="about-text">...</p>
</div>

見出しは共通コンポーネント c-title-level1 を使います。ページ固有のスタイルは about- プレフィックスで付けます。

スタイリングのポイント

• 画像は角丸にして、サイト全体のトーンに合わせる
• テキストは行間を広めにして読みやすくする
• 見出し下の余白は l-page-main-body で共通管理する

今回のような下層ページは、共通パーツを組み合わせるだけでほぼ完成します。だからこそ、前半で共通設定・コンポーネント・header/footer を先に作る意味があります。