CSSチートシート

構文

element { }

使用できる値

• div { } — すべてのdiv要素を選択
• p { } — すべてのp要素を選択
• h1 { } — すべてのh1見出しを選択
• a { } — すべてのアンカー要素を選択

構文

.classname { }

使用できる値

• .btn { } — class='btn'の要素をすべて選択
• .btn.primary { } — 両方のクラスを持つ要素を選択
• div.card { } — class='card'のdiv要素を選択

構文

#idname { }

使用できる値

• #header { } — id='header'の要素を選択
• #nav { } — id='nav'の要素を選択

構文

[attr], [attr=value], [attr^=value]

使用できる値

• [href] { } — href属性を持つ要素
• [type="text"] { } — type=textのinput要素
• [class^="btn"] { } — classが'btn'で始まる要素
• [href$=".pdf"] { } — hrefが.pdfで終わる要素

構文

selector:pseudo-class { }

使用できる値

• :hover — マウスオーバー状態
• :focus — フォーカスされた要素
• :nth-child(n) — n番目の子要素
• :first-child — 最初の子要素
• :not(selector) — セレクターに一致しない要素

構文

selector::pseudo-element { }

使用できる値

• ::before — 要素の前にコンテンツを挿入
• ::after — 要素の後にコンテンツを挿入
• ::first-line — テキストの最初の行にスタイルを適用
• ::placeholder — プレースホルダーテキストのスタイル

構文

A B, A > B, A + B, A ~ B

使用できる値

• A B { } — Aの子孫であるB
• A > B { } — Aの直接の子であるB
• A + B { } — Aの直後にある兄弟のB
• A ~ B { } — Aの後にある兄弟のすべてのB

構文

display: flex | inline-flex

使用できる値

• flex — ブロックレベルのFlexコンテナ
• inline-flex — インラインレベルのFlexコンテナ

構文

flex-direction: row | row-reverse | column | column-reverse

使用できる値

• row — 左から右（デフォルト）
• row-reverse — 右から左
• column — 上から下
• column-reverse — 下から上

構文

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly

使用できる値

• flex-start — 先頭に配置（デフォルト）
• flex-end — 末尾に配置
• center — 中央に配置
• space-between — アイテム間に均等なスペース
• space-around — アイテムの周囲に均等なスペース
• space-evenly — アイテム間と周囲に均等なスペース

構文

align-items: stretch | flex-start | flex-end | center | baseline

使用できる値

• stretch — アイテムを伸ばして埋める（デフォルト）
• flex-start — 交差軸の始点に配置
• flex-end — 交差軸の終点に配置
• center — 交差軸の中央に配置
• baseline — テキストのベースラインで揃える

構文

flex-wrap: nowrap | wrap | wrap-reverse

使用できる値

• nowrap — 1行に収める（デフォルト）
• wrap — 次の行に折り返す
• wrap-reverse — 逆方向に折り返す

構文

gap: <row-gap> <column-gap>

使用できる値

• gap: 16px — すべての方向に16px
• gap: 8px 16px — 行間8px、列間16px
• row-gap: 8px — 行間のみ
• column-gap: 16px — 列間のみ

構文

flex-grow: <number>

使用できる値

• 0 — 伸長しない（デフォルト）
• 1 — 空きスペースを均等に埋める
• 2 — flex-grow: 1の2倍の速さで伸長

構文

flex-shrink: <number>

使用できる値

• 1 — 必要に応じて縮小（デフォルト）
• 0 — 縮小しない
• 2 — flex-shrink: 1の2倍の速さで縮小

構文

flex-basis: auto | <length> | <percentage>

使用できる値

• auto — 自然なサイズを使用（デフォルト）
• 0 — ゼロから開始
• 200px — 200pxから開始
• 50% — コンテナの50%から開始

構文

display: grid | inline-grid

使用できる値

• grid — ブロックレベルのグリッドコンテナ
• inline-grid — インラインレベルのグリッドコンテナ

構文

grid-template-columns: <track-list>

使用できる値

