こんにちは、「ぷろぐらの森」です🌱
前回は、HTMLを使って自己紹介ページを作りました。（前回の記事はこちら）
今回は、ページの色や文字のデザインを変える方法を学んでいきます。
それを実現するのが「CSS（シーエスエス）」という技術です！
- 文字を大きくしたい
- 背景をカラフルにしたい
そんなときにCSSが大活躍します✨
目次
CSSってなに？
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略。
簡単にいうと、HTMLで作ったページの見た目を整えるルールのことです。
HTML → ページの内容や構造を作る
CSS → 見た目・デザインを作る
CSSでできること（例）
| やりたいこと | CSSで書くと… |
|---|---|
| 文字の色を赤にする | color: red; |
| 背景色を青にする | background-color: blue; |
| 文字のサイズを大きくする | font-size: 24px; |
| 文字を真ん中にそろえる | text-align: center; |
CSSの書き方（3つの方法）
CSSには書き方が3つあります
① インラインCSS（HTMLタグの中に書く）
<p style="color: red;">こんにちは！</p>➡ すぐに色を変えたいときに便利ですが、たくさん使うとごちゃごちゃになります。
HTML例
こんにちは！
② <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で自己紹介ページを装飾
🔹 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ページ」を作ってみてください🌱
コメント