CSS（Cascading Style Sheets、シーエスエス）とは、HTMLで作られたWebページの「見た目（デザインやレイアウト）」を整えるためのスタイルシート言語です。
HTMLが「ここは見出し」「ここは画像」といった骨組み（構造）を作るのに対し、CSSは「見出しの文字を赤くする」「画像を右寄せにする」「スマホ画面では縦並びにする」といった、視覚的な装飾と配置をすべて担当します。
CSSの基本構文（ルール）
CSSは、基本的に「どこの」「何を」「どうする」という3つの要素をセットにして命令を書きます。
| 要素 | 役割（意味） | 記述の具体例 |
|---|---|---|
| セレクタ （Selector） |
「どこの」デザインを変えるか | h1（見出し全体）、.btn（特定のボタン）など |
| プロパティ （Property） |
「何を」変えるか | color（文字色）、width（横幅）など |
| 値 （Value） |
「どうする」か | red（赤色）、100px（100ピクセル）など |
システム開発・Web制作における重要キーワード
Webアプリのフロントエンド開発や、WordPressサイトのカスタマイズなどにおいて、CSSに関連して頻出する用語です。
- レスポンシブデザイン (Responsive Web Design)
パソコン、タブレット、スマートフォンなど、画面のサイズ（横幅）に合わせて、自動的にレイアウトや文字サイズを最適化する仕組みです。CSSの「メディアクエリ（Media Queries）」という機能を使って、画面幅ごとに適用するデザインを書き分けます。 - CSSフレームワーク（Tailwind CSS / Bootstrapなど）
よく使うデザインやレイアウトの部品（ボタンやカード型レイアウト、余白のルールなど）が、あらかじめセットとして用意されている便利なツール群です。ゼロからCSSをすべて書く手間が省けるため、現代のシステム開発において広く採用されています。 - Flexbox（フレックスボックス）と CSS Grid（グリッド）
Webページのレイアウト（要素の並べ方）を柔軟かつ直感的に制御するための、現代のCSSにおける強力なレイアウト手法です。「要素を横並びにして中央に配置する」といった、かつては複雑だった配置調整が、わずか数行のコードで実現できます。
コメント