HTMLを作ろう #2 し・た・が・き 『名無しn講座』
はじめに
前回はHTMLを使って、Webページの“骨組み”を作る方法を学びました。
今回はそこに色と形を加えていく「CSS（スタイルシート）」の魔法を学んでいきましょう！
🎭 登場人物
- 自分：Web初心者。ワクワクしながら学び中。
- ソースケ：陽気でフレンドリーなコードガイド。
- スタイル先生：ビジュアルを司るCSSのマスター。冷静かつおしゃれ。
🎨 Scene1：CSSってなに？
自分：
「この前作ったページ、なんか白くて味気ないなあ〜。」
ソースケ：
「そりゃそうさ！HTMLだけじゃ“骨組み”だからな！デザイン担当のCSSが必要なんだ！」
自分：
「CSSって、どんなことができるの？」
スタイル先生：
「色をつけたり、文字の大きさを変えたり、レイアウトを整えたり…CSSは見た目全般のコーディネーターです。」
ソースケ：
「よーし、それじゃスタイルの魔法、体験してみようぜ！」
🧪 Scene2：CSSの基本の書き方
ソースケ：
「まずはこのHTMLにスタイルを当ててみようぜ！」
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>カラフルなページ</title>
<style>
body {
background-color: #f0f8ff;
font-family: 'Arial', sans-serif;
}
h1 {
color: #333366;
text-align: center;
}
p {
color: #555;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>CSSで飾ろう！</h1>
<p>これはスタイルが加わったWebページです。</p>
</body>
</html>
スタイル先生：
「HTMLの<head>内にある<style>タグでCSSを記述しています。
body, h1, pはセレクタと呼ばれ、どのHTML要素にスタイルを適用するかを示すものです。」
自分：
「おお〜背景に色がついて、文字の色も変わってる！」
🧰 Scene3：よく使うプロパティたち
| プロパティ | 効果 |
|---|---|
color |
文字色を設定 |
background-color |
背景色を設定 |
font-size |
文字サイズの指定 |
text-align |
テキストの位置（左・中央など） |
margin / padding
|
余白や内側のスペース指定 |
border |
枠線をつける |
ソースケ：
「プロパティはまるで絵の具とハケさ！組み合わせ次第で、印象が全然変わるぜ！」
自分：
「うわぁ〜なんかおしゃれにしたくなってきた！」
✨ Scene4：CSSの書き方はいろいろある！
スタイル先生：
「CSSには主に3つの書き方があります。」
| 種類 | 特徴 |
|---|---|
| インライン | HTMLタグ内に直接書く（例：style="color:red;"） |
| 内部スタイル |
<style> タグ内にまとめて書く（今回の形式） |
| 外部スタイル |
.cssファイルに記述し、HTMLと分ける |
ソースケ：
「本格的なサイトを作るなら外部CSSが主流だぜ〜！」
自分：
「ファイルを分けることで、見やすく、再利用しやすくなるんだね！」
📚 Scene5：まとめと次回予告！
スタイル先生：
「今日はCSSの基本と、その使い方について学びましたね。HTMLにデザインの力を加えるのがCSSの役割です。」
ソースケ：
「次回はJavaScriptでページに動きを加えていくぜ！ボタンを押すと動いたり、アニメーションしたり…まるで命が吹き込まれたみたいになるぞ！」
自分：
「うわ〜ワクワクしてきた！はやく動かしてみたい！ありがとう、スタイル先生、ソースケ！」
📝 おわりに
今回は「CSSの基本的な役割」「スタイルの指定方法」「よく使うプロパティ」など、デザインの土台を紹介しました。
次回は「JavaScript編」で、ページに動きとインタラクションを加えていきます！
* この講座は「名無しn講座」シリーズとして続編も展開予定！
お気に召したらコメントいただけると励みになります！