🎨 CSS完全ガイド

📘 概要

CSS（Cascading Style Sheets）は、HTMLで記述された要素の表示スタイルを指定するための言語です。文字の色やサイズ、レイアウト、アニメーションなど、Webページの見た目を制御できます。

🧩 基本

CSSは、セレクタ（対象）とプロパティ（設定項目）と値で構成されます。

h1 {
  color: blue;
  font-size: 24px;
}

🔰 基礎

• セレクタの種類（要素、クラス、ID）
• ボックスモデル
• カラー指定、フォント、余白
• Flexbox や Grid レイアウト

🎯 応用

レスポンシブデザインやアニメーションなど、動きのあるWebページを作る技術。

@media screen and (max-width: 600px) {
  body {
    background-color: lightgray;
  }
}

🚀 発展

• CSS変数（カスタムプロパティ）
• calc() や clamp() を使った柔軟なデザイン
• グリッドテンプレートの複雑な構造化

💻 開発

HTML・JavaScript・PHPとの連携も重要です。以下は、PHPでCSSファイルを切り替える例です。

選択されたテーマ: light

📈 最新情報

• ⚡ CSS Nesting（入れ子記述）
• 🧪 `:has()` 擬似クラスによる親セレクタ対応
• 🎨 Open UI・CSS Houdini の登場

CSSは今も進化し続けており、ブラウザのアップデートにより対応が広がっています。