CSSの書き方

CSSは「HTMLで作った部品（見出し・文章・ボタンなど）」の見た目を整えるためのルールです。基本はこの形だけ覚えればOKです。

セレクタ {
  プロパティ: 値;
}

セレクタ：どのHTMLに当てるか（例：h1、.btn、#header）
プロパティ：何を変えるか（例：color、font-size、margin）
値：どう変えるか（例：red、16px、20px）

1) CSSをHTMLに読み込む3つの方法

A. 外部CSS（いちばんおすすめ）

ファイルを分けて管理する方法。現場でもこれが基本。

index.html

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>CSS練習</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>こんにちは</h1>
  <p>CSSの練習です。</p>
</body>
</html>

style.css

h1 {
  color: #1a73e8;
  font-size: 40px;
}
p {
  color: #333;
}

B. head内に書く（内部CSS）

1ページだけなら便利。

<style>
  h1 { color: red; }
</style>

C. HTMLに直接書く（インライン）

応急処置向け。基本はあまり使わない。

<h1 style="color: red;">こんにちは</h1>

2) セレクタの種類（どれに当てる？）

要素（タグ）に当てる

p { color: #333; }

class に当てる（よく使う）

HTML側で class="..." を付ける。

HTML

<button class="btn">送信</button>

CSS

.btn {
  background: #111;
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
}

id に当てる（1ページに基本1回）

HTML

<div id="header">ヘッダー</div>

CSS

#header {
  font-weight: bold;
}

3) よく使う見た目のプロパティ（まずはここ）

文字

.title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.6;
  color: #222;
}

余白（超重要）

margin：外側の余白
padding：内側の余白

.card {
  margin: 20px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 12px;
}

背景

.hero {
  background: #f5f5f5;
}

4) レイアウトの基本：Flexbox（超よく使う）

横並び・中央寄せが簡単になります。

HTML

<div class="row">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
</div>

CSS

.row {
  display: flex;
  gap: 12px;              /* すき間 */
  justify-content: center;/* 横方向の位置 */
  align-items: center;    /* 縦方向の位置 */
}
.box {
  width: 80px;
  height: 80px;
  background: #eee;
  display: grid;
  place-items: center;
}

5) 状態で見た目を変える（hoverなど）

マウスを乗せたときの変化は定番。

.btn:hover {
  opacity: 0.8;
}

6) 画面サイズで変える（レスポンシブ：スマホ対応）

.container {
  width: 900px;
  margin: 0 auto;
}

/* 画面が700px以下なら */
@media (max-width: 700px) {
  .container {
    width: 92%;
  }
}

7) これだけ覚えると一気に楽になるコツ

基本は class を使って当てる（.btn とか）
余白は迷ったら margin / padding（見た目の8割が整う）
レイアウトはまず Flexbox（次に Grid）
数字の単位：px（固定） / %（割合） / rem（文字基準で拡大縮小しやすい）