CSSの基本書式、HTMLファイルからのスタイルシート読み込み方法【CSSの書き方入門】

CSSを書く時に必ず使用する、基本の書式を学習します。
基本書式がわかったら、index.htmlを使ってCSSが反映されるか確認してみましょう。

CSS(スタイルシート)の基本書式

セレクタ・プロパティ・値とは

CSSをHTMLに適用する方法

htmlファイルから読み込む

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です。

前のレッスン次のレッスンレッスン一覧へ

無料ビデオ講座のお知らせ

Skillhub [スキルハブ]では無料の動画講座を多数公開しています。他校だと数万円するような講座が無料で受講できます。

無料講座一覧を見る

コース素材一覧

edbase-html.zip