CSS の準備をしよう（前編）

HTML でウェブページの骨組みを作ったら、次は CSS で見た目を整えていきましょう！ここでは、CSS の書き方と、HTML と CSS を連携させる方法について説明します。

1. CSS ってどうやって書くの？

CSS は、HTML のタグにスタイル（見た目）を指定するための言語です。スタイルとは、色、サイズ、レイアウトなど、要素の見た目に関する情報のことです。

CSS の書き方には、大きく分けて以下の3つの方法があります。

HTML に直接書き込む（非推奨！）
<style> タグを使う（ちょっとだけ！）
外部ファイルに書く（基本はこれ！）

HTML に直接書き込む（非推奨！）

HTML のタグに style 属性を使って、直接 CSS を書き込むことができます。

html

<h1 style="color: blue; font-size: 24px;">見出し</h1>

この方法では、<h1> タグに style 属性を追加し、その中に color: blue; と font-size: 24px; というスタイルを指定しています。

しかし、この方法はおすすめできません。なぜなら、HTML と CSS が混在してしまい、コードが読みにくくなるからです。また、同じスタイルを複数の要素に適用したい場合、同じコードを何度も書かなければならず、効率が悪くなります。

`<style>` タグを使う（ちょっとだけ！）

HTML の <head> タグの中に <style> タグを書き、その中に CSS を記述することもできます。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSS の書き方</title>
    <style>
        h1 {
            color: blue;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>見出し</h1>
</body>
</html>

この方法では、<style> タグの中に h1 { color: blue; font-size: 24px; } という CSS のコードを記述しています。

この方法は、HTML に直接書き込むよりは良いですが、スタイルを変更したい場合に、HTML ファイルを編集しなければならないというデメリットがあります。また、複数の HTML ファイルで同じスタイルを使いたい場合、<style> タグの内容をコピー＆ペーストする必要があり、手間がかかります。

外部ファイルに書く（基本はこれ！）

CSS を書く際は、外部ファイルに記述するのが一般的です。CSS 専用のファイルを作成し、そこにスタイルを記述していく方法です。

まず、style.css という名前の新しいファイルを作成します。.css という拡張子は、このファイルが CSS ファイルであることを示します。
次に、style.css ファイルに CSS のコードを記述します。

css

h1 {
    color: blue;
    font-size: 24px;
}

この方法では、HTML ファイルとは別に CSS ファイルを作成し、そこにスタイルを記述します。HTML と CSS を分離することで、コードが読みやすくなり、メンテナンス性も向上します。また、複数の HTML ファイルから同じ CSS ファイルを読み込むことで、スタイルを共有することもできます。

2. CSS ファイルを読み込もう

外部ファイルに書いた CSS を HTML に適用するには、<link> タグを使って CSS ファイルを読み込む必要があります。

`<link>` タグで読み込み

<link> タグは、HTML の <head> タグの中に記述します。

html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>CSS の読み込み</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>見出し</h1>
</body>
</html>

rel="stylesheet"：このリンクがスタイルシートであることを示します。
href="css/style.css"：読み込む CSS ファイルのパスを指定します。

ファイル名は `style.css` がおすすめ

CSS ファイルの名前は自由につけることができますが、一般的には style.css という名前が使われます。また、CSS ファイルは css フォルダの中に格納することが多いです。

3. CSS の基本構文を理解しよう

CSS は、セレクタ、プロパティ、値の3つの要素で構成されています。

css

h1 {
    color: blue;
    font-size: 24px;
}

セレクタ：スタイルの対象となる HTML 要素を指定します。上記の例では h1 がセレクタです。
プロパティ：どのようなスタイルを指定するかを記述します。上記の例では color と font-size がプロパティです。
値：プロパティの具体的な値を指定します。上記の例では blue と 24px が値です。

コメントの書き方

CSS では、/* と */ で囲まれた部分はコメントとして扱われ、ブラウザには表示されません。

css

/* これは CSS のコメントです */
h1 {
    color: blue;  /* 文字色を青にする */
    font-size: 24px;
}

コメントは、コードの説明やメモを書くために使われます。コードを分かりやすくするために、積極的にコメントを活用しましょう。