こんにちは、「ぷろぐらの森」です🌱
前回は、HTMLを使って自己紹介ページを作りました。
前回の記事はこちら
今回は、ページの色や文字のデザインを変える方法を学んでいきます。
それを実現するのが「CSS（シーエスエス）」という技術です！
- 文字を大きくしたい
- 背景をカラフルにしたい
そんなときにCSSが大活躍します✨
CSSってなに？
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略。
簡単にいうと、HTMLで作ったページの見た目を整えるルールのことです。
HTML → ページの内容や構造を作る
CSS → 見た目・デザインを作る
ゲームに例えると？
HTMLとCSSの関係、実はゲーム開発にもよく似ています。
HTMLがキャラクターの「見えない骨組み（当たり判定など）」だとしたら、
CSSはキャラクターに着せる「アバターや衣装（見た目）」です。
中身（HTML）が全く同じWebページでも、CSS（衣装）を着せ替えるだけで、
ポップな「勇者の村」風にも、ダークな「魔王の城」風にもなれちゃいます。
Webページに魔法をかける感覚で楽しんでください！
CSSでできること（例）
| やりたいこと | CSSで書くと… |
|---|---|
| 文字の色を赤にする | color: red; |
| 背景色を青にする | background-color: blue; |
| 文字のサイズを大きくする | font-size: 24px; |
| 文字を真ん中にそろえる | text-align: center; |
CSSの書き方（3つの方法）
CSSには書き方が3つあります
① インラインCSS（HTMLタグの中に書く）
<p style="color: red;">こんにちは！</p>➡ すぐに色を変えたいときに便利ですが、たくさん使うとごちゃごちゃになります。
こんにちは！
② <style> タグでまとめて書く（HTMLファイルの中）
<head>
<style>
p {
color: blue;
}
</style>
</head>➡ ページ内で同じスタイルを何度も使いたいときに便利です。
③ 外部ファイルとして分ける（HTMLとCSSを別々に）
HTML
<link rel="stylesheet" href="style.css">CSS（style.css）
p {
color: green;
}➡ プロのWebサイトではこの方法が主流！HTMLとCSSをきれいに分けられます。
💡 プロの現場の裏話：なぜ「別のファイル」に分けるの？
CSSの書き方には3種類ありますが、プロの現場では圧倒的に「③ 別のファイル（style.cssなど）に書く」方法を使います。 なぜなら、実際の開発現場（例えばゲームの運営管理画面など）では、何百ものページを作るからです。
もしHTMLの中に直接色を書いていたら、「ボタンの色を全部変えたい！」となった時、徹夜で何百ページも修正するハメになります（私は新人の頃、これで痛い目を見ました…笑）。
別ファイルに分けておけば、そこを1箇所直すだけで全ページのデザインが一瞬で切り替わるんです！
実際にやってみよう！CSSで自己紹介ページを装飾
🔹 Step1：style.cssを作る
新しいファイルを作って、以下のように書いてみましょう：
body {
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
text-align: center;
}
h1 {
color: #ff4500;
font-size: 36px;
}
p {
color: #8a2be2;
font-size: 20px;
}🔹 Step2：HTMLとリンクさせる
作ったstyle.cssをHTMLファイルの<head>の中に追加します。
<head>
<meta charset="UTF-8">
<title>じこしょうかい</title>
<h1>こんにちは！</h1>
<p>これは< p >の中に書いてある文章です。</p>
<link rel="stylesheet" href="style.css">
</head>🔹 Step3：ブラウザで見てみよう！
HTMLファイルを開いてみると、前よりずっとカラフルなページになっているはずです🎉
子どもにもわかる！CSSの基本ルール
CSSの基本は「セレクタ ＋ 中かっこ（{ }）の中に命令を書く」だけ！
h1 {
color: red;
}ここで：
h1：どのタグに命令を出すか（セレクタ）{ color: red; }：どんなふうに変えるか（スタイル）
よく使うプロパティ（命令の種類）
| プロパティ名(命令) | 何ができる？ | 値の例 |
|---|---|---|
| color | 文字の色を変える | red, blue, #000000 |
| background-color | 背景の色を変える | yellow, #f0f8ff |
| font-size | 文字の大きさを変える | 16px, 24px |
| text-align | 文字の位置を変える | left, center, right |
| border | 枠線をつける | 1px solid black |
よくあるQ＆A
Q. CSSは何から覚えればいいの？
→ color, font-size, background-color の3つから始めればOK！
Q. スマホでもCSSは見られるの？
→ 見られます！ただし、パソコンで作った方が編集しやすいです。
Q. 色って英語じゃないとダメ？
→ red, blue などの英語名も使えるし、#ff0000 のような16進数でもOKです。
まとめ｜CSSで世界にひとつだけのページを作ろう！
CSSはページを「見やすく」「自分らしく」する魔法の道具。
- 好きな色や文字サイズを選べる
- オリジナルのデザインが作れる
- プログラミングがもっと楽しくなる
ぜひ、CSSで「自分だけのWebページ」を作ってみてください🌱
CSSの最大の楽しさ
私のような「サーバーエンジニア」は、
普段はデータベースなどの「目に見えない裏側の仕組み」ばかりを作っています。
だからこそ、CSSを使って「文字が赤くなった！」「背景が変わった！」と、自分の書いたコードが瞬時にデザインとして跳ね返ってくる瞬間は、現役になった今でも最高に楽しくてテンションが上がります！
プログラミングの「作る楽しさ」を一番手軽に味わえるのがCSSです。
ぜひ、色々な数値をいじって遊んでみてください🌱
コメント