③【デザイン編】CSSで魔法をかけよう！文字に色をつけたりサイズを変える方法

2026.02.11

前回の記事で、HTMLという「骨組み」を作りましたね。でも、今のままだと白黒で少し寂しい……。

そこで今回は、CSS（シーエスエス）を使って、Webページにお化粧をしていきましょう！

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

CSSの書き方には、実は「型」があります。

例えば、「文章（pタグ）の色を赤にする」という指示はこう書きます。

p { color: red;}

これを分解すると、たった3つの要素でできています。

  • 誰を？（セレクタ）：p （文章に）
  • 何を？（プロパティ）：color （色を）
  • どうする？（値）：red （赤に変える）

「誰を、何を、どうするか」。これさえ覚えれば、CSSの半分はマスターしたも同然です！

2. さっそく体験！HTMLにCSSを組み込んでみよう

前回作った index.html をメモ帳で開き、<head> の中に少しだけ書き加えてみてください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>私の最初のページ</title>
    <style>
      h1 {
        color: dodgerblue;    /* 文字の色を青に */
        font-size: 24px;      /* 文字の大きさを調整 */
      }
      p {
        color: #ff6600;       /* 文字の色をオレンジに */
        font-weight: bold;    /* 文字を太くする */
      }
    </style>
    </head>
  <body>
    <h1>プログラミングの世界へようこそ！</h1>
    <p>これは、私が初めて作ったWebページです。</p>
  </body>
</html>

保存してブラウザを更新（F5キーなど）してみてください。文字がカラフルに、そして太くなったはずです！

3. よく使う「お化粧」リスト

これだけ知っておけば、Webサイトの見栄えがグッと良くなるプロパティを紹介します。

やりたいことCSSの書き方例
文字の色を変えるcolorred, blue, #333333
文字のサイズを変えるfont-size16px, 20px, 1.5rem
背景に色をつけるbackground-coloryellow, lightblue
文字を真ん中に寄せるtext-aligncenter

【豆知識】色の指定はいろいろ！

red や blue といった名前だけでなく、#ff0000 のような「カラーコード」を使えば、何万色もの中から好きな色を選べますよ。

4. まとめ：HTMLとCSSのコンビネーション

  • HTMLで「何を」表示するか決める。
  • CSSで「どう見せるか」決める。

この2つを組み合わせることで、世界に一つだけのオリジナルサイトが作れるようになります。最初は「色が変わった！」という小さな感動を積み重ねていくのが上達のコツです。

次のステップは？

次は、「画像を表示させる方法」や、「ボタンを作ってクリックできるようにする方法」など、よりWebサイトらしい機能を付けてみませんか？

「こんなデザインにしたいんだけど、どうすればいい？」といったリクエストもお待ちしてます！

コメント

PAGE TOP