CSS

📖 もうちょい詳しく

何が新しいの？

CSSは、Webページの「見た目」を整えるための言語です。
文字の色や大きさ、背景、部品の並べ方などを指定して、ページをきれいに見せる役目を持ちます。「Cascading Style Sheets（重ねて適用していく、見た目の指定書）」の略で、HTMLとセットで使われることが多いです。

もともとHTMLの中に見た目の指定を混ぜて書いていた時代もありましたが、中身と見た目を分けたほうが管理しやすいため、CSSという別の言語に役割が分かれていきました。

どうやって動いてるの？

CSSは「どの部品を、どう見せるか」をルールとして書きます。
たとえば「見出しの文字は青く、大きく」のように、対象（見出し）と見た目（青く・大きく）をセットで指定します。ブラウザはHTMLの中身を読みながら、このルールを照らし合わせて表示に反映します。

ルールは複数を重ねて適用でき、同じ部品に違う指定が当たったときは、決められた優先順位で勝ち負けが決まります。「Cascading（カスケード＝段々に流れ落ちる）」という名前は、このルールが順に重なって効いていくようすから来ています。

何ができるの？

文字や背景の色、余白、画像の大きさ、部品を縦横どう並べるかなど、見た目に関わることをひととおり指定できます。
画面の幅に合わせてレイアウトを変えることもでき、スマホでもパソコンでも見やすくする調整も得意です。

同じHTMLでも、CSSを差し替えるだけで雰囲気をがらりと変えられます。中身はそのままに、見た目だけを着せ替えられるのがCSSの強みです。

🌱 身近なたとえ

家づくりで例えると、CSSは「壁紙や塗装、家具の配置」にあたります。
柱や壁といった骨組みを作るのがHTMLで、そこに色を塗ったり、ものをどこに置くかを決めたりして居心地よく整えるのがCSSです。
骨組みが同じ家でも、内装の色や並べ方を変えれば印象は大きく変わります。CSSはその「飾りつけ」を受け持つ存在です。

✅ まず覚えるポイント

• CSSは「Cascading Style Sheets」の略
• HTMLで作ったページの見た目を整える言語
• 「どの部品を、どう見せるか」をルールで指定する
• ルールは重ねて適用され、優先順位で勝ち負けが決まる
• 画面の幅に合わせてレイアウトを変えることもできる

🧭 よくある勘違い

CSSはプログラミング言語なの？

少し違う扱いをされることが多いです。CSSは計算や条件分岐をする言語ではなく、見た目をどうするかを指定する「スタイルシート言語」だからです。
そのため「プログラミングとは別物」と説明されることもあります。ただ、見やすいWebページを作るうえで欠かせない言語であることは変わりません。

CSSだけでWebページは作れるの？

CSS単体では作れません。色や配置を指定するには、まず対象となる中身が必要だからです。
中身と骨組みを書くのはHTMLの役目で、CSSはそのHTMLに見た目をかぶせる立場です。動きをつけたいときはJavaScriptも加わり、この3つを組み合わせて作られることがほとんどです。

🧩 関連して覚えると楽な言葉

• HTML: ページの中身と骨組みを書く言語。CSSはこれに見た目をつける
• JavaScript: ページに動きや反応をつける言語
• DOM: ブラウザがHTMLを部品の集まりとして扱う内部構造。CSSはこの部品に見た目を当てる
• レスポンシブ: 画面の幅に合わせて表示を変える考え方。CSSで実現することが多い

🏁 ひとことでまとめ

CSSは、HTMLで作ったページに見た目を着せるための言語です。
家の内装のように、同じ骨組みでも色や並べ方を変えれば印象がぐっと変わります。きれいで見やすいWebページを作るなら、HTMLとセットで覚えたい言葉です。