CSSを使ってみよう

HTMLだけでは文字や画像が並ぶだけなので、CSSを使って装飾やレイアウトをします。

今回は、テキストの色を変えて、どのように変化するかを解説していきます。

CSSファイルを作成

「my-web-site」フォルダの中に「css」フォルダを作成し、その中にstyle.cssの名前でファイルを作成します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>テキスト</p>
</body>
</html>

CSSファイルを読み込むには、linkタグのrel属性にstylesheet、href属性にCSSファイルのパスを指定します。

そして、style.cssに以下の記述をします。

style.css

@charset "utf-8";

@charsetは文字コードの指定で、ここではUTF-8を指定しています。

次に、以下のコードを追加します。

style.css

@charset "utf-8";

p { color: #ff0000; }

コードを書いて保存をしたら、ブラウザを確認してください。

テキストが赤色に変わりました。

上記コードのpはセレクター、colorがプロパティ、#ff0000が値です。

プロパティと値が1セットで、最後にセミコロン（;）を書きます。

p { color: #ff0000; }

CSSはセレクターの後に、波括弧でプロパティと値を囲んで記述します。

プロパティと値の間にはコロン（:）が入り、セミコロン（;）までがプロパティと値のセットとなります。

colorはテキストの色を指定するプロパティで、#ff0000はカラーコードです。

実際の制作ではAdobe XDやFigmaなどのデザインをHTMLにしていきます。それらのデザインツールにカラーコードが表示されるので、それをコピペするのが一般的な流れです。

#ffffffのようなカラーコードは、#fffのように省略することが可能です。

カラーコードを覚える必要はありませんが、#fff（白）、#000（黒）や薄いグレー（#f7f7f7など）は後々覚えておくと良いでしょう。

次に、背景色を指定するbackground-colorを指定します。

style.css

p { color: #ff0000; background-color: #eee; }

ブラウザを確認すると、背景色がグレーになっています。

このように、中括弧の中に複数の指定をすることができます。

ただ、このままでは見づらいので、改行とインデントを入れて見やすくします。

style.css

p {
    color: #ff0000;
    background-color: #eee;
}

CSSは縦に並べて書くのが一般的です。

classを指定する

上記のように、p要素にスタイルを当ててしまうと、全てのp要素が赤い文字になってしまいます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p>テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
</body>
</html>

このようにp要素を増やしてブラウザを確認すると、全ての文字が赤くなります。

特定の要素にだけスタイルを当てたい時は、クラス名を指定します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p class="text-red">テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
</body>
</html>

このように、class属性に任意の名前をつけます。今回は、赤い文字にするのでtext-redというクラス名をつけてみました。

クラス名には、英数字とハイフン（-）、アンダースコア（_）がよく使用されます。また、クラス名は数字で始まってはいけないというルールがあるので覚えておきましょう。

クラス名をつけたら、style.cssを以下のように書き換えます。

index.html

@charset "utf-8";

.text-red {
    color: #ff0000;
}

.クラス名の形で要素を指定できます。

保存してブラウザを確認すると、text-redクラスをつけた要素だけが赤い文字になっているはずです。

また、クラス名は使い回すことができるので、複数の要素に同じクラス名をつけられます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページのタイトル</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <p class="text-red">テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
    <p class="text-red">テキスト</p>
</body>
</html>

idを指定する

body内を以下のように書き換えてください。

index.html

<!-- 省略 -->
<body>
    <p id="text-red">テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
</body>
<!-- 省略 -->

ここでは、id属性を指定しました。

idはclassと違い、1つのページで使い回すことができません。

index.html

<body>
    <p id="text-red">テキスト</p>
    <p>テキスト</p>
    <p id="text-red">テキスト</p><!-- これは不可 -->
</body>

このような書き方はできません。

idをつけた要素に色をつけてみましょう。以下のコードを追加してください。

style.css

#text-red {
    color: #ff0000;
}

idを指定する場合は、#id名の形で記述します。

idはページ内で使い回すことができず不便なため、あまり使われません。

一般的にclassでスタイルを当てることがほとんどです。

入れ子になった要素の指定

index.htmlのbody内を、以下のように記述してください。

index.html

<!-- 省略 -->
<body>
    <div class="content">
        <p class="text-red">テキスト</p>
    </div>
    <p class="text-red">テキスト</p>
</body>
<!-- 省略 -->

次に、style.cssの記述を一旦削除し（文字コードの指定は残しておく）、以下のコードを記述してください。

style.css

.content .text-red {
    color: #ff0000;
}

このように記述すると、contentクラスの要素内にある、text-redクラスのテキストだけ色が赤になりました。

2番目のtext-redクラスの要素はcontentクラスの要素内にないため、色が変わりません。

style.css

.親要素 .子要素 { }

特定の親要素の中にある要素を指定したい場合は、上記のように記述します。

要素名とクラス名を両方指定する

index.htmlを以下のように書き換えてください。

index.html

<!-- 省略 -->
<body>
    <p class="text-red">テキスト</p>
    <ul>
        <li class="text-red">リスト項目</li>
    </ul>
</body>
<!-- 省略 -->

そして、style.cssを以下のように書き換えてください。

style.css

li.text-red {
    color: #ff0000;
}

このように記述すると、text-redクラスをつけたli要素のみ色が変わります。

コメントアウト

CSSにもコメントアウトを書くことができます。

style.css

/* テキストを赤くする */
.text-red {
    color: #ff0000;
}

/*と*/で囲むとコメントアウトになります。

以下のように、複数行のコメントアウトも可能です。

style.css

/*
複数行の
コメントアウトも可能です。
*/
.text-red {
    color: #ff0000;
}

セレクタの優先度

では、classとidを指定した場合、どちらが優先されるでしょうか。

index.html

<!-- 省略 -->
<body>
    <p id="text-red" class="text-blue">テキスト</p>
    <p>テキスト</p>
    <p>テキスト</p>
</body>
<!-- 省略 -->

style.css

#text-red {
    color: #ff0000;
}
.text-blue {
    color: #000fff;
}

この場合、idで指定した値が優先されます。classよりもidの方が優先度は高いのです。

次に、HTMLを以下のように記述してください。

index.html

<!-- 省略 -->
<body>
    <div class="content">
        <p class="colored-text">テキスト</p>
    </div>
</body>
<!-- 省略 -->

そして、style.cssを以下のように書き換えます。

style.css

.content .colored-text {
    color: #ff0000; /* 赤 */
}
.colored-text {
    color: #000fff; /* 青 */
}

この場合、テキストは赤色になります。CSSでは、より詳細度が高い方が優先されます。

では、以下のコードはどうでしょうか。

style.css

.colored-text {
    color: #ff0000; /* 赤 */
}
.colored-text {
    color: #000fff; /* 青 */
}

この場合は、テキストは青色になります。詳細度が同じ場合は、後に書かれたコードが優先されます。