CSSの基礎
CSSはWebページの「見た目」を整える言語です。色、フォント、レイアウトなど、デザインに関するすべてをCSSで制御します。
CSSとは
CSS（Cascading Style Sheets）は、HTMLで作った構造に「スタイル」を適用するための言語です。
HTMLとCSSの役割分担
HTML = 構造
「これは見出し」「これは段落」という意味を定義
CSS = 見た目
「見出しは青色で大きく」「背景は白」とデザインを定義
CSSの書き方
基本構文：
セレクタ {
プロパティ: 値;
プロパティ: 値;
}
/* 例 */
h1 {
color: #333333;
font-size: 32px;
margin-bottom: 20px;
}よく使うプロパティ
テキスト関連
color- 文字色font-size- 文字サイズfont-weight- 太さtext-align- 配置
ボックス関連
background- 背景margin- 外側の余白padding- 内側の余白border- 枠線
Tailwind CSSという選択肢
現代のWeb制作では「Tailwind CSS」というフレームワークがよく使われます。クラス名を付けるだけでスタイリングできます。
Tailwind CSSの例：
<!-- 通常のCSS -->
<h1 class="title">見出し</h1>
<style>
.title { color: blue; font-size: 24px; font-weight: bold; }
</style>
<!-- Tailwind CSS -->
<h1 class="text-blue-600 text-2xl font-bold">見出し</h1>おすすめ：このサイトもTailwind CSSで作られています。AIにTailwindでコードを書いてもらうと、効率的にデザインできます。
AIでCSSを書く
プロンプト例：
以下のデザインをTailwind CSSで実装してください。 カード型のコンポーネント： ・白背景に影付き ・角丸（8px程度） ・内側の余白は24px ・タイトルは太字で大きめ ・説明文は灰色 ・ホバー時に少し浮き上がるアニメーション HTMLとTailwindのクラスを使って書いてください。
まとめ
- ✓ CSSはWebページの見た目を制御する言語
- ✓ セレクタ { プロパティ: 値; } が基本構文
- ✓ Tailwind CSSを使うと効率的
- ✓ AIにデザイン要件を伝えれば自動生成できる