CSSでできること・できないことを初心者向けにわかりやすく解説

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 の範囲外。

OJapp Tips｜合わせて読みたい
なぜ OJapp のアイコンは綺麗に見えるのか？CSSが担う役割と限界を解説 の解説が役に立ちます。

CSS と JavaScript、役割を混同しないのが大事

初心者はよく「CSSだけで動くWebツールを作りたい」と言いますが、
CSSは“動作”ではなく“見た目”担当。

動きを作りたい場合は JavaScript、データを扱うならサーバー（バックエンド）が必要です。

初心者が最初に理解すべきポイント

• CSS＝見た目の編集
• JavaScript＝動作の担当
• HTML＝ページの骨組み

この3つを分けて考えると、突然 Web の世界が理解しやすくなります。

まとめ

• CSSでできる：色・レイアウト・アニメーションなどのデザイン
• CSSでできない：計算・保存・通信・処理

まずは CSS の“できる範囲”を知って、その上で必要に応じて JavaScript やサーバーの知識を足していけばOKです。
初心者でも、この順番で学べばスムーズに成長できます。