トピック別用語 · 51 ガイド

レイアウトとCSS

コンテンツが各画面でどのようにサイズ、配置、間隔、レイヤー、形を持つのかを学びましょう。

01 / アトラス

全てのレイアウトとCSS用語

簡単な意味、例、使用時期、公式度、コードネームを含む用語を開く

01 · コア
clamp() clamp()

`clamp()` は好ましいCSS値を選択しますが、最小値と最大値の間に保持します。
02 · さらに詳細
CSSアンカーポジショニング CSS Anchor Positioning

CSSアンカーポジショニングは、あるボックスを他の名前付きアンカー要素に相対的に配置します。
03 · コア
CSSカスケード CSS Cascade

CSSカスケードは、複数のスタイルが同じ対象を指定したときにブラウザが使用するルールのセットです。各ルールがどこから来たか、その重要性、コンテキスト、レイヤー、セレクタの重み、スコープ、順序をチェックします。
04 · さらに詳細
CSSカスタムプロパティ CSS Custom Property

CSSのcustom propertyは、何度も使えるCSSの値で、CSS変数とも呼ばれます。CSSのルールに従って、使う場所やテーマに合わせて変えられます。
05 · コア
CSSグリッド CSS Grid

CSSグリッドは行と列を一緒に扱うレイアウトシステムです。固定エリアを設定したり、スペースの変化に合わせて変更したりできます。
06 · コア
CSSセレクター CSS Selector

CSSセレクターは、ページ上の要素を見つけてスタイルを適用できるようにするパターンです。
07 · さらに詳細
CSSネスティング CSS Nesting

CSSネスティングは、あるスタイルルールの中に別のスタイルルールを書くための組み込み構文です。ブラウザは依然としてセレクターの読み取りやその重要度に関してCSS規則に従います。
08 · コア
CSSポジショニング CSS Positioning

CSSポジショニングは、要素が何に対して配置されるかを示します。通常のフロー、自身、先祖、またはビューポートを参照として使用する場合があります。
09 · コア
CSS継承 CSS Inheritance

CSSの継承により、一部のプロパティは親要素から値をコピーできます。これは、子要素に独自の値がないときに起こります。
10 · コア
CSS特異性 CSS Specificity

CSSの特異性とは、セレクターの重みのことです。他のカスケードルールで同点の場合、ブラウザはこの重みを使ってどのスタイルが適用されるかを決定します。
11 · コア
CSS論理プロパティ CSS Logical Properties

CSS論理プロパティはブロックやインラインのような書き方向で側面を表します。これにより、top、right、bottom、leftのような固定方向の代わりになります。これにより、レイアウトが言語の書き方向に従いやすくなります。
12 · コア
minmax() minmax()

`minmax()` は、行や列に最小サイズと最大サイズの両方を設定できる CSS グリッド関数です。
13 · コア
object-fit object-fit

`object-fit` は、画像、ビデオ、または類似のアイテムがそのボックス内にどのように収まるかを制御します。
14 · コア
z-index z-index

z-index は、配置されたボックスの前後のレベルを設定する CSS プロパティです。場合によっては、新しいローカルスタッキングコンテキストも作成します。
15 · コア
アスペクト比 Aspect Ratio

アスペクト比は、要素の幅が高さに比べてどれくらいかを示します。
16 · コア
アプリシェル App Shell

アプリのシェルは、ページの内容が変わる間も残る小さなフレームです。通常、ナビゲーション、アイデンティティ、ステータスを保持します。
17 · さらに詳細
オーバースクロール動作 overscroll-behavior

`overscroll-behavior` は、スクロール領域が端に達したときに何が起こるかを制御します。スクロールが親領域に続かないように止めたり、端の効果を変更したりできます。
18 · コア
オーバーフロー Overflow

オーバーフローとは、コンテンツがボックスより大きい場合に発生することです。CSSにより表示、切り取り、またはスクロールさせることができます。
19 · コア
カードグリッド Card Grid

カードグリッドは、比べられるカードを並べるよ。列の数はスペースに合わせて変わるんだ。
20 · さらに詳細
カスケードレイヤー Cascade Layers

カスケードレイヤーは、CSSルールの順序を設定する名前付きグループです。ブラウザはセレクタの特異性を比較する前に、この順序をチェックします。
21 · コア
ギャップ Gap

ギャップとは、コンテナがFlexboxまたはGridの子要素の間に配置するスペースです。同じルールがすべてのペアに適用されます。
22 · さらに詳細
コンテナクエリ Container Query

CSSのcontainer queryを使うと、コンポーネントを入っているコンテナに合わせられます。画面全体の大きさだけでなく、そのコンテナの大きさやスタイルをチェックします。
23 · さらに詳細
サブグリッド Subgrid

サブグリッドは、親の行または列のサイズを共有する別のグリッド内のグリッドです。1方向のみまたは両方を共有できます。
24 · コア
シングルページレイアウト Single-Page Layout

シングルページレイアウトは、1つのメインのストーリーやタスクを、1つの長いページにまとめます。
25 · さらに詳細
スクロールスナップ Scroll Snap

CSSスクロールスナップにより、ユーザーがスクロールした後、スクロール領域が選択した整列ポイントで停止します。
26 · さらに詳細
スタッキングコンテキスト Stacking Context

