Creating and Running .css Files

CSSのスタイルをテキストファイルに保存してWebページに適用する方法を解説します。ファイルの実体はただのテキストファイルで、拡張子を『.css』にしたものです。

.cssファイルの書き方

テキストエディタで CSS のスタイルを記述し、ファイル名を『.css』拡張子で保存します。ファイルの文字コードは『UTF-8』で保存してください。

style.css

body {
    font-family: sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

h1 {
    font-size: 24px;
    color: #0066cc;
}

p {
    line-height: 1.8;
}

このように、セレクターと波括弧（『{ }』）を使ってスタイルを記述します。1つのファイルに複数のスタイルをまとめて記述できます。

コメントの書き方

.css ファイルにはコメント（メモ）を記述できます。コメントはブラウザに無視されるため、スタイルの説明や注意書きを残すのに使います。CSS には1行コメント（『//』）はなく、複数行コメント（『/* */』）のみが使えます。

書き方	説明
/* コメント */	コメントです。1行でも複数行でも使えます。『/』から『/』までの範囲がコメントになります。

sample_comments.css

/* ========== 全体のリセット ========== */

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* ヘッダーのスタイルです。 */
h1 {
    font-size: 24px;
    color: #0066cc; /* 青色を指定します。 */
}

/*
  以下は段落のスタイルです。
  行間を広めに設定しています。
*/
p {
    line-height: 1.8;
}

セクションの区切りに『/* ===== タイトル ===== */』のような区切りコメントを入れると、大きな CSS ファイルでも見通しよく管理できます。

実行方法（HTMLから読み込む）

CSS ファイル単体をブラウザで開いても意味がありません。HTML ファイルの『<head>』内に『<link>』タグを記述して CSS ファイルを読み込み、HTML と一緒にブラウザで開きます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプル</title>
    <link rel="stylesheet" href="style.css?lang=en">
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキストです。</p>
</body>
</html>

『<link rel="stylesheet" href="ファイル名.css?lang=en">』で .css ファイルを読み込みます。index.html と style.css が同じフォルダにある場合はファイル名だけで指定できます。

あとは index.html をブラウザで開くと、CSS のスタイルが適用されたページが表示されます。スタイルの変更を確認するには、CSS ファイルを保存してからブラウザをリロード（F5 キーまたは Ctrl + R）してください。

スタイルが意図通りに当たっているか詳しく確認したい場合は、ブラウザの開発者ツール（Windows は『F12』キー、macOS は『Command + Option + I』）を開き、要素を選択すると適用されているスタイルを確認・編集できます。

Overview

.css ファイルはただのテキストファイルです。テキストエディタで CSS のスタイルを書き、拡張子を『.css』にして保存するだけで作成できます。特別なツールは必要ありません。

CSS ファイルは HTML の『<link>』タグで読み込んで使用します。1つの .css ファイルを複数の HTML ファイルから共通して読み込むことができるため、サイト全体のデザインを一元管理するのに役立ちます。

コメントは『/* */』のみで、1行コメント（『//』）は CSS では使えません。

おすすめのエディタについては『環境構築』を参照してください。

If you find any errors or copyright issues, please contact us.

Home

CSS Dictionary