Webサイトに命を吹き込む「CSS」の魔法

前回の記事で、HTMLタグを使ってWebサイトの「骨組み」を作る方法を学びましたね。でも、HTMLだけのWebサイトは、まるでモノクロのスケッチのようで、ちょっと物足りないかもしれません。

そこで登場するのが、**CSS（Cascading Style Sheets）**です。CSSは、Webサイトに色をつけたり、文字の大きさを変えたり、レイアウトを整えたりして、デザインを華やかにする魔法のような言葉です。

この記事では、CSSの基本的な使い方と、Webサイトがどれだけ変わるのかを見ていきましょう。

CSSの基本：3つの「箱」を理解する

CSSの書き方は、HTMLよりも少しだけシンプルです。基本的な構造は、たった3つの要素でできています。

誰に？：スタイルを適用したいHTMLタグ（例：h1）を選びます。これを「セレクタ」と呼びます。
何を？：変えたい「プロパティ」（例：color）を選びます。
どうする？：プロパティの「値」（例：red）を決めます。

CSS

/* 例：h1タグの文字の色を赤にする */
h1 {
  color: red;
}

この「セレクタ」「プロパティ」「値」という3つの箱を理解すれば、CSSはもう半分マスターしたも同然です。

よく使うCSSプロパティ5選

CSSにはたくさんのプロパティがありますが、まずはこの5つを覚えてみましょう。これだけでも、Webサイトの見た目を大きく変えられます。

color: 文字の色を変えます。CSSp { color: #333; } /* 文字の色を濃いグレーに */
font-size: 文字の大きさを変えます。CSSp { font-size: 16px; } /* 文字の大きさを16ピクセルに */
background-color: 背景の色を変えます。CSSbody { background-color: #f0f0f0; } /* ページの背景を薄いグレーに */
width / height: 横幅や高さを指定します。CSSimg { width: 300px; } /* 画像の横幅を300ピクセルに */
border: 枠線（ボーダー）をつけます。CSSdiv { border: 1px solid black; } /* 黒い実線の枠線を1ピクセル幅でつける */

HTMLとCSSを組み合わせるには？

CSSをHTMLに適用するには、いくつかの方法がありますが、最も一般的なのは<head>タグの中に<style>タグを書いてCSSを直接書き込む方法です。

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSSの練習</title>
  <style>
    /* ここにCSSを記述します */
    h1 {
      color: blue;
      text-align: center; /* 文字を中央揃えに */
    }
    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>CSSでWebサイトを飾ろう</h1>
  <p>この文字は少し大きくなりました！</p>
</body>
</html>

まとめ：CSSでWebサイトはもっと楽しくなる！

CSSを使いこなせば、Webサイトの見た目は無限にカスタマイズできます。文字の色や大きさ、背景のデザイン、画像の配置など、あなたのセンスを活かして、Webサイトを自分だけのオリジナル作品に仕上げることができます。

まずは簡単なHTMLファイルに、今回紹介したCSSを加えて、どんな風に見た目が変わるか試してみてください。きっとプログラミングがもっと楽しくなるはずです。