CSSは「どの要素を・どのように見せるか」をルールで指定します。

🎨 CSSの基本構文
/* セレクタ { プロパティ: 値; } */

h1 {
  color: #333333;      /* 文字色 */
  font-size: 32px;     /* 文字サイズ */
  margin-bottom: 16px; /* 下の余白 */
}

.card {              /* class="card" の要素すべてに適用 */
  background: #f0f4ff;
  padding: 20px;
  border-radius: 8px;
}

#header {            /* id="header" の要素1つに適用 */
  background: navy;
}
📌 よく使うCSSプロパティ
プロパティ意味例
color文字色color: red;
background背景色・画像background: #eee;
font-size文字サイズfont-size: 16px;
margin外側の余白margin: 10px;
padding内側の余白padding: 20px;
border枠線border: 1px solid #ccc;
display表示方法display: flex;
✅ CSSをHTMLに適用する3つの方法
  • 外部ファイル（推奨）: <link rel="stylesheet" href="style.css"> をheadに書く
  • 内部スタイル: <style> タグ内に書く
  • インライン: <p style="color:red;"> のようにタグ内に直接書く