初級

レイアウトの基礎から、最近よく使われるCSSの実用機能まで、動かしながら学びます。

超入門

HTMLとCSSの関係

CSSの書き方には3種類あります。切り替えて、どこにCSSを書いているか見比べてみましょう。同じ見た目でも、書き方によって管理のしやすさが変わります。

この文字に色が付いています

<p style="color: #0066cc;">
  この文字に色が付いています
</p>

超入門

セレクタの基本

CSSは「どの要素に」スタイルを当てるかをセレクタで指定します。要素セレクタ・クラスセレクタ・IDセレクタで、当たる範囲がどう変わるか確認します。

ふつうの p 要素です

class="note" が付いた p です

id="special" が付いた p です

p {
  color: #0066cc;
}

超入門

ボックスモデル

すべてのHTML要素は、content・padding・border・marginの4層でできています。marginは本来「何も描画されない透明な余白」なので、ブラウザの開発者ツールと同じように色を付けて可視化しています。スライダーで各層の太さを変えて、重なり方を確認します。

padding 16px

border 4px

margin 20px

margin border padding content

content

.box {
  margin: 12px;
  border: 4px solid #1d1d1f;
  padding: 16px;
}

超入門

色の指定方法

CSSで色を指定する方法は複数あります。書き方は違っても、同じ色を表現できます。

.box {
  background: tomato;
}

超入門

フォントとテキストの基本

文字の大きさ・太さ・揃え位置は、それぞれ独立したプロパティで指定します。

文字サイズ 17px

Modern CSS

.text {
  font-size: 17px;
  font-weight: 600;
  text-align: left;
}

超入門

display の基本

block・inline・inline-block で、要素の並び方と幅・高さの指定できる範囲が変わります。

Chip 1

Chip 2

Chip 3

Chip 1 の実際の描画幅:

.chip {
  display: inline-block;
  width: 180px; /* 指定サイズ（画面幅で可変） */
  height: 56px;
}
/* inline のときは width/height が無視される */

初級

Flexbox基礎

justify-content と align-items を切り替えて、要素の並び方を確認します。

.row {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

初級

Grid基礎

列数のスライダーを動かして grid-template-columns を確認します。

列数 3

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

初級

CSS変数（カスタムプロパティ）

1つの変数を書き換えるだけで、複数のプロパティに反映されます。

テーマカラーが変数で管理されています

:root {
  --accent: #0066cc;
}
.card { border-color: var(--accent); }
.card button { background: var(--accent); }

初級

clamp() によるフルードスペーシング

画面幅を疑似的に変えて、clamp() が padding をどう計算するか確認します（実際のビューポート幅ではなく、スライダーで幅をシミュレートしています）。

疑似ビューポート幅 700px

この箱の padding

.box {
  padding: clamp(1rem, 5vw, 4rem);
  /* 疑似幅 700px のとき: 計算中... */
}

初級

transition の基本

マウスを乗せると、色・角丸・拡大がなめらかに変化します。

Hover me

.chip {
  background: #1d1d1f;
  transition: background .3s ease,
              transform .3s ease,
              border-radius .3s ease;
}
.chip:hover {
  background: #0066cc;
  transform: scale(1.08);
  border-radius: 9999px;
}

初級

:is() / :where() セレクタ

複数のセレクタをまとめて指定できます。切り替えて、どのカードが一致するか確認します。

.a

対象

.c

対象外

.b

対象

:is(.a, .b) h5 {
  color: #0066cc;
}
/* .c には適用されない */

中級

コンテナクエリ（Container Queries）

ボタンでコンテナの幅を変えると、その幅を基準にカードの列数が応答的に変わります。実際のビューポート幅とは無関係に、コンテナ自身の幅で判定されるのがポイントです。

Card A

Card B

Card C

.wrapper { container-type: inline-size; }

@container (min-width: 480px) {
  .grid { grid-template-columns: 1fr 1fr; }
}
@container (min-width: 700px) {
  .grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* 現在のコンテナ幅: 760px */

中級

:has() セレクタ

チェックボックスの状態に応じて、親要素のスタイルが変わります。JSを使わず、CSSだけで「子の状態を見て親を変える」ことができます。

このチェックボックスをON にすると枠線が変わります

.card:has(input:checked) {
  border-color: #0066cc;
  background: rgba(0,102,204,.06);
}

中級

ネストCSS（Nesting）

従来はプリプロセッサ（Sass等）が必要だったネスト構文が、標準CSSで書けます。見た目は同じでも、書き方の違いを比較します。

結果は同じ見た目です

.card {
  border: 3px solid #0066cc;
  & button {
    background: #0066cc;
  }
  &:hover {
    border-color: #0071e3;
  }
}

中級

color-mix()

2色を任意の割合でCSS上で直接混ぜられます。プリプロセッサなしで動的な配色調整が可能です。

混合率 50%

.swatch {
  background: color-mix(in srgb, #0066cc 50%, #ffffff);
}

中級

keyframes / transform アニメーション

スイッチをONにすると、フローティングカードが transform でスムーズに移動します。

カードを移動

Card

.card {
  position: absolute;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
  transform: translate(0, 0);
}

中級

aspect-ratio

高さを個別に計算しなくても、縦横比を指定するだけでボックスの形が決まります。

.box {
  aspect-ratio: 1/1;
  width: 60%;
}

上級

スクロール駆動アニメーション

スクロール量そのものをアニメーションのタイムラインとして使います。下の枠内を実際にスクロールしてください。対応ブラウザ（Chrome等）でのみ動作します。

↓ この枠内をスクロール ↓

.target {
  position: sticky; /* 拡大中も画面内に留める */
  top: 12px;
  animation: grow linear both;
  animation-timeline: scroll(nearest);
}
@keyframes grow {
  from { transform: scale(.4); opacity: .3; }
  to   { transform: scale(1);  opacity: 1;  }
}

上級

View Transitions API

ボタンを押すとDOMの更新をブラウザが自動でクロスフェードします。対応ブラウザ（Chrome等）でのみ動作します。

状態 A

function update() {
  if (!document.startViewTransition) {
    render();
    return;
  }
  document.startViewTransition(() => render());
}

上級

@layer（カスケードレイヤー）

詳細度が同じでも、レイヤーの宣言順で勝敗が決まります。後ろのレイヤーが優先されます。

@layer base, override;

@layer base {
  .box { background: #7a7a7a; }
}
@layer override {
  .box.on { background: #0066cc; }
}
/* override 有効: false */

上級

Subgrid

行ごとに独立したグリッドだと、ラベルの列幅が行ごとにバラバラになり列が揃いません。subgridは親グリッドの列トラックをそのまま引き継ぐので、行をまたいで列がぴったり揃います。

名前

Claude

誕生日

2023

得意なこと（自己紹介文）

CSS

.outer {
  display: grid;
  grid-template-columns: max-content 1fr;
}
.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
}

上級

CSS Anchor Positioning

JSで座標計算せずに、ある要素を別要素にアンカーして配置できます。対応ブラウザ（Chrome等）でのみ動作します。

.btn { anchor-name: --my-anchor; }

.tooltip {
  position: absolute;
  position-anchor: --my-anchor;
  bottom: anchor(top);
  left: anchor(center);
}

上級

@property

カスタムプロパティに型（angle）を与えることで、グラデーションの回転角をなめらかにアニメーションできます。

角度 0deg

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.box {
  background: conic-gradient(from var(--angle), #0066cc, #fff, #0066cc);
  --angle: 0deg;
}