CSSとは何か（スマホ対応含む）

この記事のゴール

• CSSを「見た目を当てるルール」として説明できる
• スマホ対応（レスポンシブ）の基本（メディアクエリ）がわかる
• 「スマホで崩れる」をCSSで直す発想が持てる

1. まず結論（30秒）

CSSはHTMLに対して「こう見せる」を指定する言語です。
スマホ対応は画面幅に応じてCSSルールを切り替えるのが基本です。

2. CSSの基本（これだけ）

• セレクタ: どこに当てるか（例：.btn）
• プロパティ: 何を変えるか（例：color）
• 値: どう変えるか（例：red）

3. スマホ対応の考え方（最短）

先に“スマホ”を作る（モバイルファースト）

• スマホで縦に積む
• 画面が広くなったら横並びにする

メディアクエリ例

• /* まずスマホ基準 */
• .cards { display: grid; gap: 16px; }
• /* 画面が広いときだけ横並びを増やす */
• @media (min-width: 768px) {
• .cards { grid-template-columns: repeat(3, 1fr); }
• }

4. 実際にどう役立つ？

• 「スマホで崩れてる」→ まずCSSの幅/余白/画像/フォントを疑う
• 「ボタンが押しにくい」→ タップ領域（高さ/余白）をCSSで調整
• 「表示が遅い」→ 画像最適化が主、でもCSSの整理も対象

5. よくある誤解

• 誤解: とりあえず !important
  正しくは: まず「どのCSSが勝っているか」を確認（優先順位）

6. ミニ課題（30分）

• HTMLでカード3枚を用意
• PCは横並び（Grid or Flex）
• スマホは縦並び（メディアクエリで切り替え）

ブログに載せるもの（アウトプット）

• • PC表示スクショ

• • スマホ表示スクショ（iPhone 14 pro max）

7. 理解チェック

1. CSSは何をする？
2. メディアクエリは何のため？
3. スマホ対応の基本方針は？（一言）

まとめ

• 今日の結論: CSSで見た目、メディアクエリでスマホ対応
• 次にやること: JSで「動き」へ