Web制作を学び始めると、多くの人が最初にぶつかる疑問があります。
「CSSってどこまでできるの？」 「逆に、できないことって何？」
この記事では、CSSの役割を「できること」と「できないこと」に分けて、初心者でもスッと理解できるように整理します。
CSSでできること（〇）
CSSの本質は**“見た目を整える”**ことです。動き・配置・色など、デザインに関わるほぼすべてを担当します。
1. 色・文字・背景の変更
- 文字の色を変える（color）
- 背景色をつける（background）
- フォントサイズ・太さを変える
2. 余白・配置・レイアウト調整
- margin・padding で余白を調整
- flex・grid でレイアウトを作る
- 位置揃え（center / 左寄せ / 右寄せ）
3. アニメーション・変形
- ふわっと表示する（opacity）
- 回転・拡大縮小（transform）
- 複雑なアニメーション（@keyframes）
4. 見た目の一括管理（クラスの再利用）
CSSの最大の強みは、「同じデザインを何度でも使い回せる」ことです。
CSSでできないこと（✕）
逆に CSS は**“見た目以外のことはできない”**と思っておけばOKです。
1. データを保存すること
- ユーザーの入力を保存（→できない）
- ログイン状態を保持（→できない）
保存は JavaScript やサーバーの役割です。
2. ボタンを押した時の処理
- 計算する
- ページを切り替える
- データを送信する
これらはすべて JavaScript の仕事です。
3. ロジック（条件分岐）ができない
CSSは原則「if（もし〜なら）」のような条件判断ができません。
例外として @media（画面幅）や :has() はありますが、あくまでデザインの条件です。
4. サーバーとの通信
API を叩く、データベースを読む──これも 100% CSS の範囲外。
CSS と JavaScript、役割を混同しないのが大事
初心者はよく「CSSだけで動くWebツールを作りたい」と言いますが、 CSSは“動作”ではなく“見た目”担当。
動きを作りたい場合は JavaScript、データを扱うならサーバー（バックエンド）が必要です。
初心者が最初に理解すべきポイント
- CSS＝見た目の編集
- JavaScript＝動作の担当
- HTML＝ページの骨組み
この3つを分けて考えると、突然 Web の世界が理解しやすくなります。
まとめ
- CSSでできる：色・レイアウト・アニメーションなどのデザイン
- CSSでできない：計算・保存・通信・処理
まずは CSS の“できる範囲”を知って、その上で必要に応じて JavaScript やサーバーの知識を足していけばOKです。 初心者でも、この順番で学べばスムーズに成長できます。
