コンポーネントの作成

サイト全体で使い回すパーツを、先にコンポーネントとして用意します。メディアサイトは共通パーツが多いので、ここが特に重要です。

記事カード

トップ・アーカイブ・関連記事で同じカードを使うので、最初にコンポーネント化します。サムネイルは aspect-ratio と object-fit: cover で揃えます。

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

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

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

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

カテゴリラベル

カテゴリごとに色を変えるラベルは c-label です。修飾クラスで背景色を切り替えます。

.c-label--html-css {
    background-color: var(--color-bg-gold);
}

.c-label--javascript {
    background-color: var(--color-bg-green);
}

.c-label--web-design {
    background-color: var(--color-bg-orange);
}

.c-label--web-production {
    background-color: var(--color-bg-pink);
}

.c-label--wordpress {
    background-color: var(--color-bg-blue);
}

CTA / ページネーション / ボタン

• 模写修行への誘導ブロック：c-cta
• ページ送り：c-pagination
• 通常のCTAボタン：c-button

いずれも複数ページで使い回すので、先に見た目を固めておきます。