CSS チートシート
検索・印刷できる CSS のリファレンス — セレクタ、ボックスモデル、flexbox、grid、タイポグラフィ、トランジション、モダンな機能。無料。
セレクタ
13.class
そのクラスの全要素を選択
#id
その id の要素を選択
a, b
グループ: a と b を選択
a b
子孫: a 内の b
a > b
a の直接の子 b
a + b
a の直後の隣接兄弟
a ~ b
a の後の一般兄弟 b
[type="text"]
属性セレクタ
:hover :focus
状態の擬似クラス
:nth-child(2n)
偶数番目の子すべて
::before ::after
擬似要素 (生成コンテンツ)
:not(.x)
否定: .x 以外すべて
:is(h1, h2, h3)
リスト内のいずれかのセレクタに一致
ボックスモデル
7box-sizing: border-box;
幅にパディングとボーダーを含める
margin: 0 auto;
ブロックを水平中央寄せ
padding: 1rem 2rem;
垂直 1rem、水平 2rem
border: 1px solid #ccc;
幅、スタイル、色
border-radius: 8px;
角丸
outline: 2px dashed red;
アウトライン (レイアウトに影響なし)
overflow: hidden;
はみ出したコンテンツを切り取る
フレックスボックス
8display: flex;
フレックスコンテナを作成
flex-direction: row | column;
主軸の方向
justify-content: space-between;
主軸方向に揃える
align-items: center;
交差軸方向に揃える
flex-wrap: wrap;
アイテムの折り返しを許可
gap: 1rem;
アイテム間の間隔
flex: 1;
拡大して空間を埋める (1 1 0)
align-self: flex-end;
1 つのアイテムの交差軸を上書き
グリッド
8display: grid;
グリッドコンテナを作成
grid-template-columns: 1fr 1fr 1fr;
等幅の 3 列
repeat(3, 1fr)
繰り返しトラックの省略記法
minmax(200px, 1fr)
最小と最大の間のトラック
grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
レスポンシブな自動列
gap: 1rem;
行と列の間隔
grid-column: 1 / 3;
ライン 1 から 3 にまたがる
place-items: center;
両軸でアイテムを中央寄せ
タイポグラフィ
8font-family: system-ui, sans-serif;
フォントスタック
font-size: 1.125rem;
相対フォントサイズ
font-weight: 600;
太字のウェイト
line-height: 1.6;
行間
letter-spacing: .02em;
字間
text-align: center;
テキストの水平揃え
text-transform: uppercase;
文字の大小を変更
text-overflow: ellipsis;
… で切り詰め (overflow+nowrap が必要)
色と背景
7color: #1f2937;
文字色
background: rgb(0 0 0 / 50%);
アルファ付きのモダンな rgb
background: linear-gradient(90deg,#f06,#48f);
線形グラデーション
opacity: .5;
要素の透明度
box-shadow: 0 4px 12px rgb(0 0 0 / .15);
ドロップシャドウ
background-size: cover;
画像を覆うように拡大
color-mix(in srgb, red 40%, blue);
2 色を混合
配置
6position: relative;
通常位置からのオフセット
position: absolute;
最も近い位置指定された祖先を基準
position: fixed;
ビューポートを基準
position: sticky; top: 0;
スクロールで通過すると固定
inset: 0;
top/right/bottom/left = 0
z-index: 10;
重ね順
トランジションとアニメーション
5transition: all .2s ease;
プロパティの変化をアニメーション
transform: translateY(-4px) scale(1.05);
移動、拡大縮小、回転
@keyframes spin { to { transform: rotate(360deg); } }
アニメーションを定義
animation: spin 1s linear infinite;
キーフレームアニメーションを実行
will-change: transform;
ブラウザに最適化のヒントを与える
レスポンシブとモダン
7@media (max-width: 768px) { ... }
メディアクエリのブレークポイント
clamp(1rem, 2vw, 2rem)
min/max を持つ可変値
aspect-ratio: 16 / 9;
アスペクト比を維持
var(--brand)
カスタムプロパティを使用
:root { --brand: #4f46e5; }
カスタムプロパティを定義
container-type: inline-size;
コンテナクエリを有効化
@container (min-width: 400px) {…}
コンテナクエリ
「:q」に一致する項目はありません。
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。