サイト内共通設定の準備

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

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

HTMLの雛形を編集

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

今回は Google Fonts で Noto Sans JP を読み込みます。技術メディアらしい読みやすさを優先した選択です。

OGPの絶対URLは、サンプルでは URL(絶対パス) と書いておきます。

CSSの雛形を編集

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

カスタムプロパティ

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

/* カラー */
:root {
    --color-bg-primary: #c5ab5f;
    --color-bg-primary-light: rgb(197, 171, 95, 0.1);
    --color-bg-black: #000000;
    --color-bg-white: #ffffff;
    --color-bg-gray: #d1d1d1;
    --color-bg-gold: #aca56c;
    --color-bg-orange: #d0a85e;
    --color-bg-blue: #6c9dac;
    --color-bg-pink: #ac6ca0;
    --color-bg-green: #6cac7b;
    --color-border-gray: #dddddd;
    --color-border-primary: #c5ab5f;
    --color-border-white: #ffffff;
    --color-font-base: #000000;
    --color-font-white: #ffffff;
    --color-font-gray: #666666;
}

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

/* フォント */
:root {
    --font-family-base: "Noto Sans JP", sans-serif;
}

メインカラーはゴールド系です。カテゴリラベル用に金・オレンジ・青・ピンク・緑も用意し、c-label の修飾クラスから参照します。

サイト共通のスタイル

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

body {
    line-height: 1.75;
    font-size: 14px;
    color: var(--color-font-base);
    font-family: var(--font-family-base);
}

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