主要CSSチートシート

タイポグラフィ

テキストに関わるプロパティです。

direction

文字の方向を指定（LTR/RTL）。例: direction: rtl;

font-family

フォントファミリーを指定。例: font-family: Arial, sans-serif;

font-kerning

カーニング（文字間の微調整）の有効／無効を指定。例: font-kerning: normal;

font-size

文字の大きさを指定。例: font-size: 16px;

font-style

イタリックなどフォントのスタイルを指定。例: font-style: italic;

font-stretch

フォントの幅を拡大／縮小。例: font-stretch: expanded;

font-variant

スモールキャップなどフォントの異体を指定。例: font-variant: small-caps;

font-variant-ligatures

合字などリガチャの扱いを指定。例: font-variant-ligatures: common-ligatures;

font-weight

フォントの太さを指定。例: font-weight: bold;

hyphens

テキストのハイフン区切りを自動化。例: hyphens: auto;

letter-spacing

文字間のスペースを指定。例: letter-spacing: 2px;

line-height

行の高さを指定。例: line-height: 1.5;

overflow-wrap

単語途中での折り返しを制御。例: overflow-wrap: break-word;

tab-size

タブ文字の幅を指定。例: tab-size: 4;

text-align

テキストの水平揃え。例: text-align: center;

text-decoration

下線などテキスト装飾を指定。例: text-decoration: underline;

text-emphasis

縦書き・東アジア向けテキストの強調記号。例: text-emphasis: circle;

text-indent

段落の1行目インデント。例: text-indent: 2em;

text-orientation

縦書き時の文字向きを指定。例: text-orientation: upright;

text-overflow

テキストがあふれた時の省略表示。例: text-overflow: ellipsis;

text-rendering

文字レンダリングを最適化。例: text-rendering: optimizeLegibility;

text-shadow

文字に影を付ける。例: text-shadow: 1px 1px 2px #999;

text-transform

大文字・小文字変換。例: text-transform: uppercase;

unicode-bidi

複雑な文字方向を制御。例: unicode-bidi: bidi-override;

vertical-align

インライン要素の縦揃え。例: vertical-align: middle;

white-space

空白や改行の扱いを指定。例: white-space: nowrap;

word-break

単語の改行ルールを制御。例: word-break: break-all;

word-spacing

単語間のスペースを指定。例: word-spacing: 5px;

writing-mode

縦書き／横書きを指定。例: writing-mode: vertical-rl;

色・背景

テキストや背景色、背景画像などの色や背景装飾に関わるプロパティです。

accent-color

フォーム要素などの強調色を指定。例: accent-color: #007BFF;

background-attachment

背景画像を固定するかどうか。例: background-attachment: fixed;

background-blend-mode

背景画像や背景色の合成モード。例: background-blend-mode: multiply;

background-clip

背景の描画範囲を指定。例: background-clip: content-box;

background-color

要素の背景色。例: background-color: #fff;

background-image

背景画像を指定。例: background-image: url("bg.png");

background-origin

背景画像の原点を指定。例: background-origin: border-box;

background-position

背景画像の表示位置。例: background-position: center;

background-repeat

背景画像の繰り返し設定。例: background-repeat: no-repeat;

background-size

背景画像の拡大・縮小。例: background-size: cover;

color

文字の色を指定。例: color: #333;

object-fit

画像や動画を要素枠にフィット。例: object-fit: cover;

object-position

object-fit時の画像の表示位置。例: object-position: center;

ボックスモデル

要素の幅・高さ・余白・枠線など、ボックスモデルに関わるプロパティです。

aspect-ratio

要素の縦横比を指定。例: aspect-ratio: 16/9;

border

枠線を一括指定。例: border: 1px solid #ccc;

border-bottom

下辺の枠線を指定。例: border-bottom: 2px dashed #000;

border-color

枠線の色を指定。例: border-color: #f00;

border-image

画像を枠線として適用。例: border-image: url("border.png") 30 round;

border-image-outset

画像枠線を要素外にはみ出させる量。例: border-image-outset: 5px;

border-image-repeat

画像枠線の繰り返し方法。例: border-image-repeat: round;

border-image-slice

画像枠線の分割位置。例: border-image-slice: 30;

border-image-source

画像枠線に使う画像。例: border-image-source: url("border.png");

border-image-width

画像枠線の幅。例: border-image-width: 10px;

border-left

左辺の枠線を指定。例: border-left: 2px solid #000;

border-radius

角を丸める。例: border-radius: 10px;

border-right

右辺の枠線を指定。例: border-right: 2px solid #000;