• repeat(3, 1fr) — 3列均等
• 200px 1fr 200px — 固定・可変・固定
• repeat(auto-fill, minmax(200px, 1fr)) — レスポンシブ列
• repeat(auto-fit, minmax(150px, 1fr)) — auto-fit列

構文

grid-template-rows: <track-list>

使用できる値

• 100px 1fr — ヘッダー固定、メイン可変
• repeat(3, 100px) — 100pxの行を3つ
• auto — コンテンツに合わせたサイズ
• minmax(100px, auto) — 最小100px、最大コンテンツ

構文

gap: <row-gap> <column-gap>

使用できる値

• gap: 16px — 均等な間隔
• gap: 8px 16px — 行間、列間
• row-gap: 8px — 行間のみ
• column-gap: 16px — 列間のみ

構文

grid-column: <start> / <end>

使用できる値

• grid-column: 1 / 3 — 列1から3にスパン
• grid-column: 1 / span 2 — 1から2列スパン
• grid-column: 1 / -1 — すべての列にスパン

構文

grid-row: <start> / <end>

使用できる値

• grid-row: 1 / 3 — 行1から3にスパン
• grid-row: 1 / span 2 — 1から2行スパン
• grid-row: 2 / -1 — 行2から最後まで

構文

place-items: <align-items> <justify-items>

使用できる値

• place-items: center — 両軸で中央揃え
• place-items: start end — align start、justify end
• place-items: stretch — 両軸で伸長（デフォルト）

構文

margin: <top> <right> <bottom> <left>

使用できる値

• margin: 16px — 全辺16px
• margin: 8px 16px — 上下8px、左右16px
• margin: 0 auto — 水平方向に中央揃え
• margin-top: 8px — 上のみ

構文

padding: <top> <right> <bottom> <left>

使用できる値

• padding: 16px — 全辺16px
• padding: 8px 16px — 上下8px、左右16px
• padding: 4px 8px 12px 16px — 各辺個別
• padding-inline: 16px — 左右（論理プロパティ）

構文

border: <width> <style> <color>

使用できる値

• border: 1px solid #ccc — グレーの実線ボーダー
• border: 2px dashed red — 赤の破線ボーダー
• border-top: 1px solid — 上のみ
• border: none — ボーダーを削除

構文

box-sizing: content-box | border-box

使用できる値

• content-box — widthにpadding・borderを含まない（デフォルト）
• border-box — widthにpadding・borderを含む

構文

width: <value>; height: <value>

使用できる値

• width: 100% — 親要素の全幅
• width: 200px — 固定幅
• max-width: 1200px — 最大幅
• min-height: 100vh — 最小ビューポート高さ
• height: auto — コンテンツに合わせた高さ

構文

overflow: visible | hidden | scroll | auto

使用できる値

• visible — はみ出して表示（デフォルト）
• hidden — はみ出しを切り取り
• scroll — 常にスクロールバーを表示
• auto — 必要なときのみスクロールバーを表示
• overflow-x: hidden — 水平方向のはみ出しのみ切り取り

構文

font-size: <length> | <percentage> | keyword

使用できる値

• font-size: 16px — ピクセル固定
• font-size: 1rem — ルートフォントサイズに相対
• font-size: 1.2em — 親フォントサイズに相対
• font-size: clamp(14px, 2vw, 18px) — レスポンシブサイズ

構文

font-weight: normal | bold | <number>

使用できる値

• 400 — 通常の太さ
• 700 — 太字
• 100〜900 — 数値指定（100が最細、900が最太）
• normal — 400と同じ
• bold — 700と同じ

構文

line-height: normal | <number> | <length>

使用できる値

• 1.5 — font-sizeの1.5倍（本文テキスト推奨）
• 1 — font-sizeと同じ
• 24px — 固定の行の高さ
• normal — ブラウザのデフォルト（約1.2）

構文

text-align: left | right | center | justify

使用できる値

• left — 左揃え（LTRのデフォルト）
• right — 右揃え
• center — 中央揃え
• justify — 両端揃え

構文

text-decoration: none | underline | line-through | overline

使用できる値

