# CSS辞書

> 日本語で読めるCSSプロパティリファレンス。127のプロパティを実用的なコード例・W3C Baseline準拠のブラウザ対応情報・よくある間違いとともに解説しています。うち17件は新しいCSS機能です。各ページは下記の .md URL からクリーンなMarkdownとして取得できます。

このファイルは https://llmstxt.org/ の仕様に準拠しています。

## CSSプロパティ

- [display](https://www.css-dictionary.com/property/display.md): 要素の表示方法を指定するプロパティです。ブロック要素、インライン要素、フレックスコンテナ、グリッド、noneなど、様々な表示形式を設定できます。インライン・インラインブロックの違いも重要です。
- [display: flex](https://www.css-dictionary.com/property/display-flex.md): 要素をフレックスコンテナに変換し、子要素（フレックスアイテム）を柔軟にレイアウトできるプロパティです。1次元レイアウト（行または列）の配置に最適で、モダンWebデザインの基礎となります。
- [display: grid](https://www.css-dictionary.com/property/display-grid.md): 要素をグリッドコンテナに変換し、子要素（グリッドアイテム）を2次元レイアウト（行と列）で配置できるプロパティです。複雑なレイアウトを直感的に実現でき、レスポンシブデザインにも最適です。
- [order](https://www.css-dictionary.com/property/order.md): フレックスアイテムの表示順序を変更するプロパティです。HTMLの記述順序を変えずに、視覚的な並び順だけを調整できます。アクセシビリティを保ちながらレスポンシブデザインに対応できます。
- [@container](https://www.css-dictionary.com/property/container-queries.md): コンテナのサイズに基づいてスタイルを適用する最新のレスポンシブ手法です。メディアクエリの進化版として注目されています。
- [container-type](https://www.css-dictionary.com/property/container-type.md): 要素をコンテナクエリのコンテナとして定義し、どの軸のサイズ変化を監視するかを指定するプロパティです。子要素がコンテナのサイズに応じてスタイルを変更できるようになります。
- [subgrid](https://www.css-dictionary.com/property/subgrid.md): 親グリッドのトラック（行や列）を子グリッドで継承できる機能です。複雑なレイアウトの整列が簡単になります。
- [aspect-ratio](https://www.css-dictionary.com/property/aspect-ratio.md): 要素のアスペクト比（縦横比）を指定するプロパティです。16/9や1/1のように指定し、レスポンシブな画像や動画の表示で縦横比を維持します。padding-topハックの代替として、より直感的な実装が可能です。
- [gap](https://www.css-dictionary.com/property/gap.md): FlexboxやGridで要素間の間隔を指定するプロパティです。row-gap（行間）とcolumn-gap（列間）を一括で指定でき、marginより直感的で管理しやすいです。レスポンシブなレイアウトの余白調整に最適です。
- [clamp()](https://www.css-dictionary.com/property/clamp.md): 最小値、推奨値、最大値を指定してレスポンシブな値を設定する関数です。clamp(最小, 推奨, 最大)の形式で、ビューポートに応じて値が自動調整されます。フルードタイポグラフィやスペーシングの実装に最適です。
- [min() / max()](https://www.css-dictionary.com/property/min-max-functions.md): 複数の値から最小値または最大値を選択する関数です。レスポンシブデザインで条件分岐的な値設定が可能です。
- [CSS変数 (--property)](https://www.css-dictionary.com/property/css-custom-properties.md): CSS内で変数を定義・使用できる機能です。--variable-name: valueで定義し、var(--variable-name)で参照します。テーマ切り替えや保守性の向上に大きく貢献し、デザインシステムの構築に不可欠です。
- [backdrop-filter](https://www.css-dictionary.com/property/backdrop-filter.md): 要素の背後にあるコンテンツにフィルター効果を適用するプロパティです。ガラス効果やぼかし効果を作成できます。
- [filter](https://www.css-dictionary.com/property/filter.md): 要素に視覚効果（ぼかし、明度調整、色相変更など）を適用するプロパティです。blur()、brightness()、contrast()、grayscale()など多数の関数があり、画像加工やデザイン効果を実現します。
- [object-fit](https://www.css-dictionary.com/property/object-fit.md): 画像や動画などの置換要素がコンテナにどのようにフィットするかを制御するプロパティです。contain、cover、fill、none、scale-downの値があり、アスペクト比を維持した表示が可能です。
- [place-items](https://www.css-dictionary.com/property/place-items.md): align-itemsとjustify-itemsを一括で設定するショートハンドプロパティです。Grid/Flexboxで中央配置が簡単になります。
- [place-content](https://www.css-dictionary.com/property/place-content.md): align-contentとjustify-contentを一括で設定するショートハンドプロパティです。
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md): フレックスコンテナ内のアイテムの配置方向を指定するプロパティです。row（横並び）、column（縦並び）、row-reverse、column-reverseの値があり、レスポンシブデザインでの方向切り替えに便利です。
- [justify-content](https://www.css-dictionary.com/property/justify-content.md): フレックスコンテナ内のアイテムの主軸方向の配置を指定するプロパティです。flex-start、flex-end、center、space-between、space-aroundなどがあり、アイテム間の余白配分を制御します。
- [justify-items](https://www.css-dictionary.com/property/justify-items.md): グリッドコンテナ内のアイテムの水平方向（インライン軸）の配置を制御するプロパティです。全てのグリッドアイテムに対して一括で配置を指定できます。
- [align-items](https://www.css-dictionary.com/property/align-items.md): フレックスコンテナ内のアイテムの交差軸方向の配置を指定するプロパティです。flex-start、flex-end、center、baseline、stretchなどの値があり、高さが異なるアイテムの縦方向の配置を制御します。
- [align-content](https://www.css-dictionary.com/property/align-content.md): FlexboxやGridで複数行がある場合、行全体の交差軸方向の配置を制御するプロパティです。flex-wrapで複数行になった場合や、グリッドで複数行・列がある場合に効果を発揮します。
- [flex-wrap](https://www.css-dictionary.com/property/flex-wrap.md): フレックスアイテムが一行に収まらない場合の折り返し動作を制御します。nowrap（折り返しなし）、wrap（折り返す）、wrap-reverse（逆順で折り返す）があり、レスポンシブなカードレイアウトなどに使用されます。
- [flex (grow/shrink/basis)](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md): フレックスアイテムの伸縮性と基本サイズを制御するプロパティです。flex-grow（余白の配分比率）、flex-shrink（縮小比率）、flex-basis（基本サイズ）を組み合わせて、柔軟で予測可能なレイアウトを実現します。
- [grid-template-columns](https://www.css-dictionary.com/property/grid-template-columns.md): グリッドコンテナの列のサイズと数を定義するプロパティです。px、%、fr（fractional unit）、auto、repeat()関数などで柔軟に指定できます。複雑な2次元レイアウトの基礎となります。
- [grid-template-areas](https://www.css-dictionary.com/property/grid-template-areas.md): グリッドエリアに名前を付けて、視覚的にレイアウトを定義できるプロパティです。文字列でエリア名を並べることで、直感的で保守性の高いグリッドレイアウトを実現できます。
- [grid-template-columns: repeat](https://www.css-dictionary.com/property/grid-auto-fit-fill.md): グリッドで自動的に列数を調整する関数です。repeat(auto-fit, minmax(最小幅, 1fr))の形式で、コンテナ幅に応じて自動的にカラム数が変わるレスポンシブグリッドの実装に必須です。
- [position](https://www.css-dictionary.com/property/position.md): 要素の配置方法を指定するプロパティです。通常の文書フローからの配置制御が可能です。top、right、bottom、leftプロパティと組み合わせて使用します。
- [z-index](https://www.css-dictionary.com/property/z-index.md): 要素の重ね順（奥行き順）を指定するプロパティです。値が大きいほど手前に表示されます。position: static以外の要素に適用され、モーダルやドロップダウンメニューなどの実装に不可欠です。
- [color](https://www.css-dictionary.com/property/color.md): テキストの色を指定するプロパティです。色名、16進数（#000000）、RGB、RGBA、HSL、HSLAなど様々な色形式で指定可能です。currentColorキーワードで親要素の色を継承することもできます。
- [font-size](https://www.css-dictionary.com/property/font-size.md): テキストのフォントサイズを指定するプロパティです。px、em、rem、%、vwなど様々な単位で指定可能です。レスポンシブデザインではremやvwの使用が推奨され、アクセシビリティの観点からも重要なプロパティです。
- [font-weight](https://www.css-dictionary.com/property/font-weight.md): フォントの太さを指定するプロパティです。100から900までの数値、またはnormal、bold、lighter、bolderなどのキーワードで指定できます。可読性やデザイン上の強調表現に重要な役割を果たします。
- [line-height](https://www.css-dictionary.com/property/line-height.md): 行の高さ（行間）を指定するプロパティです。数値（推奨）、px、%、emで指定でき、読みやすさに大きく影響します。一般的に1.5〜1.8が読みやすいとされ、単位なしの数値指定が推奨されます。
- [letter-spacing](https://www.css-dictionary.com/property/letter-spacing.md): 文字間のスペース（字間）を指定するプロパティです。pxやemで指定し、可読性やデザイン調整に使われます。見出しでは広めに、本文では狭めに設定することが一般的です。
- [text-align](https://www.css-dictionary.com/property/text-align.md): テキストの水平方向の配置を指定するプロパティです。left、right、center、justifyなどの値があり、文章の見た目や読みやすさに大きく影響します。ブロック要素内のテキストやインライン要素に適用されます。
- [text-decoration](https://www.css-dictionary.com/property/text-decoration.md): テキストの装飾（下線、上線、取り消し線など）を指定するプロパティです。underline、overline、line-through、noneなどの値があり、リンクやテキストの強調に使用されます。色やスタイルも個別に指定可能です。
- [background-color](https://www.css-dictionary.com/property/background-color.md): 要素の背景色を指定するプロパティです。色名、16進数カラーコード、RGB、RGBA、HSLなど様々な色形式で指定可能です。透明度も指定でき、デザインの基礎となる重要なプロパティです。
- [background-image](https://www.css-dictionary.com/property/background-image.md): 要素の背景画像を指定するプロパティです。url()で画像を指定するほか、linear-gradient()やradial-gradient()でグラデーションも指定可能です。複数の背景画像を重ねることもできます。
- [background-size](https://www.css-dictionary.com/property/background-size.md): 背景画像のサイズを制御するプロパティです。contain（全体を表示）、cover（領域を埋める）のほか、px、%などの具体的な値でも指定できます。レスポンシブデザインで背景画像を最適に表示するために不可欠です。
- [background-position](https://www.css-dictionary.com/property/background-position.md): 背景画像の配置位置を制御するプロパティです。キーワード（top、center、bottom、left、right）や数値、パーセントで位置を指定できます。複数の背景画像それぞれに異なる位置を設定することも可能です。
- [linear-gradient()](https://www.css-dictionary.com/property/linear-gradient.md): 線形グラデーションを作成する関数です。方向と色を指定し、滑らかな色の変化を表現できます。角度や方向キーワード（to top、to right等）で方向を制御でき、モダンなデザインに欠かせません。
- [radial-gradient()](https://www.css-dictionary.com/property/radial-gradient.md): 円形・楕円形のグラデーションを作成する関数です。中心からの放射状グラデーションで、位置、形状、色の配分を細かく制御できます。背景やボタンに立体感を与えるデザインに使用されます。
- [padding](https://www.css-dictionary.com/property/padding.md): 要素の内側の余白を指定するプロパティです。コンテンツと境界線の間のスペースを調整し、クリック領域の拡大やデザインの余白調整に使用します。上下左右を個別に指定できます。
- [margin](https://www.css-dictionary.com/property/margin.md): 要素の外側の余白を指定するプロパティです。上下左右を個別に指定できるほか、autoを使った中央配置も可能です。負の値を使うことで要素を重ねることもでき、レイアウト調整の基本となるプロパティです。
- [width](https://www.css-dictionary.com/property/width.md): 要素の横幅を指定するプロパティです。px、%、vw、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの特殊な値も使用でき、レスポンシブデザインの基礎となります。
- [height](https://www.css-dictionary.com/property/height.md): 要素の高さを指定するプロパティです。px、%、vh、em、remなど様々な単位が利用できます。auto、min-content、max-content、fit-contentなどの値も使用でき、レイアウトの高さ制御に重要な役割を果たします。
- [max-width](https://www.css-dictionary.com/property/max-width.md): 要素の最大幅を指定するプロパティです。widthと組み合わせてレスポンシブなデザインが可能です。コンテンツが指定幅を超えないように制限し、大画面での可読性を保つのに役立ちます。
- [min-width](https://www.css-dictionary.com/property/min-width.md): 要素の最小幅を指定するプロパティです。レイアウトの崩れ防止やレスポンシブ対応に役立ちます。フレックスボックスやグリッドと組み合わせることで、柔軟で壊れにくいレイアウトを実現できます。
- [box-sizing](https://www.css-dictionary.com/property/box-sizing.md): 要素のサイズ計算方法を指定するプロパティです。content-box（デフォルト）ではpaddingとborderが幅に含まれませんが、border-boxではそれらを含めた幅になります。モダンCSS開発ではborder-boxが必須です。
- [border](https://www.css-dictionary.com/property/border.md): 要素の境界線を指定するプロパティです。幅、スタイル、色を一括設定できます。solid、dashed、dotted、doubleなど様々なスタイルがあり、個別の辺（border-top等）も指定可能です。
- [border-radius](https://www.css-dictionary.com/property/border-radius.md): 要素の角を丸くするプロパティです。4つの角を個別に指定できるほか、楕円形の角も作成可能です。円形のボタンやカードデザインに欠かせないプロパティで、単位はpx、%、emなど多様な値が使用できます。
- [box-shadow](https://www.css-dictionary.com/property/box-shadow.md): 要素に影を付けるプロパティです。X方向のオフセット、Y方向のオフセット、ぼかし半径、広がり、色を指定できます。複数の影を重ねることで立体的なデザインや多彩な効果を実現できます。
- [opacity](https://www.css-dictionary.com/property/opacity.md): 要素の透明度を指定するプロパティです。0（完全透明）から1（完全不透明）の間で指定します。子要素も含めて透明度が適用されるため、背景だけを透明にしたい場合はRGBAを使用します。
- [transition](https://www.css-dictionary.com/property/transition.md): CSSプロパティの変化を滑らかにアニメーションするプロパティです。プロパティ名、持続時間、タイミング関数、遅延を指定でき、ユーザーインタラクションに対する自然な視覚フィードバックを提供します。
- [transform](https://www.css-dictionary.com/property/transform.md): 要素の変形（移動、回転、拡大縮小など）を指定するプロパティです。translate()、rotate()、scale()、skew()などの関数を使用し、3D変形も可能です。アニメーションやインタラクティブなデザインに不可欠です。
- [animation](https://www.css-dictionary.com/property/animation.md): キーフレームアニメーションを制御するプロパティです。@keyframesで定義したアニメーション名、持続時間、タイミング関数、遅延、繰り返し回数、方向などを指定し、複雑なアニメーションを実現できます。
- [@keyframes](https://www.css-dictionary.com/property/keyframes.md): アニメーションの各段階を定義するルールです。@keyframes名前 { from { } to { } }または0%から100%のパーセンテージでアニメーションの途中状態を細かく指定できます。複雑で滑らかなアニメーションを実現するための基礎です。
- [cursor](https://www.css-dictionary.com/property/cursor.md): 要素にマウスを重ねた時のカーソルの形状を指定するプロパティです。pointer、text、move、not-allowedなど多数の値があり、ユーザーに操作のフィードバックを与える重要なUIプロパティです。
- [overflow](https://www.css-dictionary.com/property/overflow.md): 要素からはみ出したコンテンツの表示方法を指定するプロパティです。visible、hidden、scroll、autoなどがあり、スクロール領域の制御やレイアウトの調整に使用します。overflow-xとoverflow-yで軸ごとに指定も可能です。
- [visibility](https://www.css-dictionary.com/property/visibility.md): 要素の可視性を制御するプロパティです。display: noneと違い、要素は非表示になりますが領域（スペース）は確保されたままになります。アニメーションやトランジションと組み合わせて使用されることが多いです。
- [white-space](https://www.css-dictionary.com/property/white-space.md): 要素内の空白文字の処理方法を指定するプロパティです。normal、nowrap、pre、pre-wrapなどがあり、改行やスペースの扱いを制御します。コードブロックの表示やテキストの折り返し制御に重要です。
- [text-overflow](https://www.css-dictionary.com/property/text-overflow.md): 要素からはみ出したテキストの表示方法を指定するプロパティです。ellipsis（...）で省略表示したり、clip（切り取り）したりできます。white-space: nowrapやoverflowと組み合わせて使用します。
- [word-break](https://www.css-dictionary.com/property/word-break.md): 単語の改行方法を制御するプロパティです。normal、break-all、keep-allなどがあり、長い単語やURLの処理に便利です。日本語と英語が混在する文章でも適切な改行を実現できます。
- [writing-mode](https://www.css-dictionary.com/property/writing-mode.md): テキストの書字方向を指定するプロパティです。横書き、縦書き、文字の向きを制御できます。日本語、中国語、アラビア語などの多言語対応や、デザイン上の縦書き表現に使用されます。
- [user-select](https://www.css-dictionary.com/property/user-select.md): ユーザーがテキストを選択できるかどうかを制御するプロパティです。none、text、all、autoなどの値があり、UI要素のテキストが誤って選択されるのを防ぐために使用されます。
- [pointer-events](https://www.css-dictionary.com/property/pointer-events.md): 要素がマウスイベントのターゲットになるかどうかを制御するプロパティです。none、auto、visiblePainted等の値があり、透明なオーバーレイの実装やクリック可能領域の制御に使用されます。
- [will-change](https://www.css-dictionary.com/property/will-change.md): 要素がどのプロパティを変更する予定かをブラウザに事前通知し、最適化を促すプロパティです。transform、opacity等を指定できますが、過剰な使用はパフォーマンスを悪化させるため注意が必要です。
- [contain](https://www.css-dictionary.com/property/contain.md): 要素の影響範囲を制限し、ブラウザの最適化を助けるプロパティです。layout、paint、size、styleなどの値で、要素が外部に与える影響を制限します。大規模なアプリケーションのパフォーマンス改善に有効です。
- [@media](https://www.css-dictionary.com/property/media-queries.md): 画面サイズ、デバイスタイプ、印刷状況などの条件に基づいてスタイルを適用するルールです。レスポンシブデザインの基礎となる機能で、モバイル、タブレット、デスクトップなど様々なデバイスに対応できます。
- [table-layout](https://www.css-dictionary.com/property/table-layout.md): テーブルのレイアウトアルゴリズムを制御するプロパティです。セルの幅をどのように計算するかを決定し、テーブルの描画パフォーマンスや見た目に影響します。大きなテーブルでの表示速度向上にも効果的です。
- [content-visibility](https://www.css-dictionary.com/property/content-visibility.md): 要素のレンダリングを制御し、画面外の要素の処理をスキップしてパフォーマンスを向上させるプロパティです。
- [accent-color](https://www.css-dictionary.com/property/accent-color.md): フォーム部品やチェックボックスなどのアクセント色を指定するプロパティです。ブラウザのデフォルトUIの色をカスタマイズでき、ブランドカラーに合わせたフォームデザインを実現できます。
- [list-style](https://www.css-dictionary.com/property/list-style.md): リストのマーカーや記号の種類・位置・画像を指定するプロパティです。disc、circle、square、decimal、noneなどの値があり、カスタム画像も使用できます。リストデザインの基本となるプロパティです。
- [clip-path](https://www.css-dictionary.com/property/clip-path.md): 要素の表示領域を多角形や円形などで切り抜くプロパティです。circle()、polygon()、ellipse()などの関数で形状を指定し、マスク効果やユニークな形状のデザインを実現できます。
- [:hover](https://www.css-dictionary.com/property/pseudo-hover.md): 要素にマウスカーソルが乗ったときに適用される擬似クラスです。ボタンやリンクのホバー効果などでよく使われます。
- [:nth-child()](https://www.css-dictionary.com/property/pseudo-nth-child.md): 親要素内での順序に基づいて要素を選択できる擬似クラスです。リストやグリッドの偶数・奇数行、特定のパターンにスタイルを適用する際に便利です。
- [:nth-of-type()](https://www.css-dictionary.com/property/pseudo-nth-of-type.md): 同じタグ名の要素の中での順序に基づいて要素を選択する擬似クラスです。:nth-child()との違いは、タグ名を考慮することです。見出しやセクション要素に特に有用です。
- [:first-child](https://www.css-dictionary.com/property/pseudo-first-child.md): 親要素の最初の子要素を選択する擬似クラスです。リストの最初の項目や、カードレイアウトの最初の要素など、特定の位置にある要素にスタイルを適用する際に便利です。
- [:focus-visible](https://www.css-dictionary.com/property/pseudo-focus-visible.md): 要素がキーボードからフォーカスされた場合にのみ適用される擬似クラスです。マウスクリックによるフォーカスには適用されないため、アクセシビリティを向上させながら不要なフォーカスリングを避けられます。
- [object-position](https://www.css-dictionary.com/property/object-position.md): object-fitと組み合わせて使用し、画像や動画などの置換要素の位置を調整するプロパティです。top、center、bottom、left、right等のキーワードや%、pxで指定でき、アスペクト比を維持しながら表示位置を制御します。
- [scroll-behavior](https://www.css-dictionary.com/property/scroll-behavior.md): スクロール動作をスムーズにするか、即座に移動するかを指定するプロパティです。smooth指定でスムーススクロールが有効になり、アンカーリンクやJavaScriptでのスクロール操作が滑らかになります。
- [inset](https://www.css-dictionary.com/property/inset.md): top、right、bottom、leftを一括で指定できる短縮プロパティです。position: absoluteやfixedと組み合わせて使用します。
- [scroll-snap-type](https://www.css-dictionary.com/property/scroll-snap-type.md): スクロールスナップコンテナの動作を定義するプロパティです。カルーセルやフルページスクロールの実装に使用します。
- [scroll-snap-align](https://www.css-dictionary.com/property/scroll-snap-align.md): スクロールスナップ時の子要素の配置位置を指定するプロパティです。scroll-snap-typeと組み合わせて使用します。
- [overscroll-behavior](https://www.css-dictionary.com/property/overscroll-behavior.md): スクロール領域の境界に達した時の動作を制御するプロパティです。auto、contain、noneの値があり、スクロールチェーン（親要素へのスクロール伝播）を防ぐのに便利です。
- [scroll-margin](https://www.css-dictionary.com/property/scroll-margin.md): スクロールスナップ時のマージンを指定するプロパティです。固定ヘッダーがある場合などに、スクロール位置を調整して要素が隠れないようにできます。
- [mix-blend-mode](https://www.css-dictionary.com/property/mix-blend-mode.md): 要素の内容が背景とどのように混ざり合うかを指定するプロパティです。Photoshopのブレンドモードと同様の効果。
- [background-blend-mode](https://www.css-dictionary.com/property/background-blend-mode.md): 背景画像と背景色、または複数の背景画像同士のブレンド方法を指定するプロパティです。multiply、screen、overlay等の値があり、Photoshopのようなブレンド効果を実現できます。
- [isolation](https://www.css-dictionary.com/property/isolation.md): 新しいスタッキングコンテキストを作成し、ブレンドモードの影響範囲を制限するプロパティです。mix-blend-modeやbackground-blend-modeの効果を特定の要素内に封じ込めるのに使用します。
- [align-self](https://www.css-dictionary.com/property/align-self.md): FlexboxやGridの子要素が個別に縦方向（交差軸）の配置を上書きするプロパティです。親のalign-itemsを上書きし、特定のアイテムだけ異なる配置を実現できます。
- [justify-self](https://www.css-dictionary.com/property/justify-self.md): Grid子要素が個別に横方向（インライン軸）の配置を指定するプロパティです。Flexboxでは効果がない点に注意。
- [grid-column](https://www.css-dictionary.com/property/grid-column.md): グリッドアイテムが占める列の範囲を指定する短縮プロパティです。grid-column-startとgrid-column-endを一括指定。
- [grid-row](https://www.css-dictionary.com/property/grid-row.md): グリッドアイテムが占める行の範囲を指定する短縮プロパティです。grid-row-startとgrid-row-endを一括指定。
- [caret-color](https://www.css-dictionary.com/property/caret-color.md): テキスト入力時のカーソル（キャレット）の色を指定するプロパティです。フォーム要素のブランディングやダークモード対応に便利で、ユーザーの入力体験を向上させます。
- [appearance](https://www.css-dictionary.com/property/appearance.md): フォーム要素などのネイティブな見た目を制御するプロパティです。noneを指定することでブラウザ標準のスタイルを無効化し、カスタムスタイルを適用する際に使用します。
- [outline](https://www.css-dictionary.com/property/outline.md): 要素の周囲に輪郭線を描画するプロパティです。borderと似ていますが、レイアウトに影響しません。フォーカス時の視覚フィードバックに使用され、アクセシビリティの観点から重要です。
- [vertical-align](https://www.css-dictionary.com/property/vertical-align.md): インライン要素やテーブルセルの縦方向の配置を指定するプロパティです。baseline、top、middle、bottom等の値があり、テキストと画像の位置調整に使用します。ブロック要素には効きません。
- [text-transform](https://www.css-dictionary.com/property/text-transform.md): テキストの大文字・小文字を変換するプロパティです。uppercase（全て大文字）、lowercase（全て小文字）、capitalize（各単語の先頭を大文字）などがあり、HTMLを変更せずに表示を制御できます。
- [resize](https://www.css-dictionary.com/property/resize.md): ユーザーが要素のサイズを変更できるかどうかを指定するプロパティです。none、both、horizontal、verticalの値があり、textareaのリサイズ動作を制御できます。
- [scroll-snap](https://www.css-dictionary.com/property/scroll-snap.md): スクロールスナップを使用してスムーズなスクロール体験を提供します。scroll-snap-typeとscroll-snap-alignを組み合わせて使用します。
- [position: sticky](https://www.css-dictionary.com/property/position-sticky.md): スクロール位置に応じて、通常のフローとfixedの間で切り替わる配置方法です。指定した位置に到達するまで通常配置、到達後は固定されます。
- [color-scheme](https://www.css-dictionary.com/property/color-scheme.md): 要素がどのカラースキーム（ライト/ダーク）で表示されるかを示します。ブラウザのフォーム要素などのデフォルトスタイルに影響します。
- [@media (prefers-color-scheme)](https://www.css-dictionary.com/property/prefers-color-scheme.md): ユーザーのシステム設定がライトモードかダークモードかを検出するメディアクエリです。OSのテーマ設定に合わせてサイトの配色を自動で切り替えたい場合に使用します。
- [@media (prefers-reduced-motion)](https://www.css-dictionary.com/property/prefers-reduced-motion.md): ユーザーがアニメーションを減らす設定を有効にしているかを検出するメディアクエリです。アクセシビリティ向上に重要です。
- [Logical Properties](https://www.css-dictionary.com/property/logical-properties.md): 書字方向（横書き・縦書き）に依存しない論理的なプロパティです。margin-inline-start、padding-block-endなど、方向に中立的な指定が可能です。
- [:has()](https://www.css-dictionary.com/property/pseudo-has.md): 「子や後続の要素が条件を満たす親・前の要素」を選択できる擬似クラスです。長年不可能だった『親セレクタ』を実現し、JavaScriptなしで子の状態に応じた親のスタイリングができます。
- [CSSネスティング](https://www.css-dictionary.com/property/css-nesting.md): Sassなどのプリプロセッサなしで、セレクタを入れ子（ネスト）にして書けるネイティブCSS機能です。親子関係のスタイルをまとめて記述でき、&で親セレクタを参照します。ビルドツール不要でSass風の書き心地を実現します。
- [text-wrap](https://www.css-dictionary.com/property/text-wrap.md): テキストの折り返し方法を制御するプロパティです。balanceで見出しの各行の長さを揃え、prettyで段落末尾の孤立した単語（1文字だけの行など）を防げます。日本語の見出しの不格好な改行対策にも有効です。
- [overflow-wrap](https://www.css-dictionary.com/property/overflow-wrap.md): 長い単語やURLが要素からはみ出す場合にのみ、単語の途中で折り返すことを許可するプロパティです。通常の単語間折り返しを保ちながら「はみ出すときだけ」強制改行するため、word-breakより安全な折り返し手段です。
- [color-mix()](https://www.css-dictionary.com/property/color-mix.md): 2つの色を指定した比率で混ぜた色を生成するCSS関数です。ベース色から明るい色・暗い色・半透明色をCSSだけで派生でき、SassのdarkenやJavaScriptでの色計算を置き換えられます。CSS変数と組み合わせるとテーマ設計が大幅に簡潔になります。
- [light-dark()](https://www.css-dictionary.com/property/light-dark.md): ライトモード用とダークモード用の2色を1行で指定できるCSS関数です。メディアクエリで変数を二重定義する従来のダークモード実装を大幅に簡潔にできます。使用にはcolor-scheme: light darkの指定が必須です。
- [margin-inline](https://www.css-dictionary.com/property/margin-inline.md): インライン方向（横書きなら左右）のマージンをまとめて指定する論理プロパティです。margin-left/rightと違い、アラビア語などのRTL言語や縦書きでも意図通りのレイアウトになります。margin-inline: autoで中央寄せも書けます。
- [padding-inline](https://www.css-dictionary.com/property/padding-inline.md): インライン方向（横書きなら左右）のパディングをまとめて指定する論理プロパティです。padding-left/rightの1行版として便利なうえ、RTL言語や縦書きでも意図が保たれます。コンテナの左右余白の定番の書き方になりつつあります。
- [inset-inline](https://www.css-dictionary.com/property/inset-inline.md): position指定した要素のインライン方向（横書きなら左右）のオフセットをまとめて指定する論理プロパティです。left/rightの論理版で、RTL言語ではミラーリングされるため国際化対応のUI配置に適しています。
- [@property](https://www.css-dictionary.com/property/at-property.md): CSS変数（カスタムプロパティ）に型・初期値・継承の有無を登録できるアットルールです。型を登録した変数はtransitionやanimationで補間可能になり、グラデーションのアニメーションなど従来不可能だった表現がCSSだけで実現できます。
- [@starting-style](https://www.css-dictionary.com/property/at-starting-style.md): 要素が最初に表示された瞬間の「開始スタイル」を定義するアットルールです。display: noneからの表示やDOM追加直後の要素に、JavaScriptなしでフェードインなどの出現アニメーションを付けられます。transition-behavior: allow-discreteとの併用が定番です。
- [view-transition-name](https://www.css-dictionary.com/property/view-transition-name.md): View Transitions APIで、状態変化の前後で「同じ要素」として扱う名前を付けるプロパティです。一覧→詳細への画像モーフのような遷移アニメーションを、ブラウザが前後のスナップショットから自動生成してくれます。
- [animation-timeline](https://www.css-dictionary.com/property/animation-timeline.md): アニメーションの進行を時間ではなくスクロール位置に連動させるプロパティです（スクロール駆動アニメーション）。読了プログレスバーやパララックス、ビューポートに入ったら動き出す演出をJavaScriptなしで実装できます。
- [アンカーポジショニング](https://www.css-dictionary.com/property/anchor-positioning.md): ツールチップやドロップダウンを「基準要素（アンカー）」に紐付けて配置できる機能群です。anchor-nameで基準を宣言し、position-anchorとposition-areaで相対配置します。JSライブラリで行っていた位置計算をCSSだけで実現できます。
- [@layer](https://www.css-dictionary.com/property/cascade-layers.md): スタイルの優先順位を詳細度ではなく「レイヤーの宣言順」で管理するカスケードレイヤーです。reset・base・components・utilitiesのような層に分ければ、詳細度バトルや!importantの乱用を根本から解消できます。
- [@scope](https://www.css-dictionary.com/property/at-scope.md): スタイルの適用範囲を特定の要素の部分木に限定するアットルールです。下限（to）も指定でき、「カードの中だけ、ただし埋め込みウィジェットの中は除く」のような範囲指定が可能。BEM的な命名規則に頼らないスコープ管理を実現します。
- [field-sizing](https://www.css-dictionary.com/property/field-sizing.md): テキストエリアや入力欄のサイズを入力内容に合わせて自動で伸縮させるプロパティです。field-sizing: contentを指定するだけで、これまでJavaScriptで実装していたtextareaの自動リサイズが不要になります。
- [:user-valid / :user-invalid](https://www.css-dictionary.com/property/pseudo-user-valid.md): ユーザーが実際に操作した後にのみ、フォーム入力の検証結果に応じてスタイルを適用する擬似クラスです。:invalidと違いページ表示直後の未入力フォームが赤くならないため、実用的なバリデーション表示がCSSだけで実現できます。
- [:focus-within](https://www.css-dictionary.com/property/pseudo-focus-within.md): 自分自身または子孫要素にフォーカスがあるときにマッチする擬似クラスです。入力中の検索ボックス全体をハイライトしたり、フォーカスでドロップダウンを開いたりと、「中にフォーカスがある親」の装飾がJavaScriptなしで書けます。
- [interpolate-size](https://www.css-dictionary.com/property/interpolate-size.md): height: autoのような「キーワード値」へのtransition/animationを可能にするプロパティです。アコーディオンの開閉など「0から自然な高さまで」のアニメーションが、max-heightハックやJavaScriptなしで書けるようになります。
- [text-spacing-trim](https://www.css-dictionary.com/property/text-spacing-trim.md): 日本語の約物（括弧・句読点など）が持つ余分な空きを自動調整するプロパティです。「（」の前や連続する約物「）。」の間の空きを詰めて、組版ソフトのような美しい日本語テキストをWebで実現します。
- [oklch()](https://www.css-dictionary.com/property/oklch.md): 人間の知覚に基づくOKLCH色空間で色を指定する関数です。明度（L）・彩度（C）・色相（H）で直感的に色を操作でき、明度を変えても見た目の明るさが揃うためカラーパレット設計に最適です。Display P3などの広色域も表現できます。

## アニメーション実装集

- [カードのリフト（浮き上がり）](https://www.css-dictionary.com/animations/hover-lift.md): ホバーでカードがふわっと浮き上がる定番エフェクト。translateと二段構えの影で自然な浮遊感を作ります。
- [ボタンの光沢スイープ](https://www.css-dictionary.com/animations/hover-shine.md): ホバーで光の帯がボタンを横切るシャインエフェクト。擬似要素+グラデーション+transformだけで実装できます。
- [リンク矢印のナッジ](https://www.css-dictionary.com/animations/hover-arrow-nudge.md): 「詳しく見る →」の矢印がホバーで前に動くマイクロインタラクション。1行のtransitionで完結する最小の気配りです。
- [ホバーで伸びる下線](https://www.css-dictionary.com/animations/text-hover-underline.md): テキストリンクにホバーすると、左から右へ滑らかに下線が伸びるアニメーション。ナビゲーションの定番エフェクトです。
- [ホバーで画像ズーム](https://www.css-dictionary.com/animations/hover-image-zoom.md): 枠のサイズは変えずに、中の画像だけがゆっくり拡大するホバーエフェクト。ギャラリーや商品カードの定番です。
- [リングスピナー](https://www.css-dictionary.com/animations/spinner-ring.md): 最も定番のローディングスピナー。border+border-radius+rotateの3点セットで、画像なしの数行で実装できます。
- [3点ドットローダー](https://www.css-dictionary.com/animations/spinner-dots.md): 3つのドットが順番に跳ねるローダー。animation-delayをずらすだけで「順番に動く」リズムが生まれます。
- [スケルトンスクリーン](https://www.css-dictionary.com/animations/skeleton-shimmer.md): コンテンツ読み込み中のプレースホルダー。グラデーションのbackground-positionを動かして「光が流れる」質感を作ります。
- [順次フェードイン（スタッガー）](https://www.css-dictionary.com/animations/fade-up-stagger.md): リスト項目が下から順番にふわっと現れる入場アニメーション。animation-delayの時間差で「流れ」を作ります。
- [DOM追加時のフェードイン（@starting-style）](https://www.css-dictionary.com/animations/entry-starting-style.md): JavaScriptなしで「要素が追加された瞬間」にアニメーションする最新手法。トースト通知や動的リストの定番になりつつあります。
- [スクロールで現れる要素（scroll-driven）](https://www.css-dictionary.com/animations/scroll-reveal.md): スクロールに連動して要素がフェードインする演出を、JavaScriptなしのanimation-timeline: view()で実装します。
- [タイプライター](https://www.css-dictionary.com/animations/typewriter.md): 文字が1文字ずつ打たれていくタイプライター演出。steps()イージングとwidthアニメーション、点滅キャレットの組み合わせです。
- [流れるグラデーションテキスト](https://www.css-dictionary.com/animations/text-gradient-flow.md): 文字の中をグラデーションが流れ続けるヒーロー見出し向けの演出。background-clip: textが主役です。
- [波打つテキスト](https://www.css-dictionary.com/animations/text-wave.md): 1文字ずつ上下に波打つ楽しげなテキスト演出。文字をspanに分けてanimation-delayをずらすスタッガーの応用です。
- [いいねのポップ](https://www.css-dictionary.com/animations/heart-pop.md): ハートを押すと弾んで膨らむ「いいね」アニメーション。checkboxハックとオーバーシュートするイージングが鍵です。
- [エラーシェイク](https://www.css-dictionary.com/animations/shake-error.md): 入力エラーをプルプルと震えて知らせるフィードバック。:user-invalidと組み合わせるとJavaScriptなしで動きます。
- [トグルスイッチ](https://www.css-dictionary.com/animations/toggle-switch.md): iOS風のオン/オフスイッチ。checkbox+擬似要素+transitionの組み合わせで、ノブの移動に弾みを付けます。
- [動くグラデーション背景](https://www.css-dictionary.com/animations/gradient-flow-bg.md): ヒーローセクション向けの、ゆっくり揺らめくグラデーション背景。background-positionだけを動かす軽量な実装です。
- [パルスリング（波紋）](https://www.css-dictionary.com/animations/pulse-ring.md): 通知ドットやライブ配信中バッジで使われる、波紋が広がり続ける演出。scaleとopacityの同時アニメーションです。
- [ふわふわ浮かぶ玉](https://www.css-dictionary.com/animations/floating-blobs.md): 背景装飾の定番、ゆっくり漂う半透明の円。duration違いの同じアニメーションを重ねて有機的な動きを作ります。

## UIレシピ集

- [ローディング状態付きボタン](https://www.css-dictionary.com/recipes/loading-button.md): 押すとスピナーが回り「保存中…」に変わるボタン。二重送信を防ぎ、aria-busyで処理中であることを支援技術にも伝えます。
- [コピー完了フィードバックボタン](https://www.css-dictionary.com/recipes/copy-feedback-button.md): コードスニペット横の「コピー」ボタン。押すと2秒間「コピーしました」に変わり、色でも完了を伝えるマイクロインタラクションです。
- [セグメンテッドコントロール](https://www.css-dictionary.com/recipes/segmented-control.md): iOS風の切り替えスイッチをradioボタンで実装。見た目はCSSだけで作り、キーボード操作とフォーム送信はブラウザ標準のまま使えます。
- [フローティングアクションボタン](https://www.css-dictionary.com/recipes/fab.md): 画面右下に追従する円形のアクションボタン（FAB）。position: fixedとinsetの1行で配置し、ホバーで浮き上がります。
- [よく使うボタンデザイン10選](https://www.css-dictionary.com/recipes/button-designs-10.md): モダンなWebサイトでよく使われるボタンデザインのパターン集です。基本的なボタンからトレンドのガラスモーフィズムまで、様々なシーンで使えるデザインテクニックを紹介します。
- [数量ステッパー（−／＋）](https://www.css-dictionary.com/recipes/quantity-stepper.md): ECのカートで使う数量選択UI。number入力の標準スピナーを消して−／＋ボタンを自作し、最小・最大値でクランプします。
- [アイコンだけのボタン](https://www.css-dictionary.com/recipes/icon-only-button.md): お気に入り・共有・メニューなどのアイコンボタン。44pxのタップ領域とaria-labelで、小さく見えても押しやすく意味が伝わるボタンにします。
- [連結ボタングループ](https://www.css-dictionary.com/recipes/button-group.md): 「日・週・月」のような切り替えに使う連結ボタン。枠線を1px重ねて一体化し、両端だけ:first-child/:last-childで角丸にします。
- [記事カード（画像＋タグ）](https://www.css-dictionary.com/recipes/article-card.md): ブログ一覧で使う記事カード。サムネイル・タグ・タイトル・抜粋・日付の定番構成を、aspect-ratioとoverflowで崩れないように組みます。
- [プロフィールカード](https://www.css-dictionary.com/recipes/profile-card.md): アバター・名前・肩書き・フォローボタンを縦に積んだプロフィールカード。円形アバターと中央揃えの基本形です。
- [横並びメディアカード](https://www.css-dictionary.com/recipes/media-card.md): サムネイルが左、テキストが右の横並びカード。flex-shrink: 0で画像の潰れを防ぎ、長いタイトルは省略記号で丸めます。
- [ホバーで詳細が現れるカード](https://www.css-dictionary.com/recipes/hover-reveal-card.md): ホバーまたはキーボードフォーカスで、下からオーバーレイがスライドして詳細が現れるカード。focus-within対応でキーボードでも使えます。
- [おしゃれな料金テーブルデザイン](https://www.css-dictionary.com/recipes/pricing-table-design.md): プランやサービスの料金表示に使えるモダンな料金テーブルデザインです。カードスタイルとホバー効果、人気プランの強調表示などを組み合わせた実用的なデザインテクニックです。
- [統計カード（KPI表示）](https://www.css-dictionary.com/recipes/stat-card.md): ダッシュボードで使う数値カード。tabular-numsで桁を揃え、増減は色と矢印記号の両方で伝える色覚フレンドリーな作りです。
- [商品カード（星評価・価格つき）](https://www.css-dictionary.com/recipes/product-card.md): EC一覧で使う商品カード。正方形サムネイル・星評価・税込価格・カートボタンの定番構成で、評価はaria-labelで数値も伝えます。
- [お客様の声カード](https://www.css-dictionary.com/recipes/testimonial-card.md): LPで使う推薦文（テスティモニアル）カード。blockquoteの正しいマークアップに、大きな引用符の装飾とアバター付き署名を組み合わせます。
- [フローティングラベル入力欄](https://www.css-dictionary.com/recipes/floating-label-input.md): フォーカスまたは入力済みのときにラベルが小さく上へ移動する入力欄。placeholderと:placeholder-shownを使いJSなしで実現します。
- [リアルタイムバリデーション表示](https://www.css-dictionary.com/recipes/validated-input.md): 入力し終えてから初めてエラーを表示するメール入力欄。:user-invalidと:has()により、JSなしで「入力前に怒らない」検証UIを作ります。
- [カスタムチェックボックス](https://www.css-dictionary.com/recipes/custom-checkbox.md): appearance: noneでブラウザ標準の見た目を外し、input要素自体をデザインするチェックボックス。キーボード操作もラベル連動もそのまま生きます。
- [スタイル済みレンジスライダー](https://www.css-dictionary.com/recipes/styled-range.md): 音量調整などに使うrangeスライダーの装飾。appearance: noneでトラックとつまみを自作し、ブラウザごとの見た目の差をなくします。
- [検索ボックス（クリアボタン付き）](https://www.css-dictionary.com/recipes/search-input.md): アイコンとクリアボタンを内蔵した検索入力欄。ブラウザごとに見た目が違う標準の×ボタンを消して、自前のクリアに統一します。
- [カスタムセレクトボックス](https://www.css-dictionary.com/recipes/custom-select.md): appearance: noneで標準の見た目を外し、矢印を自作したセレクトボックス。ブラウザ間の見た目の差をなくしつつ、キーボード操作は標準のままです。
- [入力に合わせて伸びるテキストエリア](https://www.css-dictionary.com/recipes/auto-grow-textarea.md): field-sizing: contentだけで、入力量に応じて高さが自動で伸びるテキストエリア。従来JSが必須だった挙動がCSS1行になりました。
- [パンくずリスト](https://www.css-dictionary.com/recipes/breadcrumb.md): 現在地を示すパンくずリスト。olとaria-labelで意味づけし、区切り記号はCSSの擬似要素で入れるためHTMLが汚れません。
- [CSSのみのタブ切り替え](https://www.css-dictionary.com/recipes/css-tabs.md): radioボタンと:has()だけで作るタブUI。JSなしでパネルが切り替わり、キーボードの矢印キー操作もradio標準のまま使えます。
- [ドロワーメニュー](https://www.css-dictionary.com/recipes/drawer-menu.md): ハンバーガーボタンで左からスライドして開くドロワー。transformでの開閉と背景オーバーレイ、aria-expandedの更新を最小のJSで行います。
- [ページネーション](https://www.css-dictionary.com/recipes/pagination.md): 記事一覧の下に置くページ送りナビ。現在ページはaria-current="page"で示し、タップしやすい36px四方のリンクをgapで等間隔に並べます。
- [シンプルなドロップダウンメニュー](https://www.css-dictionary.com/recipes/simple-dropdown-menu.md): CSSだけで実装できるシンプルなドロップダウンメニューのテクニックです。ホバーやフォーカスでメニューを表示し、ナビゲーションやアクションリストに使えます。
- [ページ内目次（スムーススクロール）](https://www.css-dictionary.com/recipes/smooth-anchor-nav.md): 記事の目次からページ内リンクで滑らかに移動するナビ。scroll-behaviorとscroll-marginの2プロパティで、JSなしで完成します。
- [ステップインジケーター](https://www.css-dictionary.com/recipes/step-indicator.md): 購入フローなどの進捗を示すステップ表示。番号の丸を線でつなぎ、完了・現在地・未到達を色分けします。現在地はaria-currentで伝えます。
- [ページトップへ戻るボタン](https://www.css-dictionary.com/recipes/back-to-top.md): 右下に固定される「↑ トップへ」ボタン。アンカーリンクとscroll-behaviorだけのJSなし実装で、どのページにもすぐ足せます。
- [モーダルダイアログ](https://www.css-dictionary.com/recipes/modal-dialog.md): HTML標準の<dialog>要素で作るモーダル。フォーカス管理とEscで閉じる挙動はブラウザ任せにでき、JSは開閉の数行だけです。
- [ツールチップ（CSSのみ）](https://www.css-dictionary.com/recipes/tooltip-css.md): 用語にホバーまたはフォーカスすると上に説明が浮かぶツールチップ。opacityとvisibilityの併用でJSなしのフェード表示を実現します。
- [アコーディオン（FAQ）](https://www.css-dictionary.com/recipes/accordion.md): HTML標準の<details>で作る開閉式FAQ。開閉ロジックはブラウザ任せで、CSSは見た目と「＋」印の回転だけを担当します。
- [トースト通知](https://www.css-dictionary.com/recipes/toast.md): 画面右下にスライドインする通知トースト。role="status"で支援技術にも伝え、prefers-reduced-motionでは動きなしで表示します。
- [テーブルで横スクロール可能にする](https://www.css-dictionary.com/recipes/scrollable-table.md): 画面幅が狭い時にテーブル全体を横スクロールできるようにするテクニックです。レスポンシブ対応やデータ量の多い表で便利です。
- [バッジ・通知ドット](https://www.css-dictionary.com/recipes/badge-notification.md): アイコン右上の未読数バッジと、NEW・SALEなどのラベルバッジ。数はaria-labelで伝え、2桁でも崩れないmin-width設計にします。
- [アラート・コールアウト4種](https://www.css-dictionary.com/recipes/alert-callout.md): 情報・成功・注意・エラーの4種類のメッセージ枠。色だけに頼らず、アイコンと接頭辞テキストの3重で種類を伝える設計です。
- [プログレスバー](https://www.css-dictionary.com/recipes/progress-bar.md): HTML標準の<progress>要素をスタイリングした進捗バー。意味付けはブラウザ任せで、装飾だけをCSSで整えます。
- [縦タイムライン](https://www.css-dictionary.com/recipes/vertical-timeline.md): 配送状況や更新履歴に使う縦のタイムライン。点と線は疑似要素だけで描き、リスト構造とtime要素で意味も正しく保ちます。
- [料金プラン比較表](https://www.css-dictionary.com/recipes/plan-comparison-table.md): 機能×プランの比較テーブル。scope属性で行列の対応を正しく伝え、おすすめ列の縦ハイライトと✓/×の色分けで見やすくします。
- [チャット吹き出し](https://www.css-dictionary.com/recipes/chat-bubbles.md): メッセージUIの吹き出し。相手は左・自分は右に寄せ、発話者側の下角だけborder-radiusを小さくするモダンな尻尾表現です。
- [左右片方だけinner幅を超えて横幅いっぱいにする](https://www.css-dictionary.com/recipes/full-bleed-side.md): 親のpaddingやmax-widthに制限されず、片側だけ画面端まで背景や装飾を広げたい時に使えるテクニックです。主にカードやセクションの背景装飾などで活躍します。
- [子要素の高さを揃えてコンテンツを上下中央](https://www.css-dictionary.com/recipes/equal-height-center.md): 複数の子要素を同じ高さに揃えつつ、各子要素内のコンテンツを上下中央に配置するテクニックです。カードレイアウトやリストでよく使います。
- [ヒーローセクション](https://www.css-dictionary.com/recipes/hero-section.md): ファーストビューの中央寄せヒーロー。place-itemsによる一発センタリングと、clamp()による画面幅連動の見出しサイズが柱です。
- [聖杯レイアウト（Grid）](https://www.css-dictionary.com/recipes/holy-grail.md): ヘッダー・サイドバー・メイン・フッターの全体骨格をgrid-template-areasで組む定番構成。エリア名の並びがそのまま画面の設計図になります。
- [レスポンシブカードグリッド](https://www.css-dictionary.com/recipes/responsive-card-grid.md): メディアクエリなしで列数が自動調整されるカードグリッド。repeat(auto-fit, minmax())の1行がこのレシピの本体です。
- [スティッキーヘッダー＋最下部フッター](https://www.css-dictionary.com/recipes/sticky-header-footer.md): スクロールしても上部に残る半透明ヘッダーと、内容が少なくても最下部に付くフッター。ページ全体骨格の実用テンプレートです。
- [左右分割ヒーロー](https://www.css-dictionary.com/recipes/split-hero.md): 画像半分・テキスト半分の2カラムヒーロー。gridの2カラムを、狭い画面ではメディアクエリで縦積みに切り替える定番構成です。
- [ログイン画面の骨格](https://www.css-dictionary.com/recipes/login-card-page.md): 画面中央にフォームカードを置く認証ページの骨格。place-itemsの中央配置とmax-widthで、どの画面幅でも整うテンプレートです。
- [コンテナクエリで変形するカード](https://www.css-dictionary.com/recipes/container-query-card.md): 置かれた場所の幅に応じて縦型⇄横型に切り替わるカード。ビューポートではなく親要素を基準にする@containerの実践例です。
- [画像ギャラリー（メイン＋タイル）](https://www.css-dictionary.com/recipes/image-gallery.md): 1枚目を大きく見せるタイル型フォトギャラリー。grid-column/grid-rowのspan指定だけで、雑誌のような変則グリッドが作れます。

## AI協働

- [AI生成CSSレビューチェックリスト](https://www.css-dictionary.com/ai-review.md): AIがよく間違えるポイント全127項目をプロパティ別に集約した観点集

## Tailwind対応

- [CSS⇄Tailwind対応表](https://www.css-dictionary.com/tailwind.md): CSSプロパティとTailwindユーティリティ・バリアントの対応表（119項目、v4基準）

## 比較でわかるCSS（違いの解説）

- [word-break と overflow-wrap の違い](https://www.css-dictionary.com/compare/word-break-vs-overflow-wrap.md): はみ出し対策の第一選択はoverflow-wrap: break-word。word-break: break-allは英単語もぶつ切りにする強い指定で、表の詰め込みなど限定的な場面用です。
- [Flexbox と Grid の違い（使い分け）](https://www.css-dictionary.com/compare/flex-vs-grid.md): 1方向の並び（ナビ、ボタン列、中央寄せ）はflex、行と列を同時に制御するレイアウト（カード一覧、ページ骨格）はgrid。「デザインが表・格子に見えるならgrid」が目安です。
- [display: none / visibility: hidden / opacity: 0 の違い](https://www.css-dictionary.com/compare/display-none-vs-visibility-vs-opacity.md): 完全に消すならdisplay: none、領域を保ったまま隠すならvisibility: hidden、フェードで見せ隠しするならopacity（+visibility併用）。opacity: 0は見えないのにクリックできてしまう点に注意。
- [margin と padding の違い](https://www.css-dictionary.com/compare/margin-vs-padding.md): 要素の「外」との距離がmargin、要素の「中」の余白がpadding。背景色を含めたい・クリック範囲を広げたいならpadding、隣との間隔を空けたいならmargin（またはgap）です。
- [transition と animation の違い](https://www.css-dictionary.com/compare/transition-vs-animation.md): hover・クラス切替など「状態の変化」に反応させるならtransition、読み込み時から自動で動く・ループする・多段階の動きならanimation（@keyframes）です。
- [position: absolute / fixed / sticky の違い](https://www.css-dictionary.com/compare/absolute-vs-fixed-vs-sticky.md): 祖先基準で自由配置がabsolute、画面に完全固定がfixed、「閾値まで通常・そこから貼り付き」がsticky。fixedはtransform等を持つ祖先がいると画面基準でなくなる罠があります。
- [@media と @container の違い](https://www.css-dictionary.com/compare/media-vs-container.md): ページ全体のレイアウト分岐は@media、置かれた場所の幅で変わるべき「部品」は@container。コンポーネント指向の開発では@containerが主役になりつつあります。
- [auto-fit と auto-fill の違い](https://www.css-dictionary.com/compare/auto-fit-vs-auto-fill.md): 違いが出るのはアイテムが少ないとき。auto-fitは空きトラックを潰してアイテムを広げ、auto-fillは空きトラックを残してアイテム幅を保ちます。
- [gap と margin の違い（要素間の余白）](https://www.css-dictionary.com/compare/gap-vs-margin.md): flex/gridの「アイテム間」の等間隔はgap一択。外周には付かず、打ち消しも相殺もない。marginは外周の余白や個別の例外調整に使います。
- [:focus-visible と :focus-within の違い](https://www.css-dictionary.com/compare/focus-visible-vs-focus-within.md): 「キーボード操作のときだけスタイルを出す」のが:focus-visible、「子孫にフォーカスがあるとき親に効かせる」のが:focus-within。判定軸が違う直交概念なので、:has(:focus-visible)で組み合わせることもできます。

## 逆引き

- [CSS逆引きリファレンス](https://www.css-dictionary.com/reverse.md): やりたいこと（53のユースケース）から関連プロパティを引く一覧

## Optional

- [全コンテンツ連結版](https://www.css-dictionary.com/llms-full.txt): 全プロパティ・テクニックのMarkdownを1ファイルに連結したもの