【CSS入門 #01】文字の色を変えてみよう！

6/24/2025

著者: yasuzaki

カテゴリ: CSS

タグ:

アイキャッチ

今回の目標

前回作成したHTMLにCSSを加えて、 「Hello World!」の文字色を自由に変えられるようになることを目指します。 CSSの基本的な書き方と、スタイルの適用方法を体験しましょう。

CSSってなに？

CSS（Cascading Style Sheets）とは、 HTMLで書かれた要素の見た目（色・サイズ・配置など）を整えるための言語です。 HTMLが「構造」を作るものなら、CSSは「デザイン」を作る役割を持ちます。

例：

  • color: red; → 文字色を赤にする
  • font-size: 24px; → 文字サイズを大きくする
  • text-align: center; → 文字を中央に寄せる

まずはHTMLにCSSを直接書いてみよう（内部スタイル）

以下のように、HTMLファイルの <head> タグ内に <style> タグを使ってCSSを書いてみます。

<!DOCTYPE html>
<html>
  <head>
    <title>Hello CSS</title>
    <style>
      h1 {
        color: red;
        font-size: 36px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

解説：このコードの意味

  • <style> … HTML内でCSSを書くための専用タグ。<head> 内に書くのが基本です。
  • h1 { ... } … 「h1タグの中身すべてに対してこのスタイルを適用するよ」という意味。
  • color: red; … 文字色を赤に設定。
  • font-size: 36px; … 文字サイズを36ピクセルに。
  • text-align: center; … テキストを中央揃えに。

いろいろな色にしてみよう！

CSSで指定できる色の例：

color: blue;    /* 青 */
color: green;   /* 緑 */
color: orange;  /* オレンジ */
color: #ff6600; /* 16進数で指定：オレンジ */
color: rgb(255, 0, 0); /* RGBで指定：赤 */

よくある間違いと注意点

  • CSSの文末には セミコロン ; を忘れずに。
  • {} の波かっこを閉じ忘れないように。
  • <style> タグは必ず <head> の中に書く。
  • 半角スペースと全角スペースの混在に注意（特にコピペ時）

補足：classを使って複数要素にスタイルをつける（次回以降で）

今は h1 というタグ名に対して直接CSSを指定していますが、 次回は「class（クラス）」という方法で、 複数の要素にスタイルをまとめて適用するテクニックを紹介する予定です。

まとめ

  • CSSはHTMLのデザイン担当。
  • <style> を使ってHTMLの中に直接書くことができる。
  • color や font-size を使えば、文字の見た目を簡単に変えられる。
  • CSSの基本構文は：
セレクタ {
  プロパティ: 値;
}

次回予告

「外部CSSファイルを使ってスタイルを分ける方法」や、 「複数要素を一括でスタイリングするclassの使い方」へと進みます！

次の記事 ＞＞