border-style

枠線のスタイルを指定。例: border-style: dotted;

border-top

上辺の枠線を指定。例: border-top: 2px solid #000;

border-width

枠線の太さを指定。例: border-width: 2px;

box-sizing

幅・高さの計算方法を指定。例: box-sizing: border-box;

margin

外側余白を一括指定。例: margin: 10px;

margin-bottom

下側の余白を指定。例: margin-bottom: 10px;

margin-left

左側の余白を指定。例: margin-left: 20px;

margin-right

右側の余白を指定。例: margin-right: 20px;

margin-top

上側の余白を指定。例: margin-top: 10px;

max-height

要素の最大高さを指定。例: max-height: 400px;

max-width

要素の最大幅を指定。例: max-width: 800px;

min-height

要素の最小高さを指定。例: min-height: 100px;

min-width

要素の最小幅を指定。例: min-width: 200px;

padding

内側余白を一括指定。例: padding: 10px 20px;

padding-bottom

下側の内側余白。例: padding-bottom: 10px;

padding-left

左側の内側余白。例: padding-left: 20px;

padding-right

右側の内側余白。例: padding-right: 20px;

padding-top

上側の内側余白。例: padding-top: 10px;

レイアウト

要素の表示モードや位置指定、回り込みなどのレイアウト構造に関わるプロパティです。

bottom

絶対／固定配置時の下位置。例: bottom: 10px;

break-inside

要素内での分割を回避。例: break-inside: avoid;

clear

浮動要素との回り込み解除。例: clear: both;

display

表示方式を指定。例: display: block;

float

要素を左右に回り込ませる。例: float: left;

left

絶対／固定配置時の左位置。例: left: 20px;

position

要素の配置方法。例: position: absolute;

resize

要素をリサイズ可能にする。例: resize: both;

right

絶対／固定配置時の右位置。例: right: 20px;

top

絶対／固定配置時の上位置。例: top: 10px;

z-index

要素の重なり順序。例: z-index: 999;

テーブルレイアウト

HTMLテーブルの装飾や表示を制御するためのプロパティです。

border-collapse

隣接セルの枠線を結合するか指定。例: border-collapse: collapse;

border-spacing

セル間のスペースを指定。例: border-spacing: 5px;

caption-side

テーブルキャプションの位置。例: caption-side: bottom;

empty-cells

空セルの表示を制御。例: empty-cells: show;

table-layout

テーブルのレイアウト方法。例: table-layout: fixed;

フレックスボックス

Flexboxを制御するプロパティです。

align-content

複数行のFlexアイテムの配置。例: align-content: space-between;

align-items

交差軸方向（縦）の配置。例: align-items: center;

align-self

特定アイテムの交差軸方向配置。例: align-self: flex-end;

flex

フレキシブルなサイズを一括指定。例: flex: 1 1 auto;

flex-basis

アイテムの基本サイズ。例: flex-basis: 200px;

flex-direction

アイテムの配置方向。例: flex-direction: row-reverse;

flex-flow

flex-directionとflex-wrapをまとめて指定。例: flex-flow: row wrap;

flex-grow

利用可能な空きスペースの拡大比率。例: flex-grow: 2;

flex-shrink

要素が縮む比率。例: flex-shrink: 0;

flex-wrap

アイテムを折り返すか。例: flex-wrap: wrap;

gap

Flexアイテム間の隙間を指定。例: gap: 10px;

justify-content

メイン軸方向（横）の配置。例: justify-content: center;

order

アイテムの表示順序を指定。例: order: 2;

グリッドレイアウト

Gridレイアウトを制御するプロパティです。

align-content

グリッド全体の縦方向の揃え。例: align-content: center;

align-items

各グリッドアイテムの縦方向整列。例: align-items: stretch;

gap

グリッドの行や列の間隔。例: gap: 20px;

grid-auto-columns

自動生成される列のサイズ。例: grid-auto-columns: 100px;

grid-auto-flow

自動配置の流れを指定。例: grid-auto-flow: row dense;

grid-auto-rows

自動生成される行のサイズ。例: grid-auto-rows: 50px;

grid-column

要素の開始列／終了列をまとめて指定。例: grid-column: 2 / 4;

grid-column-end

要素が終了する列。例: grid-column-end: 4;

grid-column-start

要素が開始する列。例: grid-column-start: 2;

grid-row

要素の開始行／終了行をまとめて指定。例: grid-row: 1 / 3;

grid-row-end

要素が終了する行。例: grid-row-end: 3;

grid-row-start

要素が開始する行。例: grid-row-start: 1;

