主要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;
lex-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;