【しーえすえす】

CSS とは?

💡 ウェブページに「見た目」を着せるスタイリスト
📌 このページのポイント
HTML + CSS = スタイル付きページ HTML(構造) <h1>見出し</h1> <p>本文</p> <button>送信</button> 装飾なし 構造のみ + CSS(装飾) color: blue; font-size: 16px; background: green; 色・サイズ・配置 見た目を定義 = 完成ページ 見出し 本文テキストが ここに表示 送信 美しいUI HTMLが骨格、CSSが見た目を担当して、Webページが完成する
CSSのイメージ
ひよこ ひよこ

CSSって何?

ペンギン先生 ペンギン先生

ウェブページの見た目を決める言語だよ。HTMLが「ここは見出し、ここは段落」と構造を決めるのに対して、CSSは「見出しの色は青、フォントサイズは24px」みたいにデザインを指定するんだ。

ひよこ ひよこ

HTMLの中に直接書いてもいいの?

ペンギン先生 ペンギン先生

書けるけど、普通は別ファイル(.cssファイル)に分けるんだ。構造とデザインを分離しておくと、デザインだけ変えたいときにCSSだけ修正すれば済むから効率がいいよ。

ひよこ ひよこ

セレクタって何?

ペンギン先生 ペンギン先生

「どの要素にスタイルを適用するか」を指定する部分だよ。h1なら全部の見出しに、.classNameなら特定のクラスが付いた要素に、#idNameなら特定のIDの要素にスタイルが当たる。セレクタの書き方を覚えるのがCSS上達の第一歩だね。

ひよこ ひよこ

Cascading(カスケーディング)ってどういう意味?

ペンギン先生 ペンギン先生

ここがCSSの名前にもなっている核心部分で、同じ要素に複数のスタイルが競合したとき「どれを優先するか」のルールなんだ。ブラウザデフォルト→外部CSS→ページ内CSS→インライン→!importantの順で上書きされていく。さらにセレクタの「詳細度」という数値計算もあって、IDセレクタはクラスセレクタより強い、みたいな優先順位がある。この仕組みを理解せずにCSSを書くと「なぜか効かない」地獄にハマるんだよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「CSS」って出てきたら「ウェブページの見た目を決める言語のことだな」と思えればだいたいOK!
📖 おまけ:英語の意味
「Cascading Style Sheets」 = 段階的に適用されるスタイルシート
💬 Cascadeは「滝のように段々と流れ落ちる」という意味。複数のスタイル指定が優先順位に従って段階的に適用されるからこの名前だよ
← 用語集にもどる