コンポーネントの作成

サイト全体で使い回すパーツを、先にコンポーネントとして用意します。

見出しコンポーネント

ページ見出しとセクション見出しを分けます。

• ページ見出し：c-title-level1
• セクション見出し：c-title-level2
• 英語見出し：c-title-level*-english

中央寄せは --center 修飾クラスで切り替えます。

ボタンコンポーネント

ボタンはサイズ違い・英語テキスト用の修飾クラスを用意します。

.c-button {
    color: var(--color-font-white);
    background-color: var(--color-bg-primary);
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 8px 16px 8px calc(16px + 0.1em);
    font-weight: 500;
    display: inline-block;
}

@media (width >= 768px) {
    .c-button {
        font-size: 18px;
    }
}

サイズは --size-medium / --size-large、英語表記は --text-english、中央寄せは --center で切り替えます。

商品カード

商品一覧は複数ページで使うので、カード自体をコンポーネント化します。サムネイル・商品名・説明・ボタンを分けて並べます。

<article class="c-product">
    <a href="product.html" class="c-product-thumbnail">
        <img src="img/pic-product.jpg" alt="..." width="840" height="960" loading="lazy" />
    </a>
    <div class="c-product-name">
        <h3 class="c-title-level3 c-title-level3--center">coco シャンプー01</h3>
    </div>
    <p class="c-product-text"><span>パーマやカラーで</span><span>傷んだ髪におすすめ</span></p>
    <div class="c-product-button">
        <a href="product.html" class="c-button c-button--text-english c-button--size-medium c-button--center">view more</a>
    </div>
</article>

一覧側は c-products がベースのグリッドです。列数は修飾クラスで切り替えます。

.c-products {
    display: grid;
    gap: 48px 24px;
    grid-template-columns: repeat(1, 1fr);
}

@media (width >= 500px) {
    .c-products--col2,
    .c-products--col3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (width >= 1080px) {
    .c-products--col3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

ページKV

下層ページの見出し帯は c-page-kv です。商品詳細や404で使い回します。背景違いが必要な場合は修飾クラス（--product / --error）を足します。中身の見出しはKVの外に置く構成です。