こんにちは！
今回は、Webページをカッコよく・かわいくデザインするための魔法、
「CSS（シー・エス・エス）」についてお話しします！
「文字の色を変えたい」「背景に画像を入れたい」「ボタンを目立たせたい」
そんなときに使うのがCSSです。
もくじ
CSSってなに？
「CSS（Cascading Style Sheets／カスケーディング・スタイル・シート）」とは、
HTMLで作ったWebページに「見た目のデザイン」をつけるための言葉です。
HTMLはWebページの「骨組み」でしたね。
CSSはそれに「色・形・レイアウト」などのオシャレな服を着せるようなものです。
HTMLとCSSのちがいは？
| HTML | CSS |
|---|---|
| ページの内容（文字や画像）を決める | 見た目（色、サイズ、配置など）を決める |
たとえば：
<p>こんにちは！</p>
これはHTMLで「文章を書きますよ」という命令。
でもこれだけだと、ただの黒い文字です。
ここにCSSでデザインをつけると……
p {
color: red;
font-size: 30px;
}
このように、CSSを使えば「文字の色を赤にして、サイズを大きく」することができます！
CSSでできること
CSSでは、こんなことができます：
- 文字の色・大きさ・フォントを変える
- 背景の色や画像をつける
- 画像や文字の位置を調整する
- 枠線をつける
- スマホ用にレイアウトを変える（レスポンシブデザイン）
Webページをきれいに整えるには、CSSが欠かせません！
CSSの書き方（基本）
CSSは、次のような形で書きます：
セレクタ {
プロパティ: 値;
}
たとえば：
p {
color: blue;
}
これは「pタグ（段落）の文字色を青にしてね」という命令です。
CSSをHTMLに読み込む方法
CSSを書くには、HTMLの中に読み込む必要があります。
方法①：HTMLの中に直接書く（スタイルタグ）
<head>
<style>
p {
color: green;
}
</style>
</head>
方法②：外部ファイルとして読み込む（よく使う方法）
- 「style.css」という名前でCSSを書いたファイルを作ります。
- HTMLの
<head>タグの中で読み込みます：
<head>
<link rel="stylesheet" href="style.css">
</head>
実際にCSSを書いてみよう！
HTML（index.html）
<!DOCTYPE html>
<html>
<head>
<title>CSSの練習</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>はじめてのCSS</h1>
<p>これはカラフルな文字のページです！</p>
</body>
</html>
CSS（style.css）
h1 {
color: orange;
text-align: center;
}
p {
color: darkblue;
font-size: 18px;
}
この2つのファイルを作って保存し、「index.html」を開いてみてください。
見出しがオレンジ、文字が青になったページが表示されるはずです！
まとめ
CSSは、Webページにデザインを加えるための大切なツールです。
HTMLだけだとシンプルすぎますが、CSSを使えばオシャレで見やすいページにできます。
難しそうに見えるかもしれませんが、基本の書き方を覚えればすぐに使えるようになります！
オススメの教材です！
WordPressとは？初心者向けにできること・特徴をやさしく解説の記事もチェック！
