本文へスキップ
スキルアップカレッジ

用語集

CSS 設計とコンポーネント指向コースで使われる主要な用語（65語）をまとめています。

暗黙のグリッド （あんもくのぐりっど）
`grid-template-columns` などで定義した行数を超える要素が入ったとき、CSS Grid が自動的に生成する行や列のこと。高さは `grid-auto-rows` で調整できる。
→ レッスン4
ID セレクタ（あいでぃー せれくた）
`#header` のように ID を指定するセレクタ。詳細度の計算では「ID の列」に数えられ、クラスをいくつ重ねた指定よりも強くなる。
→ レッスン1
値の重複 （あたいのじゅうふく）
同じ色や余白の値が CSS の複数の場所に別々に書かれている状態。名前の重複より見つけにくく、変更のたびに探す手間が生まれる。
→ レッスン3
1 次元と 2 次元 （いちじげんとにじげん）
レイアウト技術を分類する視点。1 方向への並びに強い技術と、行と列を同時に扱える CSS Grid の役割分担を表す言葉として使う。
→ レッスン4
カスケード（かすけーど）
複数の CSS ルールが同じ要素にぶつかったとき、`!important`・詳細度・ソース順の順番で、どのルールを適用するか決める仕組み。
→ レッスン1
疑似クラス（ぎじくらす）
`:hover` や `:disabled` のように、要素の状態や位置にもとづいてスタイルを適用するセレクタ。詳細度の計算ではクラスの列に数えられる。
→ レッスン1
疑似要素 （ぎじようそ）
`::before` のように、要素の一部分に対してスタイルを適用するセレクタ。詳細度の計算ではタイプの列に数えられる。
→ レッスン1
クラスセレクタ（くらすせれくた）
`.card` のようにクラス名を指定するセレクタ。役割にもとづく命名やコンポーネント設計の基本単位として使われる。
→ レッスン1
コンポーネント（こんぽーねんと）
役割ごとに独立して再利用できる部品のこと。ボタン・カード・フォームなど、見た目と役割がまとまった単位を指す。
→ レッスン1
コンポーネント指向（こんぽーねんとしこう）
CSS を、置かれる場所を知らない独立した部品の集まりとして設計する考え方。本コース後半の中心テーマ。
→ レッスン4
コードレビュー（こーどれびゅー）
チームで CSS を書く際、詳細度・命名・値の重複・部品の独立性などの観点から、書かれたコードを確認し合う作業。
→ レッスン8
詳細度 （しょうさいど）
セレクタがどれだけ限定的かを表す指標。ID・クラス・タイプの 3 列で数え、列ごとに左から比較して優先順位を決める。
→ レッスン1
状態クラス（じょうたいくらす）
`is-open` のように、JavaScript によって付け外しされる一時的な状態を表すクラス。見た目のバリエーションを表す Modifier とは区別される。
→ レッスン5
状態の表現 （じょうたいのひょうげん）
ボタンの通常・押下・無効のように、部品が持つ状態を CSS で表す方法。疑似クラスと状態クラスを使い分けて表現する。
→ レッスン5
スコープ（すこーぷ）
CSS カスタムプロパティが有効な範囲のこと。`:root` に定義すると文書全体に、特定のセレクタの中に定義するとその範囲だけに限定される。
→ レッスン3
全称セレクタ （ぜんしょうせれくた）
`*` で表され、すべての要素に一致するセレクタ。詳細度には加算されない、もっとも弱いセレクタ。
→ レッスン1
ソース順（そーすじゅん）
詳細度がまったく同じ場合に、ファイルの中であとに書かれたルールが優先して適用されるという、カスケードの決着基準の 1 つ。
→ レッスン1
属性セレクタ （ぞくせいせれくた）
`[type="text"]` のように、要素の属性を指定するセレクタ。詳細度の計算ではクラスの列に数えられる。
→ レッスン1
デザインシステム （でざいんしすてむ）
色・余白・文字といった基本の値と、ボタンやカードといった部品の集まりを、チームで共有できる形にまとめたもの。
→ レッスン1
デザイントークン（でざいんとーくん）
色・余白・文字サイズ・角丸・影といった、デザイン上の基本的な値に役割にもとづく名前を付けたもの。CSS カスタムプロパティで実現する。
→ レッスン7
デザイナーとの共通言語（でざいなーとのきょうつうげんご）
デザイントークンや部品の名前が揃っていることで、デザイナーとエンジニアが同じ名前で会話できるようになる状態を指す言葉。
→ レッスン7
テーマの切り替え（てーまのきりかえ）
`data-theme` 属性などでカスタムプロパティの値をまとめて差し替え、ライトテーマとダークテーマのような配色を切り替える応用。
→ レッスン3
トークンを 2 段階に分ける（とーくんをにだんかいにわける）
生の値そのものを表すトークンと、用途にもとづくトークンを分けて管理する応用的な設計手法。
→ レッスン7
生の値 （なまのあたい）
`--blue-600` のように、色や数値そのものを表すトークン。用途にもとづくトークンが参照する元になる。
→ レッスン7
部品カタログ （ぶひんかたろぐ）
既存の部品を一覧できるページや資料のこと。新しいメンバーが既存の部品に気づかずに作り直してしまう事故を防ぐ。
→ レッスン7
部品の独立性 （ぶひんのどくりつせい）
部品のスタイルが、置かれる場所に依存したスタイルになっていないかを確認する、コードレビューの観点の 1 つ。
→ レッスン8
フォールバック値（ふぉーるばっくち）
`var(--x, 値)` のように、指定した変数が定義されていない場合に代わりに使われる値。部品を単体で使い回すときに役立つ。
→ レッスン3
フレームワーク（ふれーむわーく）
React や Vue のように、部品ごとの CSS の影響範囲を仕組みとして区切って支援するツール群。命名や詳細度の管理は引き続き必要になる。
→ レッスン8
命名規則 （めいめいきそく）
クラス名の付け方を定めたルール。個人の書き方の癖ではなく、チーム全体で共有する約束事として機能して初めて効果を発揮する。
→ レッスン2
命名の粒度 （めいめいのりゅうど）
Element をどこまで細かく分けるかという判断のこと。単独でスタイルを指定する必要があるかどうかを目安に決める。
→ レッスン2
名前の一貫性 （なまえのいっかんせい）
命名のルールが揃っていることで、コードを読むだけで意図が伝わる状態を作る、チームでの CSS 運用の土台となる考え方。
→ レッスン2
見た目由来の名前（みための ゆらいのなまえ）
`.red-box` のように、色や形といった見た目をそのまま反映したクラス名。見た目が変わると実態とずれてしまう弱点を持つ。
→ レッスン2
明示的なグリッド （めいじてきなぐりっど）
`grid-template-columns` や `grid-template-rows` で、あらかじめ行と列を定義した状態のこと。暗黙のグリッドと対になる考え方。
→ レッスン4
用途にもとづくトークン（ようとにもとづくとーくん）
`--color-brand` のように、生の値を参照しながら役割の名前を付けたトークン。部品側は常にこちらだけを参照する。
→ レッスン7
要素セレクタ （ようそせれくた）
`p` や `div` のように、HTML の要素名を指定するセレクタ。詳細度の計算ではタイプの列に数えられる。
→ レッスン1
ユーティリティクラス（ゆーてぃりてぃくらす）
1 つのクラスに 1 つの CSS プロパティだけを対応させ、複数のクラスを HTML 側で組み合わせて見た目を作る考え方の単位。
→ レッスン6
ユーティリティファースト（ゆーてぃりてぃふぁーすと）
ユーティリティクラスを中心に見た目を組み立てる設計方針。新しい CSS を増やさないことを優先する考え方。
→ レッスン6
役割で名付ける （やくわりでなづける）
クラス名を、見た目ではなくその要素が何をしているかという役割にもとづいて付ける考え方。本コースの中核メッセージの 1 つ。
→ レッスン2
リファクタリング （りふぁくたりんぐ）
すでに動いている CSS を、重複の把握・値の整理・命名・部品の境界という順序で整理し、保守しやすい状態に整え直す作業。
→ レッスン8
!important（いんぽーたんと）
カスケードの中でもっとも強い扱いを受ける指定。上書きするには同じく `!important` が必要になり、強い指定の連鎖を生みやすい。
→ レッスン1
auto-fit（おーとふぃっと）
`repeat(auto-fit, minmax(...))` で使う値。コンテナの幅に収まる分だけ列の数を自動的に決める。
→ レッスン4
BEM（びーいーえむ）
Block・Element・Modifier という 3 つの単位でクラス名を組み立てる、役割にもとづいた命名の考え方。
→ レッスン2
Block （ぶろっく）
BEM において、それ単体で意味を持つ独立した部品を表す単位。カードやナビゲーションなどが該当する。
→ レッスン2
calc() （かるく）
カスタムプロパティなどの値を使って計算式を組み立てる CSS の関数。基準値から倍数で別の値を導き出せる。
→ レッスン3
CSS カスタムプロパティ（しーえすえす かすたむぷろぱてぃ）
`--名前: 値` で定義し `var()` で呼び出す仕組み。CSS 変数とも呼ばれ、値を一元管理するために使う。
→ レッスン3
CSS Grid（しーえすえす ぐりっど）
行と列という 2 つの方向を同時に扱えるレイアウトの仕組み。ダッシュボードのような 2 次元の配置に向いている。
→ レッスン1
data-theme（でーたてーま）
HTML の属性の 1 つ。値によってカスタムプロパティの定義をまとめて切り替え、テーマ切り替えの土台に使う。
→ レッスン3
Element （えれめんと）
BEM において、Block の内部を構成する部品を表す単位。`Block__Element` の記法でつなぐ。
→ レッスン2
Flexbox（ふれっくすぼっくす）
要素を 1 つの方向に並べて整えることが得意なレイアウトの仕組み。CSS Grid とは役割分担が異なる。
→ レッスン1
fr 単位（えふあーるたんい）
CSS Grid 専用の単位。余った幅をほかの列との比率で分け合うという意味を持つ。
→ レッスン4
grid-area （ぐりっど えりあ）
`grid-template-areas` で定義した領域名を、子要素に割り当てるためのプロパティ。
→ レッスン4
grid-auto-flow（ぐりっど おーと ふろー）
明示的なグリッドに収まりきらない要素を、行方向・列方向のどちらへ送るかを制御するプロパティ。
→ レッスン4
grid-auto-rows（ぐりっど おーと ろーず）
暗黙のグリッドとして自動生成される行の高さを指定するプロパティ。
→ レッスン4
grid-column（ぐりっど から む）
数値で列の開始位置と終了位置を指定するプロパティ。名前付きの領域を使わない場合に使う。
→ レッスン4
grid-row（ぐりっど ろー）
数値で行の開始位置と終了位置を指定するプロパティ。`grid-column` と組み合わせて使う。
→ レッスン4
grid-template-areas（ぐりっど てんぷれーと えりあず）
行と列の交差点に名前を付け、レイアウトの見取り図を文字列としてそのまま書けるプロパティ。
→ レッスン4
grid-template-columns（ぐりっど てんぷれーと からむず）
CSS Grid で列の数と幅をまとめて定義するプロパティ。
→ レッスン4
grid-template-rows（ぐりっど てんぷれーと ろーず）
CSS Grid で行の数と高さをまとめて定義するプロパティ。
→ レッスン4
is- （いず）
JavaScript によって付け外しされる状態クラスに付ける接頭辞。見た目のバリエーションを表す Modifier とは区別される。
→ レッスン5
minmax() （みにまっくす）
列や行の幅・高さに、最小値と最大値を指定する CSS Grid の関数。
→ レッスン4
Modifier （もでぃふぁいあ）
BEM において、Block や Element に見た目や状態のバリエーションを加える単位。`Block--Modifier` の記法でつなぐ。
→ レッスン2
repeat()（りぴーと）
同じ幅の列や行をいくつも並べたいときに、繰り返しを表現する CSS Grid の関数。
→ レッスン4
:root（るーと）
文書全体のもっとも外側を指すセレクタ。ここに定義したカスタムプロパティは文書全体から参照できる。
→ レッスン3
Tailwind CSS（ているうぃんど しーえすえす）
ユーティリティファーストという考え方を広めた CSS フレームワークの 1 つ。
→ レッスン6
var()（ばー）
CSS カスタムプロパティの値を呼び出すための関数。2 つ目の引数にフォールバック値を指定できる。
→ レッスン3
← CSS 設計とコンポーネント指向 に戻る