サイト内共通設定の準備

2章で把握したカラーやフォント、コンテナ幅などをもとに、サイト全体で使うHTMLとCSSの雛形を用意します。

HTML・CSSの雛形は、サイトが変わっても毎回ほぼ同じ内容になります。そのため、全プロジェクトで使い回せる雛形をあらかじめ用意しておくと効率的です。下記には、弊社で使っている雛形が入っています。

HTMLの雛形を編集

HTMLの雛形（特にheadタグ内）は、サイトが変わっても毎回ほぼ同じ内容になります。新規案件では、雛形をコピーしたうえで、titleやdescription、OGP、Google Fontsなどプロジェクトごとに変わる部分だけ差し替えます。

今回は Google Fonts で M PLUS Rounded 1c を読み込みます。

CSSの雛形を編集

HTMLと同じように、CSSも雛形を作っておきます。サンプルコードでは css/reset.css と css/style.css に分けています。リセットCSSは独自のものを使っていますが、一般に配布されているハード系のリセットCSSでも問題ありません。

カスタムプロパティ

今回定義する主なカスタムプロパティは次のとおりです。

/* カラー */
:root {
    --color-base-text: #28322f;
    --color-black: #131313;
    --color-white: #f1f1f1;
    --color-primary: #126445;
    --color-primary-light: #a8c7bc;
    --color-primary-dark: #075538;
    --color-accordion: #d3e9e1;
    --color-gray: #fafafa;
    --color-placeholder: #a3a3a3;
    --color-focus: #2196f3;
}

/* コンテナ幅 */
:root {
    --width-content: 760px;
}

/* フォント */
:root {
    --font-family-base: "M PLUS Rounded 1c", sans-serif;
}

カラーをカスタムプロパティにしておくと、後から一括で変更しやすくなります。アコーディオンやフォームで使う色もここで揃えておきます。

コンテナ幅は 760px で、l-container から var(--width-content) として使います。フォントも --font-family-base にまとめておくと、差し替えがしやすくなります。

サイト共通のスタイル

body には、全体に効かせて問題ないスタイルだけを書きます。

body {
    line-height: 1.7;
    font-size: 16px;
    color: var(--color-base-text);
    font-family: var(--font-family-base);
}

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

.l-container {
    width: 90%;
    margin-inline: auto;
    max-width: var(--width-content);
}