コンポーネントの作成

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

見出しコンポーネント

ギャラリー、運営者情報、お問い合わせなど、ページ見出しの見た目は共通です。そのため c-title-level1 として切り出します。

<h1 class="c-title-level1">ギャラリー</h1>

.c-title-level1 {
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    line-height: 1.6;
}

@media (width >= 768px) {
    .c-title-level1 {
        font-size: 34px;
    }
}

ページごとに見出し文言だけ差し替えればよい状態になります。

ボタンコンポーネント

今回のボタンは、色違いの2種類です。

• 白ベース：c-button-white（もっと見る）
• 緑ベース：c-button-green（送信する）

共通部分をまとめたうえで、色だけを分けます。

.c-button-white,
.c-button-green {
    font-weight: bold;
    padding: 12px 40px;
    border-radius: 100vh;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
}

.c-button-white {
    border: 3px solid var(--color-primary);
    color: var(--color-primary);
    background-color: var(--color-white);
}

.c-button-green {
    border: 3px solid var(--color-primary);
    color: var(--color-white);
    background-color: var(--color-primary);
}

ホバー時は背景色と文字色を入れ替えると、反転する見た目になります。タッチデバイスでホバーが残らないよう、any-hover: hover を付けておくと安心です。