文字色・背景色・余白・レイアウトなど、Web ページの見た目をコードで制御します。HTML が「骨格」なら CSS は「外見の装飾」を担います。
技術用語
276
CSS
シーエスエス
体験区分：少しだけ触った
推奨読者レベル：Level 2
何をしてくれるか
どこで出会うか
AI にデザイン修正を依頼すると `.css` ファイルや `style=` 属性が返ってくる場面で目にします。Figma のデザイン案を Web に反映するときも「CSS に書き出す」と言います。
Before / After
2026.04·ready
「このボタンの色、CSS のほうで変えてもらえますか？」
CSSの見方
277
この用語の見どころ
1
役割
HTML の構造を変えずに、色・余白・配置だけを制御します。
2
うれしさ
デザインの変更が CSS 1 か所で済み、AI への修正依頼も簡潔になります。
3
注意点
HTML と CSS は別ファイルになることが多く、どちらを直すか判断が必要です。
4
どこで役立つか
AI 生成画面の見た目を微調整する指示を出すときに役立ちます。
5
はじめに
「HTML が骨格、CSS が装飾」という役割分担と `.css` ファイルの存在。
6
深掘り先
HTML（F-4）、Tailwind CSS、Figma。
非エンジニアのつまずき
- HTML がどの CSS ファイルを読み込むのか分かりにくく、分け方で迷いました。
- 似たスタイルを何度も書いて、どこを直せばよいか分からなくなった経験があります。
私のコメント
- 第一印象:フォント・色・配置を設定できるんだ、という発見がありました。
- 良い点:コードベースで自由に設定できます。
- ダメな点:直感的には分かりにくく、ファイル配置設計も難しいです。
- 誰向けか:バイブコーディングをする人は全員触ることになります。
開発フローでの位置
デザイン確認
CSS 修正依頼
ファイル確認
ブラウザ確認
再依頼
関連用語
F-05·term_tool
バイブコーディング図鑑