CSSを書く時に必ず使用する、基本の書式を学習します。 基本書式がわかったら、index.htmlを使ってCSSが反映されるか確認してみましょう。
CSS(スタイルシート)の基本書式
CSSは、基本的にセレクタ・プロパティ・（プロパティの）値の３つで構成されています。
セレクタ {
プロパティ: 値;
}
セレクタ・プロパティ・値とは
セレクタやプロパティと言われても、ピンとこないかもしれません。 この書式の意味は、下記のようになります。
- セレクタ：スタイルシートで見た目を変えたい場所
- プロパティ：何を設定・変更したいのか
- （プロパティの）値：どんな風に設定・変更したいのか
実際にWeb制作で使う指示を入れてみましょう。 もっと分かりやすくなりますよ。
意訳を見ていただくと分かるように、「:」や「;」にも重要な役割があります。
記号が抜けてしまうと機械が意味を読み取れず、指示したスタイルが適用されないこともあります。
書いたのに上手く表示されない、というときは確認してみましょう。
CSSをHTMLに適用する方法
CSSの指示を反映させる方法はいくつかありますが、最もベーシックなのは「CSS専用のファイルを作る」ことです。
CSS専用のファイルの拡張子は「.css」です。 style.cssというファイルを新規作成して下さい。
下図のように、index.htmlと同じ階層にできていればOKです。
htmlファイルから読み込む
style.cssを開いて、bodyの背景色を灰色にするスタイル指定を書いてみましょう。 書けたら上書き保存してください。
body {
background: gray;
}
現段階でindex.htmlをブラウザで開いても、まだ何も変わりませんね。
書いたスタイルを適用させるためには、index.htmlの方で「style.cssファイルを読み込む（その指示を実行する）」という設定をしなくてはいけません。
<link>タグを使用して設定します。
これは機械に伝えるべき、事務的な指示なので<head>タグの中に書きます。
下記のように、index.htmlに書いてみてください。
<head>
<meta charset="utf-8">
<title>エドべース株式会社</title>
<meta name="description" content="EdTechで眠っている才能を呼び覚まし、社会に貢献できる人材を創造する企業です。">
<link rel="stylesheet" href="style.css">
</head>
もう一度、ブラウザでindex.htmlを開いてみてましょう。 下図のようにCSSが反映され、背景色が灰色になればOKです。
