【CSS】文字色を変えてみよう！colorの使い方とセレクタ（要素・class・id）の基本

Webサイト制作を始めたばかりのとき、真っ白な背景に黒い文字だけが並んだ画面を見て「もっとオシャレにしたい！」「プロっぽくしたい！」と感じたことはありませんか？

その願いを叶えるのがCSS（シーエスエス）です。CSSは、Webサイトのデザインを担当する専用の言語。これを使いこなせるようになると、文字の色やサイズ、配置などを自由自在にコントロールできるようになります。

この記事では、CSSの基本中の基本である「文字色の変え方」を題材に、誰でも今日から実践できる「CSSの書き方のルール」と「狙った場所を指定する方法（セレクタ）」を徹底解説します。

CSSの役割と「基本の書き方」
文字の色を変える「color」プロパティの基本
「どこを？」を決める3つのセレクタ
初心者が迷わないための「セレクタ使い分け」のコツ
実際に書いてみよう！VSCodeの実践手順
まとめ

CSSの役割と「基本の書き方」

CSS（Cascading Style Sheets）の役割は、HTMLで作った文書に対して、「どんな見た目にするか」という指示を出すことです。

CSSには、世界共通の「書き方のルール」があります。まずはこの形をセットで覚えましょう。

CSSの基本構造：3つのセット
CSSは、以下の3つの要素で構成されます。

　　　セレクタ{プロパティ：値;}

セレクタ（Selector）：「どこを？」変えるか（例：見出し、段落）
プロパティ（Property）：「何を？」変えるか（例：色、サイズ）
値（Value）：「どのように？」変えるか（例：赤に、20pxに）

例えば、「見出し（h1）を赤色にする」という指示を出す場合は、以下のように書きます。

h1 {
  color: red;
}

※最後にセミコロン（ ; ）を忘れると、次の指示が効かなくなるので注意しましょう！

文字の色を変える「color」プロパティの基本

CSSで最もよく使うプロパティの一つが、文字色を指定するcolorです。色の指定方法は、主に2つのパターンを覚えれば十分です。

①色の名前で指定する（カラーネーム）
red,blue,green,orangeなど、英語の色名で直接指定する方法です。
・メリット：直感的でわかりやすいです。
・デメリット：細かいニュアンス（「少し薄い青」など）の指定が難しいのが難点です。

②カラーコードで指定する（16進数）
#ff0000（赤）や#ffffff（白）のように、シャープと6桁の英数字で指定する方法です。
・メリット：数百万色の細かな指定が可能。プロの現場ではこれが主流です。
・ヒント：VSCodeを使っていれば、コードの上にマウスを乗せるだけで色を選べる機能やインターネット上でカラーコードの一覧があるため、無理に暗記する必要はありません。

「どこを？」を決める3つのセレクタ

CSSを書く上で最も重要なのが「セレクタ」です。「ページ内の特定の場所だけ色を変えたい」という時、このセレクタを使い分ける必要があります。

もし、「そもそもどんなHTMLタグがあるのか思い出せない」「タグの使い分けが不安」という方は、先にこちらの記事で基本のHTMLタグを確認しておくと、セレクタの理解がスムーズになります。

基本のセレクタ3パターンをマスターしましょう。

①要素セレクタ（タグ名で指定）
HTMLのタグ名（h1,p,aなど）をそのまま指定する方法です。
・特徴：そのタグを使っている場所すべてにデザインが適用されます。

p {
  color: gray; /* すべての段落がグレーになる */
}

②class（クラス）セレクタ（名前をつけて指定）
HTMLのタグに「class」という名前をつけて、その名前に対してデザインを当てる方法です。実務で一番よく使います。
・書き方：HTML側にclass=”名前”と書き、CSS側では名前の前にドット（ . ）をつけます。

HTML
<p class="text-blue">この文章だけ青くしたい</p>

CSS
.text-blue {
  color: blue;
}

③id（アイディー）セレクタ（特定の1箇所を指定）
ページ内で「たった1箇所」だけに特別なデザインを当てたい時に使います。
・書き方：HTML側にid=”名前”と書き、CSS側では名前の前にシャープ（ # ）をつけます。

HTML
<h2 id="main-title">サイトのタイトル</h2>

CSS
#main-title {
   color: navy;
}

初心者が迷わないための「セレクタ使い分け」のコツ

「classとid、どっちを使えばいいの？」と悩む方は多いですが、シンプルに考えましょう。

原則「迷ったらclass」でOK！
実は、ほとんどのデザインはclassだけで完結します。
・class：同じデザインを何回でも使い回せる（例：注意書きを全部赤にする）。
・id：ページ内で一意（同じ名前を複数使わない）にするのがルールです。

まずは、「基本はclassを使い、名前をつけて管理する」という癖をつけると、コードが整理しやすくなります。

優先順位（強さ）に注意
CSSには、同じ場所に指示が重なった時の「強さ」があります。

（弱い）要素セレクタ＜ classセレクタ＜ idセレクタ（強い）

もし「CSSを書いたのに色が変わらない！」という時は、他の強いセレクタに指示が上書きされていないかチェックしてみてください。

実際に書いてみよう！VSCodeの実践手順

それでは、VSCodeを使って実際に色を変える手順を確認しましょう。

管理人

コピー&ペーストでVSCodeに実際に貼り付けてみよう！
自分の記述してもいいぞ！

１．HTMLファイル（index.html）を準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>example</title>
</head>
<body>
    <p class="my-text">初めてのCSS体験!</p>
</body>
</html>

２．CSSファイル（style.css）を作成

.my-text {
  color: #ff6347; /* トマト色 */
}

３．HTMLとCSSを「紐付ける」
これが一番忘れやすいポイントです。HTMLの<head>タグの中に、以下の1行を書き込みます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<link rel="stylesheet" href="style.css">
    <title>example</title>
</head>
<body>
    <p class="my-text">初めてのCSS体験!</p>
</body>
</html>

管理人

CSSのファイル名に注意だよ

ブラウザを更新して、文字の色が変わっていたら大成功です！