共通スタイルを準備しよう

パーツを作り始める前に、すべてのパーツが共有する土台を準備します。ここで設定した色、文字、横幅、ボタンを、これからのLessonで繰り返し使います。

今回作るもの

まだ大きな見た目の変化はありません。ページ全体の背景色と文字を設定し、コンテンツ幅を揃える.containerを作ります。

このLessonのゴール

• Reset CSSとサイト用CSSを正しい順番で読み込める
• CSS変数で共通の色を管理できる
• 複数パーツで使うclassを準備できる

1. ファイルを読み込む

index.htmlのhead内へ追加します。

<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/main.js" defer></script>

Reset CSSは、必ずサイト用のstyle.cssより先に読み込みます。

2. 共通の色を決める

css/style.cssへ記述します。

:root {
  --coral: #ff7f50;
  --coral-dark: #d95d35;
  --ink: #292722;
  --muted: #6f6a61;
  --cream: #f8f4ec;
  --sage: #7b8d78;
}

--coralのような名前をCSS変数と呼びます。あとから色を変更するとき、1箇所の修正で済みます。