コンニチハ
パンに塗り塗りジャム太郎です！
「CSSって聞いたことあるけど、何なの？それっておいしいの？」なんて思ってませんか？
今日はそんなあなたに向けて、CSS（シー・エス・エス）って結局なに？どう使うの？ をざっくり解説していきます！
1.CSSってなに？
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略。
簡単に言うと、HTMLで作った“骨組み”に、CSSで“デザイン”をつけるイメージです。
- HTML → 内容（文章・見出し・画像など）
- CSS → 見た目（色・サイズ・余白・配置など）
例えるなら、HTMLがラーメンの「麺とスープ」、CSSが「トッピングと器のデザイン」って感じ！
2.どんなことができるの？
CSSを使うと、たとえばこんなことができます：
- 文字の色やサイズを変える
- 余白をつけて見やすくする
- ボタンの色をホバーで変える
- レイアウトを整えてオシャレにする
[html]
<!-- HTML -->
<p class="message">こんにちは！</p>[CSS]
/* CSS */
.message {
color: blue;
font-size: 20px;
margin: 10px;
}→ これで「こんにちは！」が青文字・20px・10pxの余白付きに！
3.CSSの書き方は3パターン
CSSは主に3つの方法で書けます：
（１）インラインスタイル（HTMLタグの中に直接書く）
[html]
<p style="color: red;">こんにちは</p>（２）内部スタイル（HTMLの<head>内に書く）
[html]
<style>
p { color: green; }
</style>（３）外部スタイルシート（CSSファイルを作ってリンクする）
[html]
<link rel="stylesheet" href="style.css">最終的には、（３）の外部スタイルシートを使うのが一般的でオススメ！
4.「カスケーディング」って何のこと？
CSSの「Cascading（カスケーディング）」は“重なり合う”って意味。
- 近いスタイルが優先される（インライン > 内部 > 外部）
- 同じ要素に複数のスタイルがあれば、詳しい指定が勝つ
[CSS]
/* これよりも */
p {
color: black;
}
/* こっちの方が強い！ */
p.message {
color: blue;
}スタイルがバッティングしたときの優先順位があるんだよ、ってこと！
5.まとめ
- HTMLが内容なら、CSSは見た目を担当！
- 基本は外部スタイルシートで管理
- 優先順位や指定方法をうまく使いこなすのがコツ
6.次にやるべきことは？
- 自分でHTMLを用意して、CSSを少し書いてみよう
- 「background-color」や「padding」など、よく使うプロパティから試してみよう
CSSがちょっと「おいしそう」に思えてきましたか？
これからもっと楽しくなるので、ぜひ少しずつ触ってみてください！
では、また次の記事で〜