HTMLArchiveSite

CSSってなに？

CSS（Cascading Style Sheets）は、HTMLで作った意味のある構造に、色・余白・文字・配置などの見た目を与える言語です。HTMLが骨格、CSSはデザイン担当。

h1 { color: #7aa2ff; }
.box { padding: 16px; border-radius: 12px; }

HTMLとCSSは役割分担。意味はHTML、見た目はCSS。

CSSの書き方（3つの方法）

1) 外部CSS（おすすめ）

<link rel="stylesheet" href="styles.css">

複数ページで再利用でき、管理しやすい。

2) 内部CSS

<style>
  body { line-height: 1.8; }
</style>

学習や小規模なページに便利。

3) インライン

<p style="color: red;">赤い文字</p>

基本は非推奨。例外的な一時変更に。

セレクタの基本

よく使うセレクタ

/* タグ */ h1 {}
/* クラス */ .title {}
/* ID */ #main {}
/* 子孫（スペース）*/ .card p {}
/* 直下（>）*/ .card > h3 {}
/* 兄弟（+、~）*/ h2 + p {}
/* 属性 */ input[type="email"] {}

擬類：状態や部分を指す

/* 擬クラス */ a:hover { text-decoration: underline; }
/* 擬要素 */ p::first-line { font-weight: bold; }

読み上げやキーボード操作も意識して :focus や :focus-visible も付与。

カスケード（重なり）と優先順位

適用順の基本

  • ① 重要度（ユーザー様式 > 作者 > ブラウザ）
  • ② 特異性（ID > クラス/属性/擬 > タグ）
  • ③ 後勝ち（後に書いた方が勝つ）
/* 特異性の例 */
#main .card h2 { color: gold; }  /* 強い */
.card h2 { color: skyblue; }     /* 弱い */

!important は最後の手段

.btn { color: white !important; }

依存すると保守が難しくなります。セレクタの見直しや設計で解決を。

ボックスモデル（余白と枠）

構成要素

┌──────── content ────────┐
│        中身（テキスト/画像）       │
└─────────┬─────────┘
            padding（内側の余白）
            border（枠線）
            margin（外側の余白）
.box {
  padding: 16px;     /* 内側 */
  border: 2px solid #8bd5ff; /* 枠 */
  margin: 12px;      /* 外側 */
}

box-sizing: border-box; を使うと幅計算が直感的。

デモ

padding と border と margin を確認
.box{ box-sizing:border-box; width:100%; }

文字・色・単位

色の指定

color: #7aa2ff;         /* 16進 */
color: rgb(122,162,255); /* rgb */
color: hsl(220 100% 74%); /* hsl */

フォントとサイズ

font-family: system-ui, sans-serif;
font-size: clamp(16px, 1.8vw, 18px);
font-weight: 700;

単位のコツ

rem（基準: ルートの文字サイズ）
em（親の文字サイズに依存）
% / vw / vh（ビューポート基準）

レイアウト（Flex / Grid）

Flex：1次元の並び

A
B
C
.flex {
  display: flex; gap: 12px;
  justify-content: space-between;
  align-items: center;
}

Grid：2次元の配置

1
2
3
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

配置で詰まったら、まずは display が何か（block/flex/grid）を確認。

手を動かして覚える：ミニ練習

  1. カードをデザイン：.card に背景グラデと角丸、影を追加してみる。
  2. ボタン：.btn を作り、:hover と :focus-visible を実装。
  3. 2カラム：幅600px以上で display: grid の2列、未満で1列に。
  4. 色テーマ：:root のカスタムプロパティ（色）を書き換えて配色を変える。

🧩コツ： 小さく試し、ブラウザの開発者ツールで値を触って体で覚える。

よく使うプロパティ早見表

カテゴリ プロパティ 用途
文字 color, font-size, font-weight, line-height タイポグラフィ
余白・枠 margin, padding, border, border-radius, box-shadow スペーシング/装飾
サイズ width, height, max-width 大きさ
配置 display, position, top/right/bottom/left, z-index レイアウト制御
並び flex, justify-content, align-items, gap Flexbox
グリッド grid-template-columns, grid-template-rows, grid-area, gap CSS Grid
その他 overflow, opacity, cursor, transition, transform ふるまい・動き

よくある落とし穴