CSSプロパティとは、HTML要素の見た目やレイアウトを制御するための指定項目です。この記事では、実務で頻繁に使用するCSSプロパティをカテゴリ別に整理し、使用例付きで一覧化しました。
Flexbox・Grid・アニメーションの基本から、CSS Nesting・:has()・コンテナクエリなどのモダンCSS（2024〜2026年）まで網羅しています。ブックマークして辞書的にお使いください。
詳細はMDN Web Docsで確認ください。※随時更新
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
レイアウト
ページの構造やFlexbox・Gridなどの配置レイアウトに関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
display | 要素の表示形式を指定 | display: flex; / display: grid; / display: none; |
position | 要素の配置方法を指定 | position: relative; / position: absolute; / position: sticky; |
top / right / bottom / left | positionで配置した要素の位置を指定 | top: 0; left: 50%; |
z-index | 要素の重なり順を指定 | z-index: 10; |
float | 要素を左右に回り込ませる | float: left; |
clear | floatの回り込みを解除 | clear: both; |
flex-direction | Flexアイテムの並び方向 | flex-direction: column; |
flex-wrap | Flexアイテムの折り返し | flex-wrap: wrap; |
flex-grow | Flexアイテムの伸び率 | flex-grow: 1; |
flex-shrink | Flexアイテムの縮み率 | flex-shrink: 0; |
flex-basis | Flexアイテムの基準サイズ | flex-basis: 200px; |
justify-content | 主軸方向の配置 | justify-content: center; / space-between |
align-items | 交差軸方向の配置 | align-items: center; / stretch |
align-self | 個別アイテムの交差軸配置 | align-self: flex-end; |
align-content | 複数行の交差軸配置 | align-content: space-around; |
gap | Flex/Grid要素間の隙間 | gap: 16px; / gap: 16px 24px; |
order | Flexアイテムの表示順 | order: -1; |
grid-template-columns | Gridの列構成を定義 | grid-template-columns: repeat(3, 1fr); |
grid-template-rows | Gridの行構成を定義 | grid-template-rows: auto 1fr auto; |
grid-template-areas | Gridのエリア名を定義 | grid-template-areas: "header header" "sidebar main"; |
grid-column | Grid要素の列位置を指定 | grid-column: 1 / 3; |
grid-row | Grid要素の行位置を指定 | grid-row: span 2; |
grid-area | Grid要素の配置エリアを指定 | grid-area: header; |
grid-auto-flow | Grid自動配置の方向 | grid-auto-flow: dense; |
grid-auto-columns | 暗黙的に追加される列のサイズ | grid-auto-columns: minmax(100px, 1fr); |
grid-auto-rows | 暗黙的に追加される行のサイズ | grid-auto-rows: 200px; |
place-items | align-items + justify-itemsの一括指定 | place-items: center; |
place-content | align-content + justify-contentの一括指定 | place-content: center; |
justify-items | Grid要素の水平配置 | justify-items: start; |
justify-self | 個別Grid要素の水平配置 | justify-self: end; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
ボックスモデル
要素のサイズ・余白・はみ出し制御に関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
width | 要素の幅を指定 | width: 100%; / width: 300px; |
height | 要素の高さを指定 | height: 100vh; |
max-width | 最大幅を制限 | max-width: 1200px; |
min-width | 最小幅を保証 | min-width: 320px; |
max-height | 最大高さを制限 | max-height: 500px; |
min-height | 最小高さを保証 | min-height: 100vh; |
margin | 外側の余白を設定 | margin: 0 auto; / margin-block: 2rem; |
padding | 内側の余白を設定 | padding: 16px 24px; |
box-sizing | 幅・高さの計算方法を指定 | box-sizing: border-box; |
overflow | はみ出したコンテンツの処理 | overflow: hidden; / overflow: auto; |
overflow-x / overflow-y | 水平・垂直方向のはみ出し個別制御 | overflow-x: scroll; overflow-y: hidden; |
aspect-ratio | 幅と高さの比率を指定 | aspect-ratio: 16 / 9; |
block-size / inline-size | 書字方向に対応したサイズ指定 | block-size: 100%; inline-size: fit-content; |
margin-block / margin-inline | 論理方向の余白 | margin-inline: auto; |
padding-block / padding-inline | 論理方向の内側余白 | padding-block: 1rem; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
テキスト・フォント
文字の見た目・サイズ・配置・装飾に関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
font-size | 文字サイズを指定 | font-size: 16px; / font-size: clamp(16px, 2vw, 24px); |
font-weight | 文字の太さを指定 | font-weight: bold; / font-weight: 700; |
font-family | フォントの種類を指定 | font-family: 'Noto Sans JP', sans-serif; |
font-style | イタリック等のスタイル | font-style: italic; |
font-variant | 小型大文字などのバリアント | font-variant: small-caps; |
font-feature-settings | OpenType機能の有効化 | font-feature-settings: 'palt'; |
font-variation-settings | 可変フォントの軸を調整 | font-variation-settings: 'wght' 450; |
line-height | 行の高さを指定 | line-height: 1.8; |
letter-spacing | 文字間の間隔 | letter-spacing: 0.05em; |
word-spacing | 単語間の間隔 | word-spacing: 0.1em; |
text-align | テキストの水平配置 | text-align: center; / text-align: justify; |
text-decoration | 下線・取消線などの装飾 | text-decoration: underline wavy red; |
text-transform | 大文字・小文字の変換 | text-transform: uppercase; |
text-indent | 最初の行の字下げ | text-indent: 1em; |
text-overflow | はみ出したテキストの処理 | text-overflow: ellipsis; |
text-shadow | テキストに影をつける | text-shadow: 2px 2px 4px rgba(0,0,0,.3); |
white-space | 空白・改行の扱い | white-space: nowrap; / pre-wrap |
word-break | 単語の改行ルール | word-break: break-all; |
overflow-wrap | 長い単語の折り返し | overflow-wrap: break-word; |
writing-mode | テキストの書字方向 | writing-mode: vertical-rl; |
direction | テキストの方向（RTL/LTR） | direction: rtl; |
hyphens | ハイフンによる自動改行 | hyphens: auto; |
text-wrap | テキストの折り返しバランス | text-wrap: balance; |
line-break | 行分割の厳密さ | line-break: strict; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
背景・装飾
背景色・画像、枠線、影、透明度などの装飾プロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
background | 背景の一括指定 | background: #f0f0f0 url(bg.png) no-repeat center / cover; |
background-color | 背景色 | background-color: #ffffff; |
background-image | 背景画像・グラデーション | background-image: linear-gradient(135deg, #667eea, #764ba2); |
background-size | 背景画像のサイズ | background-size: cover; / contain |
background-position | 背景画像の位置 | background-position: center top; |
background-repeat | 背景画像の繰り返し | background-repeat: no-repeat; |
background-attachment | 背景画像のスクロール固定 | background-attachment: fixed; |
background-clip | 背景の描画範囲 | background-clip: text; |
background-origin | 背景画像の基準位置 | background-origin: padding-box; |
background-blend-mode | 背景画像の合成モード | background-blend-mode: multiply; |
border | 枠線の一括指定 | border: 1px solid #ddd; |
border-radius | 角の丸み | border-radius: 8px; / border-radius: 50%; |
border-style | 枠線のスタイル | border-style: dashed; |
border-width | 枠線の太さ | border-width: 2px; |
border-image | 枠線に画像を使用 | border-image: linear-gradient(red, blue) 1; |
border-collapse | テーブル枠線の統合 | border-collapse: collapse; |
border-spacing | テーブルセル間の間隔 | border-spacing: 4px; |
box-shadow | 要素に影をつける | box-shadow: 0 4px 6px rgba(0,0,0,.1); |
opacity | 要素の透明度 | opacity: 0.8; |
outline | アウトライン（フォーカス枠等） | outline: 2px solid blue; |
outline-offset | アウトラインと要素の距離 | outline-offset: 4px; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
色・フィルター・合成
色の指定、画像フィルター、レイヤーの合成モードに関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
color | テキストの色を指定 | color: #333; / color: oklch(0.7 0.15 250); |
accent-color | チェックボックス等のアクセント色 | accent-color: #3460fb; |
color-scheme | ダーク/ライトモード対応 | color-scheme: light dark; |
filter | 要素にフィルター効果を適用 | filter: blur(4px); / filter: grayscale(1); |
backdrop-filter | 背景にフィルター効果を適用 | backdrop-filter: blur(10px) saturate(180%); |
mix-blend-mode | 要素の合成モード | mix-blend-mode: multiply; |
isolation | 合成モードの影響を隔離 | isolation: isolate; |
color-mix() | 2色を混合して新しい色を生成 | color: color-mix(in srgb, #3460fb 70%, white); |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
トランスフォーム・アニメーション
要素の変形、遷移効果、アニメーションに関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
transform | 要素を変形（移動・回転・拡大） | transform: translateX(-50%) rotate(45deg); |
transform-origin | 変形の基点を指定 | transform-origin: center bottom; |
transition | プロパティ変化時のアニメーション | transition: all 0.3s ease; |
transition-delay | 遷移開始までの待機時間 | transition-delay: 0.1s; |
animation | CSSアニメーションの一括指定 | animation: fadeIn 0.5s ease forwards; |
animation-name | 使用するキーフレーム名 | animation-name: slideIn; |
animation-duration | アニメーションの実行時間 | animation-duration: 1s; |
animation-timing-function | 速度変化の曲線 | animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); |
animation-delay | 開始までの待機時間 | animation-delay: 0.3s; |
animation-iteration-count | 繰り返し回数 | animation-iteration-count: infinite; |
animation-direction | 再生方向 | animation-direction: alternate; |
animation-fill-mode | 実行前後の状態 | animation-fill-mode: forwards; |
backface-visibility | 3D変換時の裏面表示 | backface-visibility: hidden; |
perspective | 3D空間の奥行き | perspective: 1000px; |
will-change | 変更予定のプロパティをブラウザに通知 | will-change: transform; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
レスポンシブ・メディア
レスポンシブデザインや画像・動画の表示に関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
object-fit | 置換要素のフィット方法 | object-fit: cover; / contain |
object-position | 置換要素の表示位置 | object-position: center top; |
@media | メディアクエリ（画面幅等で分岐） | @media (max-width: 768px) { ... } |
@container | コンテナクエリ（親要素のサイズで分岐） | @container (min-width: 400px) { ... } |
container-type | コンテナクエリの対象に指定 | container-type: inline-size; |
container-name | コンテナに名前を付ける | container-name: card; |
clamp() | 最小値・推奨値・最大値を指定 | font-size: clamp(16px, 2.5vw, 24px); |
min() / max() | 値の最小・最大を取得 | width: min(100%, 600px); |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
スクロール・インタラクション
スクロール動作、カーソル、ユーザー操作に関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
scroll-behavior | スクロールのアニメーション | scroll-behavior: smooth; |
scroll-snap-type | スクロール位置の自動吸着 | scroll-snap-type: x mandatory; |
scroll-snap-align | スナップの基準位置 | scroll-snap-align: start; |
scroll-margin | スクロール時のマージン | scroll-margin-top: 80px; |
overscroll-behavior | スクロール端の挙動制御 | overscroll-behavior: contain; |
overflow-anchor | スクロール位置のずれ防止 | overflow-anchor: none; |
cursor | マウスカーソルの形状 | cursor: pointer; / cursor: grab; |
pointer-events | クリック・ホバーの有効/無効 | pointer-events: none; |
user-select | テキスト選択の可否 | user-select: none; |
touch-action | タッチ操作の制御 | touch-action: pan-y; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
その他のよく使うプロパティ
リスト、テーブル、疑似要素、カラムレイアウト等に関するプロパティです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
list-style | リストの記号スタイル | list-style: none; / list-style: disc inside; |
content | ::before/::afterで内容を挿入 | content: ''; / content: attr(data-label); |
counter-reset / counter-increment | CSSカウンター | counter-reset: section; counter-increment: section; |
caption-side | テーブルキャプションの配置 | caption-side: bottom; |
empty-cells | テーブル空セルの表示 | empty-cells: hide; |
column-count | マルチカラムの列数 | column-count: 3; |
column-gap | カラム間の隙間 | column-gap: 2rem; |
column-rule | カラム間の罫線 | column-rule: 1px solid #ddd; |
clip-path | 要素を特定の形状に切り抜く | clip-path: circle(50%); / polygon() |
mask-image | 要素にマスクを適用 | mask-image: linear-gradient(black, transparent); |
appearance | フォーム要素のデフォルトスタイル除去 | appearance: none; |
caret-color | テキスト入力カーソルの色 | caret-color: #3460fb; |
resize | テキストエリア等のリサイズ可否 | resize: vertical; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
モダンCSS（2024〜2026年の新機能）
近年ブラウザに実装された最新のCSS機能です。主要ブラウザの対応状況はCan I Useで確認してください。
| プロパティ | 説明 | 使用例 |
|---|---|---|
CSS Nesting | セレクタのネスト（入れ子）記法 | .card { & .title { color: blue; } } |
:has() | 親・兄弟要素の状態で選択 | .card:has(img) { padding: 0; } |
:is() / :where() | セレクタの一括指定 | :is(h1, h2, h3) { margin-top: 2rem; } |
@layer | CSSの優先順位をレイヤーで管理 | @layer base, components, utilities; |
@scope | スコープ付きスタイルの定義 | @scope (.card) { h2 { font-size: 1.5rem; } } |
subgrid | 親Gridのトラックを子要素が継承 | grid-template-rows: subgrid; |
anchor positioning | 他の要素を基準にした配置 | anchor-name: --tooltip; position-anchor: --tooltip; |
view-transition-name | View Transitions APIでの遷移対象指定 | view-transition-name: hero-image; |
content-visibility | 画面外要素の描画を遅延 | content-visibility: auto; |
contain-intrinsic-size | content-visibility使用時のサイズヒント | contain-intrinsic-size: 0 500px; |
field-sizing | フォーム要素のサイズ自動調整 | field-sizing: content; |
text-wrap: balance | 見出し等のテキスト折り返しを均等化 | text-wrap: balance; |
text-wrap: pretty | 段落テキストの最終行を改善 | text-wrap: pretty; |
color-mix() | 2色を混合して新しい色を生成 | background: color-mix(in oklch, blue, white 30%); |
light-dark() | ライト/ダークモードで色を切り替え | color: light-dark(#333, #ccc); |
@starting-style | 要素出現時の初期スタイル（遷移用） | @starting-style { .modal { opacity: 0; } } |
interpolate-size | autoへのアニメーションを有効化 | interpolate-size: allow-keywords; |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
カスタムプロパティ・CSS関数
CSS変数（カスタムプロパティ）と便利なCSS関数のリファレンスです。
| プロパティ | 説明 | 使用例 |
|---|---|---|
--変数名（カスタムプロパティ） | CSS変数を定義 | :root { --color-primary: #3460fb; } |
var() | CSS変数の値を参照 | color: var(--color-primary, #000); |
calc() | 計算式で値を指定 | width: calc(100% - 2rem); |
clamp() | 最小・推奨・最大値を指定 | font-size: clamp(16px, 2vw, 24px); |
min() / max() | 値の最小・最大を選択 | width: min(100%, 800px); |
env() | 環境変数を参照（セーフエリア等） | padding-bottom: env(safe-area-inset-bottom); |
url() | 外部リソースのパスを指定 | background-image: url('/img/bg.webp'); |
rgb() / hsl() / oklch() | 色の指定関数 | color: oklch(0.65 0.2 250); |
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
関連記事
HTMLタグの正しい使い方もあわせて確認しましょう。
▶ WordPress関数一覧【テーマ・プラグイン開発向け使用例付きリファレンス】
コードの差分を比較したいときは Diff Checker（コード比較ツール） もご活用ください。
