コンポーネントの作成

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

見出しコンポーネント

各セクション見出しは c-title-level2 として切り出します。英語見出し用に c-title-level2-english も用意します。

<div class="c-title-level2-wrap">
    <p class="c-title-level2-english c-title-level2-english--center">Profile</p>
    <h2 class="c-title-level2 c-title-level2--center">プロフィール</h2>
</div>

英語と日本語をセットで使うパターンは、写真家・ポートフォリオ系でよく見られます。

ボタンコンポーネント

大きめのCTAは c-large-button です。中央寄せが必要なときは c-large-button--center を加算します。

.c-large-button {
    color: var(--color-font-base);
    background-color: var(--color-bg-black);
    width: 100%;
    max-width: 280px;
    height: 60px;
    font-size: 16px;
    letter-spacing: 0.2em;
    line-height: 1;
    border: 1px solid var(--color-border-white);
    display: grid;
    place-items: center;
    position: relative;
    padding: 0 16px 0 calc(16px + 0.2em);
}

@media (width >= 768px) {
    .c-large-button {
        max-width: 685px;
        height: 90px;
        font-size: 32px;
    }
}

右側には疑似要素で横線を伸ばし、余白のある印象にしています。

フォーム部品

お問い合わせ欄で使う入力部品もコンポーネント化します。

• テキスト入力：c-input-text
• テキストエリア：c-textarea

見た目（枠線・余白・背景）を先に揃えておくと、フォーム実装が楽です。