ページを読み込んでいます
CSSプロパティとパターンをカテゴリ別にまとめたチートシート。セレクター、Flexbox、Grid、ボックスモデル、タイポグラフィ、レイアウト、ビジュアルエフェクトを検索・コピーできます。
検索欄にプロパティ名を入力するか、カテゴリ（Flexbox、Gridなど）でフィルタリングして目的のプロパティを見つけます。
各CSSプロパティの説明、構文、使用できる値を確認します。
コピーボタンをクリックしてプロパティ名をクリップボードにコピーし、スタイルシートですぐに使えます。
element { }.classname { }#idname { }[attr], [attr=value], [attr^=value]selector:pseudo-class { }selector::pseudo-element { }A B, A > B, A + B, A ~ Bdisplay: flex | inline-flexflex-direction: row | row-reverse | column | column-reversejustify-content: flex-start | flex-end | center | space-between | space-around | space-evenlyalign-items: stretch | flex-start | flex-end | center | baselineflex-wrap: nowrap | wrap | wrap-reversegap: <row-gap> <column-gap>flex-grow: <number>flex-shrink: <number>flex-basis: auto | <length> | <percentage>display: grid | inline-gridgrid-template-columns: <track-list>grid-template-rows: <track-list>gap: <row-gap> <column-gap>grid-column: <start> / <end>grid-row: <start> / <end>place-items: <align-items> <justify-items>margin: <top> <right> <bottom> <left>padding: <top> <right> <bottom> <left>border: <width> <style> <color>box-sizing: content-box | border-boxwidth: <value>; height: <value>overflow: visible | hidden | scroll | autofont-size: <length> | <percentage> | keywordfont-weight: normal | bold | <number>line-height: normal | <number> | <length>text-align: left | right | center | justifytext-decoration: none | underline | line-through | overlineword-break: normal | break-all | keep-all | break-wordposition: static | relative | absolute | fixed | stickydisplay: block | inline | inline-block | none | ...z-index: auto | <integer>float: none | left | right | inline-start | inline-endclear: none | left | right | bothbackground: <color> | url() | linear-gradient()color: <color>opacity: <number between 0 and 1>box-shadow: <offset-x> <offset-y> <blur> <spread> <color>border-radius: <length> | <percentage>transform: <function>transition: <property> <duration> <timing> <delay>animation: <name> <duration> <timing> <delay> <iteration> <direction>CSSチートシートは、よく使うCSSプロパティとパターンをまとめたリファレンスです。基本的なセレクターやボックスモデルから、FlexboxやGridなどのモダンなレイアウト技術、タイポグラフィ、ビジュアルエフェクトまで幅広くカバーしています。各プロパティには説明、構文、使用できる値の例が含まれており、素早くCSSを書くのに役立ちます。
Flexboxは1次元のレイアウト方法で、アイテムを1行または1列に並べるために設計されています。CSSグリッドは2次元のレイアウトシステムで、行と列を同時に扱えます。コンポーネントレベルのレイアウトにはFlexbox、ページレベルや複雑な2次元レイアウトにはGridを使うのが一般的です。
paddingは要素の内側のスペースで、コンテンツとボーダーの間にあります。marginは要素の外側のスペースで、ボーダーと周囲の要素の間にあります。背景色はpaddingには適用されますが、marginには適用されません。
デフォルト（content-box）では、widthとheightはコンテンツ領域にのみ適用されます。border-boxを使うと、widthとheightにpaddingとborderが含まれるため、要素のサイズを予測しやすくなります。最近のCSSリセットはほとんどすべての要素にborder-boxを適用しています。
absoluteは最も近い配置済み祖先要素（positionがstaticでない祖先）を基準に配置されます。fixedはビューポートを基準に配置され、スクロールしても位置が変わりません。スティッキーヘッダー、モーダル、フローティングボタンにはfixedを使います。
transitionは一つの状態から別の状態へのプロパティ変化をアニメーション化し、通常は:hoverなどのユーザー操作によって発動します。animationは@keyframesを使って複数ステップのアニメーションを定義でき、自動実行、ループ、逆再生ができます。シンプルな状態変化にはtransition、複雑で自律的な動きにはanimationを使います。