※本ページにはプロモーション(広告)が含まれています
Webページの見た目(色・余白・配置・フォント・アニメーション)を指定する言語。HTMLで組んだ構造に装飾を与えるスタイル記述の仕組み。
詳しい解説
CSSは「Cascading Style Sheets」の略で、HTMLで構造化された要素に対して『どんな見た目にするか』を指定するスタイル言語です。色・文字サイズ・余白・配置・背景・アニメーションなど、Webページの視覚的な要素はほぼすべてCSSで制御されています。
記述方法は `セレクタ { プロパティ: 値; }` という形式で、たとえば `h1 { color: red; font-size: 32px; }` と書けば、ページ内のすべての見出しh1を赤色・32pxで表示できます。CSSは外部ファイル(.css)に切り出してHTMLから読み込む方式が主流で、1つのCSSを複数ページで使い回すことで統一感を保てます。
『Cascading(カスケード)』という名前の通り、複数のスタイルが競合した場合は詳細度・記述順・継承ルールに基づいて優先順位が決まります。この仕組みを理解していないと『なぜか色が変わらない』『別の指定に上書きされる』というトラブルで悩むことになります。
現代のCSSはFlexbox・Gridによる強力なレイアウト機能、カスタムプロパティ(変数)、メディアクエリによるレスポンシブ対応、コンテナクエリ、`:has()` セレクタなど表現力が大幅に進化しました。Tailwind CSSのようなユーティリティファースト設計や、Sass/LessなどのCSSプリプロセッサも広く使われています。
同じHTMLのブログ記事でも、CSSを差し替えるだけで『白背景の爽やかなデザイン』にも『黒背景の渋いダークテーマ』にも一瞬で変身させられます。WordPressのテーマ切り替えがまさにこの仕組みで、テーマ本体はCSSとテンプレートの組み合わせに過ぎません。CSSはページの個性そのものを決める要素です。
別の呼び方
スタイルシート
カスケーディングスタイルシート
minto.tech スマホ(Android/iPhone)・PC(Mac/Windows)の便利情報をお届け! 月間アクセス160万PV!スマートフォン、タブレット、パソコン、地デジに関する素朴な疑問や、困ったこと、ノウハウ、コツなどが満載のお助け記事サイトはこちら!