スタッキングコンテキストは、CSSレイヤーのローカルグループです。アイテムはまずグループ内で順序付けされ、その後グループ全体が他のグループの間に配置されます。
27 · さらに詳細
スタッキングコンテキスト & Z-index — 学習バンドル Stacking Context & Z-index — Learning Bundle

この学習バンドルは、2つのCSSの概念を結びつけます。スタッキングコンテキストは、その描画順序を他と分けて保持します。z-indexは、そのコンテキスト内で参加可能なボックスの順序を決めます。このバンドルは、標準的なCSS用語ではありません。
28 · さらに詳細
スティッキー&固定位置 — 学習バンドル Sticky & Fixed Position — Learning Bundle

この学習バンドルは、2つのCSSの位置指定値を比較します。stickyはスクロールコンテナ内の設定されたポイントに到達するまでは通常のフローに留まります。fixedは固定位置指定の包含ブロックに対して配置されます。このバンドルは一つのCSS用語ではありません。
29 · コア
スティッキーポジション Sticky Position

CSSのスティッキーポジショニングは、通常の相対位置指定のように始まります。ページをスクロールすると、ボックスは設定された端に留まることができますが、コンテナブロックの内部に限られます。
30 · コア
テキストの切り詰め Text Truncation

テキストの切り詰めは、スペースを節約するためにテキストを切り取ります。省略記号は1行以上が欠落していることを示します。
31 · さらに詳細
ドキュメンテーションレイアウト Documentation Layout

Documentation Layoutは、メニュー、本文、例、目次、そして「次へ」のリンクを、一つの画面にまとめた読みやすいレイアウトです。
32 · コア
パディング Padding

パディングは、要素の境界内の、コンテンツとその端との間のスペースです。
33 · コア
ビューポート単位 Viewport Units

ビューポート単位は、ブラウザの表示領域に基づいたCSSの長さです。小・大・動的バージョンは、表示・非表示になるブラウザバーに対応します。
34 · コア
ブレークポイントとメディアクエリ Breakpoint & Media Query

ブレイクポイントは、画面のレイアウトを変えるタイミングのことだよ。メディアクエリは、画面のサイズやデバイスが指定した条件を満たしたときにCSSを適用するよ。
35 · コア
フレックスボックス Flexbox

Flexboxは、一度に1つの方向のためのCSSレイアウトシステムです。アイテムを行または列に沿って並べ、均等に配置します。
36 · さらに詳細
ブロックフォーマッティングコンテキスト Block Formatting Context

ブロックフォーマットコンテキスト（BFC）は、ブロックレイアウト用の独立した領域です。フロートを内部に保持し、一部のマージンやフロートが外部のコンテンツに影響を与えるのを防ぎます。
37 · コア
ボックスモデル Box Model

CSSボックスモデルは要素のサイズを説明します。各ボックスにはコンテンツ、パディング、ボーダー、マージンがあります。
38 · コア
マージン Margin

マージンは要素のボーダー外のスペースです。それにより要素が近くのレイアウト項目から離れます。
39 · さらに詳細
メーソンリレイアウト Masonry Layout

Masonry Layout は、高さの違う項目を列に詰め込んでいくよ。項目は縦のスキマを埋めていって、行のラインは共有しないよ。
40 · コア
位置を修正 Fixed Position

CSS固定位置指定は、通常ブラウザウィンドウである固定コンテナに対してボックスを配置します。ドキュメントがスクロールしてもボックスは通常その場所に留まります。
41 · コア
間隔 Spacing

スペーシングは意図的に配置された空白です。関連する項目をまとめ、アイデアを区切り、ページのリズムを作ります。
42 · さらに詳細
含むブロック Containing Block

コンテインブロックは、要素が位置やパーセンテージサイズを計算するために使用する矩形です。
43 · コア
疑似クラス Pseudo-class

疑似クラスはCSSセレクタの一部です。状態、場所、言語、またはユーザーの操作などの条件で要素を見つけます。
44 · コア
疑似要素 Pseudo-element

疑似要素は、CSSがソースHTMLに通常の要素がない部分やボックスをスタイルできるようにします。例としては、最初の文字や生成された装飾があります。
45 · さらに詳細
固有サイズ設定 Intrinsic Sizing

固有サイズ設定では、外部からの固定サイズだけでなく、要素の内容がサイズの決定に役立ちます。
46 · さらに詳細
最小コンテンツ min-content

`min-content` は、許可されるすべての改行後にコンテンツが使える最小サイズです。
47 · さらに詳細
最大コンテンツ max-content

`max-content` は、通常の改行ポイントで折り返されなかった場合にコンテンツが希望するサイズです。
48 · コア
中央列 Centered Column

真ん中の列は、読みやすい最大幅があって、左右の余白が同じように見えるよ。
49 · さらに詳細
背景のぼかし Backdrop Blur

バックドロップのぼかしは、透明な表面の後ろにあるものをやわらげます。表面自体の内容はぼかしません。
50 · コア
不透明度 Opacity

不透明度は要素とその子要素がどれだけ固いかを示します。透明から不透明までの範囲があります。
51 · さらに詳細
弁当グリッド Bento Grid

Bentoグリッドは、違う大きさのタイルを1つのレイアウトにきれいに詰め込むよ。大きく配置された部分は、どのコンテンツが一番大事かを示しているんだ。