grid-template-areas

グリッドエリアの配置。

grid-template-rows

行の定義。例: grid-template-rows: 100px auto;

justify-content

グリッド全体の横方向の揃え。例: justify-content: space-between;

justify-items

各アイテムの横方向整列。例: justify-items: center;

justify-self

特定アイテムの横方向整列。例: justify-self: end;

place-content

align-content と justify-content をまとめて指定。例: place-content: center space-between;

place-items

align-items と justify-items をまとめて指定。例: place-items: center stretch;

place-self

align-self と justify-self をまとめて指定。例: place-self: end center;

アニメーション関連

要素を動かしたり変化させたりするアニメーションやトランジションに関わるプロパティです。

animation

アニメーションを一括指定。例: animation: slide 2s infinite;

animation-delay

アニメーション開始の遅延時間。例: animation-delay: 0.5s;

animation-direction

再生方向を指定。例: animation-direction: alternate;

animation-duration

アニメーション継続時間。例: animation-duration: 1s;

animation-fill-mode

終了後の状態を保持するか。例: animation-fill-mode: forwards;

animation-iteration-count

繰り返し回数。例: animation-iteration-count: infinite;

animation-name

使用するキーフレーム名。例: animation-name: fadeIn;

animation-play-state

再生／一時停止を制御。例: animation-play-state: paused;

animation-timing-function

アニメーションの進行速度カーブ。例: animation-timing-function: ease-in-out;

transition

トランジションを一括指定。例: transition: all 0.3s ease;

transition-delay

トランジション開始の遅延。例: transition-delay: 0.2s;

transition-duration

トランジションの継続時間。例: transition-duration: 0.5s;

transition-property

トランジション対象のプロパティ。例: transition-property: opacity;

transition-timing-function

速度カーブを指定。例: transition-timing-function: linear;

変形・視覚効果

要素を回転・拡大縮小・透過させたり、視覚的な特殊効果を付与するプロパティです。

box-shadow

要素に影をつける。例: box-shadow: 0 4px 6px rgba(0,0,0,0.2);

filter

要素にフィルタ効果（ぼかし等）を適用。例: filter: blur(5px);

isolation

ブレンド効果を要素内で完結させる。例: isolation: isolate;

mix-blend-mode

重なった要素同士の合成モード。例: mix-blend-mode: multiply;

transform

要素を変形。例: transform: rotate(45deg);

transform-origin

変形の基準点。例: transform-origin: 50% 50%;

リスト装飾

ulやolなどのリスト表示を制御するためのプロパティです。

counter-increment

カウンターを増分。例: counter-increment: section;

counter-reset

カウンターをリセット。例: counter-reset: section;

list-style

リストマーカーの一括指定。例: list-style: square inside;

list-style-image

マーカーとして使用する画像。例: list-style-image: url("marker.png");

list-style-position

マーカーの表示位置。例: list-style-position: inside;

list-style-type

マーカーの種類を指定。例: list-style-type: disc;

スクロール関連

要素のオーバーフロー（はみ出し）やスクロール挙動を制御するプロパティです。

overflow

要素からはみ出した部分の表示制御。例: overflow: hidden;

overflow-x

水平方向のオーバーフローを制御。例: overflow-x: scroll;

overflow-y

垂直方向のオーバーフローを制御。例: overflow-y: auto;

scroll-behavior

スクロール時のアニメーションを指定。例: scroll-behavior: smooth;

scroll-margin

スクロールスナップ時の外側余白。例: scroll-margin: 20px;

scroll-margin-bottom

下方向のスクロール余白。例: scroll-margin-bottom: 10px;

scroll-margin-left

左方向のスクロール余白。例: scroll-margin-left: 10px;

scroll-margin-right

右方向のスクロール余白。例: scroll-margin-right: 10px;

scroll-margin-top

上方向のスクロール余白。例: scroll-margin-top: 10px;

scroll-padding

スクロールスナップ時の内側余白。例: scroll-padding: 15px;

scroll-snap-align

スナップ位置を指定。例: scroll-snap-align: start;

scroll-snap-stop

ユーザーの強制スクロール停止可否。例: scroll-snap-stop: always;

scroll-snap-type

スクロールスナップの設定。例: scroll-snap-type: x mandatory;

scrollbar-color

スクロールバーの色（Firefox限定）。例: scrollbar-color: #000 #ccc;

scrollbar-width

スクロールバーの幅（Firefox限定）。例: scrollbar-width: thin;

touch-action

タッチ操作時の挙動を制御。例: touch-action: pan-y;