CSS
初級読み方：シーエスエス｜英語：CSS
Cascading Style Sheets の略で、HTMLで作った構造に色・大きさ・配置などの見た目を付ける言語だよ。
やさしい説明
CSS（シーエスエス）とは、Webページの見た目を整える言語です。正式名称は「Cascading Style Sheets」です。
HTMLが「内容と構造」を作るのに対し、CSSは「色・サイズ・配置・アニメーション」を担当します。HTMLだけだと白黒で味気ないページですが、CSSを加えるとカラフルで見やすいデザインになります。
書き方は「セレクタ { プロパティ: 値; } 」の形です。「どの要素の」「何を」「どう変えるか」を指定します。
具体例・使い方
/* 見出しを青く大きく */
h1 {
color: blue;
font-size: 2rem;
}
/* カードにデザインを適用 */
.card {
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
background: white;
}
/* ホバー時の色変化 */
.btn:hover {
background: darkblue;
cursor: pointer;
}CSSの読み込み方
<!-- 方法1: 外部CSSファイルを読み込む（推奨） -->
<head>
<link rel="stylesheet" href="style.css">
</head>
<!-- 方法2: styleタグにCSS直書き -->
<style>
h1 { color: blue; }
</style>
<!-- 方法3: インラインスタイル（原則避ける） -->
<p style="color: red;">テキスト</p>実務では外部CSSファイル（style.css）に書くのが基本です。HTMLとCSSを分けることで、デザイン変更が楽になります。
よく使うCSSプロパティ
- color / background — 文字色・背景色
- font-size / font-weight — 文字サイズ・太さ
- margin / padding — 外側・内側の余白
- width / height — 幅・高さ
- display — 表示方法（flex / grid / block / inline）
- border / border-radius — 枠線・角丸
- box-shadow — 影
- transition / animation — 動き・アニメーション
いつ使う？
Webページを作るときは必ずHTMLとセットで使います。文字の色を変える、余白を調整する、レイアウトを作る、スマホ対応（レスポンシブ）にする——見た目に関することはすべてCSSの仕事です。
間違いやすいポイント
❌ HTMLファイルにCSSを読み込み忘れる
CSSファイルを作っても、HTMLから読み込まないとスタイルが適用されません。<head> の中に <link> タグを書きましょう。
<!-- ✅ headの中にlinkタグを書く -->
<head>
<link rel="stylesheet" href="style.css">
</head>❌ CSSが効かないと思ったら詳細度を確認
スタイルを書いても効かない場合、別のセレクタが詳細度で勝っている可能性があります。開発者ツール（F12）でスタイルに打ち消し線が引かれていないか確認しましょう。
よくある疑問
Q: CSSを書き忘れるとどうなる？
A: HTMLの初期スタイルだけで表示されます。文字は黒、背景は白、リンクは青のシンプルな見た目になります。
Q: CSSの書き方は何種類ある？
A: ①外部ファイル（<link>で読み込み）②<style>タグ内に書く ③インラインスタイル（style属性）の3種類。外部ファイルが最も推奨されます。
Q: CSSが反映されないときは？
A: ①<link>タグのhrefパスが正しいか ②ブラウザのキャッシュ（Ctrl+Shift+Rでスーパーリロード）③セレクタのスペルミス、の3つを確認しましょう。
関連用語
📖 関連レッスン
レッスンを見る →