.cssファイルの作成と実行方法

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">
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキストです。</p>
</body>
</html>

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

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

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

概要

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

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

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

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

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

CSS辞典