【しーえすえす】
CSS とは？
最終更新:
💡 ウェブページに「見た目」を着せるスタイリスト
ウェブページの見た目（色・大きさ・配置など）を指定するための言語。HTMLで作った骨組みに対して、デザインを着せる役割を持つ。
📌 このページのポイント
- HTMLの構造に対して色・フォント・余白・配置などの見た目を指定する
- HTMLとCSSを分離することでデザイン変更が楽になる
- セレクタで「どこに」プロパティで「どんなスタイルを」適用するか指定する
- レスポンシブデザインやアニメーションもCSSで実現できる
ひよこ CSSって何？
ペンギン先生 ウェブページの見た目を決める言語だよ。HTMLが『ここは見出し、ここは段落』と構造を表すのに対して、CSSは『見出しの色は青、文字の大きさは24px』のように指定するんだ。
ひよこ HTMLの中に書いてもいいの？
ペンギン先生 style要素や要素のstyle属性にも書けるよ。別の.cssファイルにまとめる方法なら、複数のページで同じ見た目を共有しやすい。どこに書くかは、ページやアプリの作りに合わせて選ぶんだ。
ひよこ セレクタって何？
ペンギン先生 どの要素に指定を適用するかを選ぶ部分だよ。h1はh1要素を選び、h2など別の見出しは選ばない。.classNameはそのクラスの付いた要素、#idNameはそのIDの要素を選ぶ。colorなどのプロパティで見た目を指定するんだ。
ひよこ 同じ要素に違う色を指定したら？
ペンギン先生 カスケードの規則で採用する指定を選ぶよ。指定元や!important、カスケードレイヤーなどの優先順位を比べ、その条件が同じならセレクタの詳細度などを比べる。外部CSSよりページ内CSSが必ず強い、という固定の順序ではないんだ。
ひよこ 詳細度も同じなら、後に書いた方が勝つ？
ペンギン先生 ほかの優先条件も同じなら、後の指定が採用されるよ。スコープの近さなども関係するから、『IDなら常に勝つ』『!importantなら何にでも勝つ』とも限らない。まず、競合する指定がどの条件で比べられているかを確認するといいね。
まとめ：ざっくりこれだけ覚えればOK！
「CSS」って出てきたら「ウェブページの見た目を指定する言語」と思えばだいたいOK！
📖 おまけ：英語の意味
「Cascading Style Sheets」 ＝ カスケードするスタイルシート
💬 カスケードは、競合するスタイル指定から優先するものを選ぶ仕組みだよ。外部ファイルかページ内かだけで優先順位が決まるわけではないんだ。