CSS基礎 総合デモ

1. セレクタと優先順位

これは要素セレクタで赤くなる。

これはクラスセレクタで青くなる

これはIDセレクタで緑になり、優先される

これはインラインスタイルでオレンジになる

2. ボックスモデルと余白

3. レイアウト: Flexbox

justify-content: center; (中央寄せ)

flex-direction: column; (列方向)

4. レイアウト: Grid

5. アニメーションと疑似要素

疑似要素の見出し

6. メディアクエリ

画面幅を600px以下にすると背景色が変わる