• none — 装飾を削除
• underline — 下線
• line-through — 取り消し線
• underline dotted — 点線の下線

構文

word-break: normal | break-all | keep-all | break-word

使用できる値

• normal — デフォルトの単語区切りルール
• break-all — 任意の文字間で区切る
• keep-all — CJK文字間では区切らない
• overflow-wrap: break-word — 必要なときのみ区切る

構文

position: static | relative | absolute | fixed | sticky

使用できる値

• static — 通常のフロー（デフォルト）
• relative — 通常位置からのオフセット
• absolute — 最近の配置済み祖先要素を基準
• fixed — ビューポートを基準に配置
• sticky — スクロールに応じてrelativeとfixedを切り替え

構文

display: block | inline | inline-block | none | ...

使用できる値

• block — 全幅、新しい行から開始
• inline — テキストとともに流れる、幅・高さなし
• inline-block — インラインだがサイズ指定可
• none — 要素を非表示（レイアウトから除去）
• flex — Flexboxコンテナ
• grid — グリッドコンテナ

構文

z-index: auto | <integer>

使用できる値

• auto — 親と同じ（デフォルト）
• 0 — 基本のスタックレベル
• 1 — デフォルトの上
• -1 — デフォルトの下
• 9999 — 非常に高いスタック（乱用注意）

構文

float: none | left | right | inline-start | inline-end

使用できる値

• none — フロートしない（デフォルト）
• left — 左にフロート
• right — 右にフロート

構文

clear: none | left | right | both

使用できる値

• none — フロートの隣に配置可（デフォルト）
• left — 左フロートの下に移動
• right — 右フロートの下に移動
• both — すべてのフロートの下に移動

構文

background: <color> | url() | linear-gradient()

使用できる値

• background: #f0f0f0 — 単色
• background: url('img.png') center/cover — 画像
• background: linear-gradient(to right, #f00, #00f) — グラデーション
• background-color: transparent — 透明な背景

構文

color: <color>

使用できる値

• color: #333 — 濃いグレーの16進数
• color: rgb(51, 51, 51) — RGB値
• color: hsl(0, 0%, 20%) — HSL値
• color: oklch(0.3 0 0) — OKLCH値
• color: currentColor — 現在の色を継承

構文

opacity: <number between 0 and 1>

使用できる値

• 0 — 完全透明
• 0.5 — 50%透明
• 1 — 完全不透明（デフォルト）

構文

box-shadow: <offset-x> <offset-y> <blur> <spread> <color>

使用できる値

• box-shadow: 0 2px 4px rgba(0,0,0,0.1) — 控えめなシャドウ
• box-shadow: 0 4px 16px rgba(0,0,0,0.2) — 浮き上がったシャドウ
• box-shadow: inset 0 1px 3px rgba(0,0,0,0.2) — 内側のシャドウ
• box-shadow: none — シャドウを削除

構文

border-radius: <length> | <percentage>

使用できる値

• border-radius: 4px — わずかに丸い
• border-radius: 50% — 円形（正方形の要素に）
• border-radius: 8px 0 — 左上と右下に8px
• border-top-left-radius: 8px — 左上のみ

構文

transform: <function>

使用できる値

• transform: translate(10px, 20px) — 要素を移動
• transform: rotate(45deg) — 45度回転
• transform: scale(1.5) — 1.5倍に拡大
• transform: skew(10deg) — 10度傾ける
• transform: translateX(-50%) translateY(-50%) — 中央配置テクニック

構文

transition: <property> <duration> <timing> <delay>

使用できる値

• transition: all 0.3s ease — すべてのプロパティをアニメーション
• transition: color 0.2s ease-in-out — colorのみアニメーション
• transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) — カスタムイージング
• transition: none — トランジションを無効化

構文

animation: <name> <duration> <timing> <delay> <iteration> <direction>

使用できる値

• animation: spin 1s linear infinite — 無限回転
• animation: fade-in 0.5s ease forwards — 一度だけフェードイン
• animation-play-state: paused — アニメーションを一時停止
• @keyframes spin { to { transform: rotate(360deg); } } — キーフレームの定義