概要
CSS（Cascading Style Sheets）とは、Webページの見た目を整えるための言語です。 HTMLが「何を表示するか（構造）」を決めるのに対し、CSSは「どう表示するか（色・大きさ・配置）」を決めます。
CSSの語源・由来
Cascading Style Sheets（カスケーディング・スタイル・シート）の略です。
- Style Sheets：見た目のルールをまとめたもの
- Cascading：「滝のように上から下に流れる」→ルールが上書きされていく仕組み
💡 「カスケード（滝）」は、複数のCSSルールがある時に、どれが優先されるかを決める重要な概念です。
HTMLとCSSの関係
HTMLとCSSは、それぞれ異なる役割を持っています：
- HTML：文章の構造を作る（見出し、段落、リストなど）
- CSS：見た目を整える（色、大きさ、配置など）
たとえ話で理解する
- HTML：ノートに文章を書く
- CSS：色ペンやマーカーで装飾する
👉 HTMLだけだとシンプルすぎ、CSSを加えると見やすくなる！
⚡ CSSを体験してみよう
ボタンを押してCSSの効果を確認しましょう👇
CSSを一つずつ適用してみよう
ボタンを押して、CSSの効果を確認しましょう
HTML
<div class="card"> <h2>こんにちは</h2> <p>これはカードです</p> </div>
CSS
/* スタイルなし */
プレビュー
こんにちは
これはカードです
👆 ボタンを押してCSSを適用してみましょう！
CSSの基本ルール（3要素）
CSSは「セレクタ」「プロパティ」「値」の3つで構成されます：
セレクタ {
プロパティ: 値;
}
/* 例 */
p {
color: red;
font-size: 20px;
}これはこういう意味👇
- セレクタ（p） → どこに？（pタグ全部）
- プロパティ（color） → なにを？（文字の色）
- 値（red） → どうする？（赤にする）
CSSの3つの書き方
CSSには3つの書き方があります。ファイルの数や使い方の違いを見てみましょう👇
よく使うCSSプロパティ
| プロパティ | 用途 | 例 |
|---|---|---|
color | 文字色 | color: red; |
background-color | 背景色 | background-color: yellow; |
font-size | 文字の大きさ | font-size: 20px; |
margin | 外側の余白 | margin: 20px; |
padding | 内側の余白 | padding: 10px; |
border-radius | 角を丸くする | border-radius: 10px; |
実際にやってみよう：CSSスタイルエディタ
下のエディタでCSSを編集して、テキストのスタイルをリアルタイムで変更できます！
💡 上の「プロパティ」と「書き方」の項目を参考に書いてみてね
テキストを編集
CSSスタイルを編集
プレビュー
スタイルを変更してみよう！
💡 試してみよう：
• color: red; で文字色を赤に
• font-size: 48px; で文字を大きく
• text-decoration: underline; で下線を付ける
• background-color: yellow; で背景色を黄色に
CSS3とは？
CSS3は、CSSの最新バージョンで、以下のような機能が追加されました：
- 角丸:
border-radiusで簡単に角丸ボタンが作れる - 影:
box-shadowで立体的な表現が可能 - グラデーション:
linear-gradientで美しいグラデーション - アニメーション:
@keyframesで動きのある表現 - Flexbox・Grid: 柔軟なレイアウトシステム
詳しくはMDN Web Docs - CSSやW3C CSS公式仕様で確認できます。
関連用語
| 用語 | 説明 |
|---|---|
| HTML | CSSでデザインする対象となるWebページの構造 |
| JavaScript | CSSと組み合わせて動的なデザインを実現 |
