【第2回】文字色と文字サイズを変えてみよう｜CSS初心者ノート

CSS初心者ノート第2回｜文字色と文字サイズを変える方法（color・font-size） ブログの進め！
2025.10.01
記事内に広告が含まれています。
みかおば
みかおば

📘 CSS初心者のみかおばです！
今回は、CSSの第一歩ともいえる 文字の色（color） と 文字サイズ（font-size） を変える方法を紹介します😊

🎨 文字色を変えてみよう（color）

文字の色は color プロパティで指定します。

p {
  color: red;
}

🔖 色の指定方法はいろいろ

  • 色名：red, blue, green など
  • 16進数カラーコード：#ff0000（赤）, #00ff00（緑）, #0000ff（青）
  • RGB指定：rgb(255,0,0)（赤）, rgb(0,128,0)（緑）
  • RGBA（透明度付き）：rgba(0,0,255,0.5) → 半透明の青
  • HSL：hsl(0, 100%, 50%)（赤、色相・彩度・明度で表す）

👉 まずは「色名」で慣れて、慣れたらカラーコードを使うのがおすすめ！

📌 色見本イメージ

赤文字 青文字 緑文字 半透明の青

🔠 文字サイズを変えてみよう（font-size）

文字の大きさは font-size プロパティで指定します。

p {
  font-size: 20px;
}

🔖 単位の種類

  • px（ピクセル）：最もよく使う。16px が標準的な大きさ。
  • em：親要素を基準にした相対サイズ（1em = 親の文字サイズ）。
  • rem：ページ全体（ルート要素）を基準にした相対サイズ。
  • %：親要素の文字サイズに対する割合。

👉 初心者はまず px を使えばOK。慣れてきたら em や rem にも挑戦してみよう。

📌 サイズ比較イメージ

12px（小さい文字）

16px（標準サイズ）

24px（大きめの文字）

💻 実際のコード例

HTML部分

<p class="red">赤文字のテキスト</p>
<p class="big">大きい文字</p>
  • <p> … 段落（paragraph）タグ
  • class="red" … この段落に「red」というクラス名をつけている
  • class="big" … この段落に「big」というクラス名をつけている

👉 つまり、2つの段落をそれぞれ「red」「big」とラベル付けした状態です。

CSS部分

.red {
  color: #ff0000;   /* 赤（カラーコード指定） */
}
.big {
  font-size: 24px;  /* 文字サイズを大きく */
}
  • .red { ... }
    👉 class="red" とつけた要素に適用されるスタイル
    👉 color: #ff0000; → 文字色を「赤」に変更
  • .big { ... }
    👉 class="big" とつけた要素に適用されるスタイル
    👉 font-size: 24px; → 文字サイズを「24ピクセル」に変更

実際の表示結果

  • 「赤文字のテキスト」 → 赤色になる
  • 「大きい文字」 → 通常より大きな文字になる

👇 結果イメージ

赤文字のテキスト

大きい文字

💡 コピペで試す

実際に試すときは、HTMLファイルの <head> に <style> タグを書いてCSSをまとめても動きます。

その場合はこんなコードをコピペしてみてください👇

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSSテスト</title>
  <style>
    .red {
      color: #ff0000;   /* 赤 */
    }
    .big {
      font-size: 24px;  /* 大きい文字 */
    }
  </style>
</head>
<body>
  <p class="red">赤文字のテキスト</p>
  <p class="big">大きい文字</p>
</body>
</html>

👉 これをそのままコピーしてブラウザで開けば、赤文字と大きい文字が表示されます！

💡 補足：lang=”ja” について

コード例の最初に出てくる

<html lang="ja">

の lang="ja" は「このページは日本語ですよ」という意味です。
検索エンジンや読み上げソフトに正しく伝えるためのおまじないで、初心者のうちは「日本語のときは ja」と覚えておけば大丈夫です！

⚠️ よくある失敗例

初心者がやりがちな間違いを紹介します。

❌ 間違った書き方（HTMLに直接書いてしまう）

<p style="color:red; font-size:24px;">赤文字で大きい文字</p>

👉 HTMLの中にスタイルを書くと見づらくなり、後から修正も大変…。

✅ 正しい書き方（CSSにまとめる）

<p class="red big">赤文字で大きい文字</p>

.red { color:red; }
.big { font-size:24px; }

👉 CSSファイルや <style> にまとめると管理がラクになります！

✅ ポイントまとめ

  • color = 文字の色を変える
  • font-size = 文字の大きさを変える
  • 色指定は「色名 → カラーコード → RGB」へと理解を広げると良い
  • 単位はまず「px」でOK。慣れたら「em」「rem」へ

初心者でも挫折しにくいオンラインスクール！在宅ワークや副業の第一歩におすすめです✨

👉デイトラ公式サイトはこちら

📌 次回予告

【第3回】フォントを指定してみよう
→ font-familyを使って文字の種類を変えます。Webフォントにも触れていきます！

🔖 この回で出てきたプロパティ
#color #font-size #CSS初心者ノート

コメント

タイトルとURLをコピーしました