CSS/プロパティ一覧

CSSプロパティをなるべく網羅すべく一覧化しました。

CSSプロパティ一覧

名前	機能	用例
align-content	フレックスコンテナ内の行の配置を指定	align-content: space-between;
align-items	フレックスアイテムの配置を指定	align-items: center;
align-self	個別のフレックスアイテムの配置を指定	align-self: flex-start;
all	すべてのプロパティを一括リセット	all: initial;
animation	アニメーションを指定	animation: 3s ease-in 1s infinite reverse both running slidein;
animation-delay	アニメーション開始までの遅延を指定	animation-delay: 2s;
animation-direction	アニメーションの方向を指定	animation-direction: alternate;
animation-duration	アニメーションの継続時間を指定	animation-duration: 3s;
animation-fill-mode	アニメーション前後の状態を指定	animation-fill-mode: forwards;
animation-iteration-count	アニメーションの繰り返し回数を指定	animation-iteration-count: infinite;
animation-name	アニメーションの名前を指定	animation-name: slidein;
animation-play-state	アニメーションの再生状態を指定	animation-play-state: paused;
animation-timing-function	アニメーションの進行を指定	animation-timing-function: ease-in-out;
backdrop-filter	要素の背後に視覚効果を適用	backdrop-filter: blur(10px);
backface-visibility	要素の裏面の可視性を指定	backface-visibility: hidden;
background	背景を一括指定	background: #f00 url("bg.jpg") no-repeat center;
background-attachment	背景画像の固定を指定	background-attachment: fixed;
background-blend-mode	背景レイヤーのブレンドモードを指定	background-blend-mode: multiply;
background-clip	背景の描画領域を指定	background-clip: padding-box;
background-color	背景色を指定	background-color: #ff0000;
background-image	背景画像を指定	background-image: url("image.png");
background-origin	背景の配置起点を指定	background-origin: content-box;
background-position	背景画像の位置を指定	background-position: center top;
background-repeat	背景画像の繰り返しを指定	background-repeat: no-repeat;
background-size	背景画像のサイズを指定	background-size: cover;
border	ボーダーを一括指定	border: 1px solid black;
border-bottom	下ボーダーを指定	border-bottom: 2px dashed blue;
border-bottom-color	下ボーダーの色を指定	border-bottom-color: red;
border-bottom-left-radius	左下の角丸を指定	border-bottom-left-radius: 10px;
border-bottom-right-radius	右下の角丸を指定	border-bottom-right-radius: 10px;
border-bottom-style	下ボーダーのスタイルを指定	border-bottom-style: dotted;
border-bottom-width	下ボーダーの幅を指定	border-bottom-width: 3px;
border-collapse	テーブルのボーダーの結合を指定	border-collapse: collapse;
border-color	ボーダーの色を指定	border-color: red green blue yellow;
border-image	ボーダー画像を指定	border-image: url("border.png") 30 round;
border-image-outset	ボーダー画像のはみ出しを指定	border-image-outset: 10px;
border-image-repeat	ボーダー画像の繰り返しを指定	border-image-repeat: repeat;
border-image-slice	ボーダー画像の分割を指定	border-image-slice: 30%;
border-image-source	ボーダー画像のソースを指定	border-image-source: url("border.png");
border-image-width	ボーダー画像の幅を指定	border-image-width: 1;
border-left	左ボーダーを指定	border-left: 1px solid black;
border-left-color	左ボーダーの色を指定	border-left-color: red;
border-left-style	左ボーダーのスタイルを指定	border-left-style: dashed;
border-left-width	左ボーダーの幅を指定	border-left-width: 2px;
border-radius	角丸を指定	border-radius: 10px;
border-right	右ボーダーを指定	border-right: 1px solid black;
border-right-color	右ボーダーの色を指定	border-right-color: blue;
border-right-style	右ボーダーのスタイルを指定	border-right-style: dotted;
border-right-width	右ボーダーの幅を指定	border-right-width: 3px;
border-spacing	テーブルセルの間隔を指定	border-spacing: 2px 5px;
border-style	ボーダーのスタイルを指定	border-style: solid dashed dotted double;
border-top	上ボーダーを指定	border-top: 1px solid black;
border-top-color	上ボーダーの色を指定	border-top-color: green;
border-top-left-radius	左上の角丸を指定	border-top-left-radius: 10px;
border-top-right-radius	右上の角丸を指定	border-top-right-radius: 10px;
border-top-style	上ボーダーのスタイルを指定	border-top-style: groove;
border-top-width	上ボーダーの幅を指定	border-top-width: 2px;
border-width	ボーダーの幅を指定	border-width: 1px 2px 3px 4px;
bottom	下からの位置を指定	bottom: 10px;
box-shadow	ボックスシャドウを指定	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
box-sizing	ボックスサイズの計算方法を指定	box-sizing: border-box;
break-after	改ページの挿入を指定	break-after: always;
break-before	改ページの挿入を指定	break-before: page;
break-inside	要素内の改ページを制御	break-inside: avoid;
caption-side	テーブルキャプションの位置を指定	caption-side: bottom;
caret-color	キャレットの色を指定	caret-color: red;
clear	フロートの解除を指定	clear: both;
clip	要素の表示領域をクリッピング	clip: rect(0px, 60px, 200px, 0px);
clip-path	要素の表示領域をクリッピング	clip-path: circle(50%);
color	テキストの色を指定	color: #ff0000;
column-count	段組みの列数を指定	column-count: 3;
column-fill	段組みの高さを指定	column-fill: auto;
column-gap	段組みの間隔を指定	column-gap: 40px;
column-rule	段組みの仕切り線を指定	column-rule: 1px solid black;
column-rule-color	段組みの仕切り線の色を指定	column-rule-color: blue;
column-rule-style	段組みの仕切り線のスタイルを指定	column-rule-style: dotted;
column-rule-width	段組みの仕切り線の幅を指定	column-rule-width: 2px;
column-span	段組みをまたぐ要素を指定	column-span: all;
column-width	段組みの幅を指定	column-width: 100px;
columns	段組みを一括指定	columns: 3 100px;
content	疑似要素の内容を生成	content: "→";
counter-increment	カウンタの増分を指定	counter-increment: section;
counter-reset	カウンタをリセット	counter-reset: section;
cursor	カーソルの形状を指定	cursor: pointer;
direction	テキストの方向を指定	direction: rtl;
display	表示形式を指定	display: flex;
empty-cells	空セルの表示を指定	empty-cells: hide;
filter	視覚効果を適用	filter: blur(5px);
flex	フレックスアイテムを一括指定	flex: 1 1 auto;
flex-basis	フレックスアイテムの初期サイズを指定	flex-basis: 200px;
flex-direction	フレックスコンテナの主軸を指定	flex-direction: column;
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;
float	要素の浮動を指定	float: left;
font	フォントを一括指定	font: italic bold 12px/30px Georgia, serif;
font-family	フォントファミリーを指定	font-family: Arial, sans-serif;
font-feature-settings	OpenTypeフォントの機能を制御	font-feature-settings: "smcp" on;
font-kerning	カーニングを制御	font-kerning: normal;
font-language-override	言語固有のグリフを制御	font-language-override: "JAN";
font-size	フォントサイズを指定	font-size: 16px;
font-size-adjust	フォントの相対的な大きさを指定	font-size-adjust: 0.5;
font-stretch	フォントの幅を指定	font-stretch: condensed;
font-style	フォントスタイルを指定	font-style: italic;
font-synthesis	フォントの合成を制御	font-synthesis: none;
font-variant	フォントバリアントを指定	font-variant: small-caps;
font-variant-caps	大文字小文字の変形を指定	font-variant-caps: small-caps;
font-variant-east-asian	東アジアの文字変形を指定	font-variant-east-asian: jis78;
font-variant-ligatures	合字の使用を指定	font-variant-ligatures: no-common-ligatures;
font-variant-numeric	数字、分数、序数の表示を指定	font-variant-numeric: ordinal;
font-variant-position	上付き文字や下付き文字を指定	font-variant-position: super;
font-weight	フォントの太さを指定	font-weight: bold;
gap	グリッドやフレックスボックスの間隔を指定	gap: 10px;
grid	グリッドを一括指定	grid: 100px 1fr / 50px 1fr;
grid-area	グリッドアイテムの配置領域を指定	grid-area: 2 / 1 / span 2 / span 3;
grid-auto-columns	暗黙的なグリッド列のサイズを指定	grid-auto-columns: 100px;
grid-auto-flow	自動配置アルゴリズムを指定	grid-auto-flow: dense;
grid-auto-rows	暗黙的なグリッド行のサイズを指定	grid-auto-rows: 100px;
grid-column	グリッド列の開始位置と終了位置を指定	grid-column: 1 / 3;
grid-column-end	グリッド列の終了位置を指定	grid-column-end: span 2;
grid-column-gap	グリッド列の間隔を指定	grid-column-gap: 10px;
grid-column-start	グリッド列の開始位置を指定	grid-column-start: 2;
grid-gap	グリッドの間隔を指定	grid-gap: 10px 20px;
grid-row	グリッド行の開始位置と終了位置を指定	grid-row: 1 / 3;
grid-row-end	グリッド行の終了位置を指定	grid-row-end: span 2;
grid-row-gap	グリッド行の間隔を指定	grid-row-gap: 15px;
grid-row-start	グリッド行の開始位置を指定	grid-row-start: 2;
grid-template	グリッドテンプレートを一括指定	grid-template: 100px 1fr / 50px 1fr;
grid-template-areas	グリッドテンプレート領域を指定	grid-template-areas: "header header" "main sidebar" "footer footer";
grid-template-columns	グリッド列のサイズを指定	grid-template-columns: 100px 1fr 2fr;
grid-template-rows	グリッド行のサイズを指定	grid-template-rows: auto 1fr auto;
hanging-punctuation	ぶら下がり句読点を指定	hanging-punctuation: first;
height	要素の高さを指定	height: 100px;
hyphens	ハイフネーションを指定	hyphens: auto;
image-orientation	画像の向きを指定	image-orientation: 90deg;
image-rendering	画像のレンダリング方法を指定	image-rendering: crisp-edges;
inline-size	インライン方向のサイズを指定	inline-size: 300px;
inset	上下左右の位置を一括指定	inset: 10px 20px 30px 40px;
isolation	重ね合わせコンテキストを作成	isolation: isolate;
justify-content	フレックスアイテムの主軸方向の配置を指定	justify-content: space-between;
justify-items	グリッドアイテムの水平方向の配置を指定	justify-items: center;
justify-self	個別のグリッドアイテムの水平方向の配置を指定	justify-self: end;
left	左からの位置を指定	left: 20px;
letter-spacing	文字間隔を指定	letter-spacing: 2px;
line-break	行の折り返し方法を指定	line-break: strict;
line-height	行の高さを指定	line-height: 1.5;
list-style	リストスタイルを一括指定	list-style: square inside url("bullet.png");
list-style-image	リスト項目マーカーの画像を指定	list-style-image: url("bullet.png");
list-style-position	リスト項目マーカーの位置を指定	list-style-position: inside;
list-style-type	リスト項目マーカーの種類を指定	list-style-type: decimal;
margin	外側の余白を指定	margin: 10px 20px 30px 40px;
margin-bottom	下側の外側余白を指定	margin-bottom: 20px;
margin-left	左側の外側余白を指定	margin-left: 15px;
margin-right	右側の外側余白を指定	margin-right: 15px;
margin-top	上側の外側余白を指定	margin-top: 10px;
mask	マスクを指定	mask: url("mask.png");
mask-clip	マスクの適用範囲を指定	mask-clip: padding-box;
mask-composite	マスクの合成方法を指定	mask-composite: add;
mask-image	マスク画像を指定	mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-mode	マスクのモードを指定	mask-mode: alpha;
mask-origin	マスクの基準位置を指定	mask-origin: content-box;
mask-position	マスクの位置を指定	mask-position: center;
mask-repeat	マスクの繰り返しを指定	mask-repeat: no-repeat;
mask-size	マスクのサイズを指定	mask-size: cover;
mask-type	マスクの種類を指定	mask-type: luminance;
max-height	最大の高さを指定	max-height: 500px;
max-width	最大の幅を指定	max-width: 1200px;
min-height	最小の高さを指定	min-height: 100px;
min-width	最小の幅を指定	min-width: 200px;
mix-blend-mode	要素のブレンドモードを指定	mix-blend-mode: multiply;
object-fit	置換要素のコンテンツのサイズ調整方法を指定	object-fit: cover;
object-position	置換要素のコンテンツの位置を指定	object-position: center top;
opacity	不透明度を指定	opacity: 0.5;
order	フレックスアイテムの順序を指定	order: 2;
orphans	ページ下部に残す最小行数を指定	orphans: 3;
outline	アウトラインを一括指定	outline: 1px solid blue;
outline-color	アウトラインの色を指定	outline-color: red;
outline-offset	アウトラインのオフセットを指定	outline-offset: 5px;
outline-style	アウトラインのスタイルを指定	outline-style: dashed;
outline-width	アウトラインの幅を指定	outline-width: 2px;
overflow	はみ出し時の処理を指定	overflow: hidden;
overflow-wrap	長い単語の折り返しを指定	overflow-wrap: break-word;
overflow-x	水平方向のはみ出し時の処理を指定	overflow-x: scroll;
overflow-y	垂直方向のはみ出し時の処理を指定	overflow-y: auto;
padding	内側の余白を指定	padding: 10px 20px 30px 40px;
padding-bottom	下側の内側余白を指定	padding-bottom: 20px;
padding-left	左側の内側余白を指定	padding-left: 15px;
padding-right	右側の内側余白を指定	padding-right: 15px;
padding-top	上側の内側余白を指定	padding-top: 10px;
page-break-after	要素後の改ページを指定	page-break-after: always;
page-break-before	要素前の改ページを指定	page-break-before: avoid;
page-break-inside	要素内の改ページを指定	page-break-inside: avoid;
perspective	3D変換の遠近効果を指定	perspective: 1000px;
perspective-origin	3D変形の消失点を指定	perspective-origin: center top;
pointer-events	ポインタイベントの反応を指定	pointer-events: none;
position	配置方法を指定	position: absolute;
quotes	引用符を指定	quotes: "«" "»" "‹" "›";
resize	ユーザーによるリサイズを指定	resize: both;
right	右からの位置を指定	right: 20px;
rotate	要素の回転を指定	rotate: 45deg;
row-gap	グリッド行の間隔を指定	row-gap: 10px;
scale	要素の拡大縮小を指定	scale: 1.5;
scroll-behavior	スクロールの動作を指定	scroll-behavior: smooth;
scroll-margin	スクロールスナップの余白を指定	scroll-margin: 10px;
scroll-padding	スクロールコンテナの内側の余白を指定	scroll-padding: 20px;
scroll-snap-align	スクロールスナップの位置を指定	scroll-snap-align: center;
scroll-snap-stop	スクロールスナップの停止を指定	scroll-snap-stop: always;
scroll-snap-type	スクロールスナップの種類を指定	scroll-snap-type: x mandatory;
shape-image-threshold	シェイプの透明度しきい値を指定	shape-image-threshold: 0.5;
shape-margin	シェイプの余白を指定	shape-margin: 10px;
shape-outside	テキストの回り込み形状を指定	shape-outside: circle(50%);
tab-size	タブ文字の幅を指定	tab-size: 4;
table-layout	テーブルのレイアウト方法を指定	table-layout: fixed;
text-align	テキストの水平方向の配置を指定	text-align: center;
text-align-last	最後の行のテキスト配置を指定	text-align-last: justify;
text-combine-upright	縦書き時の文字の結合を指定	text-combine-upright: all;
text-decoration	テキストの装飾を一括指定	text-decoration: underline red wavy;
text-decoration-color	テキスト装飾の色を指定	text-decoration-color: blue;
text-decoration-line	テキスト装飾の線を指定	text-decoration-line: overline;
text-decoration-style	テキスト装飾のスタイルを指定	text-decoration-style: wavy;
text-emphasis	圏点を一括指定	text-emphasis: dot red;
text-indent	テキストのインデントを指定	text-indent: 2em;
text-justify	テキストの均等割付方法を指定	text-justify: inter-word;
text-orientation	縦書き時の文字の向きを指定	text-orientation: upright;
text-overflow	はみ出したテキストの処理を指定	text-overflow: ellipsis;
text-rendering	テキストのレンダリング方法を指定	text-rendering: optimizeLegibility;
text-shadow	テキストの影を指定	text-shadow: 2px 2px 4px #000000;
text-transform	テキストの変形を指定	text-transform: uppercase;
text-underline-position	下線の位置を指定	text-underline-position: under;
top	上からの位置を指定	top: 10px;
transform	変形を指定	transform: rotate(45deg) scale(1.5);
transform-origin	変形の基準点を指定	transform-origin: left top;
transform-style	子要素の3D変形を指定	transform-style: preserve-3d;
transition	トランジションを一括指定	transition: all 0.3s ease;
transition-delay	トランジションの遅延を指定	transition-delay: 1s;
transition-duration	トランジションの継続時間を指定	transition-duration: 0.5s;
transition-property	トランジションのプロパティを指定	transition-property: opacity, transform;
transition-timing-function	トランジションのタイミング関数を指定	transition-timing-function: ease-in-out;
translate	要素の移動を指定	translate: 50px 100px;
unicode-bidi	文字の方向性を指定	unicode-bidi: bidi-override;
user-select	テキスト選択の可否を指定	user-select: none;
vertical-align	インライン要素の垂直方向の配置を指定	vertical-align: middle;
visibility	要素の可視性を指定	visibility: hidden;
white-space	空白文字の処理を指定	white-space: nowrap;
widows	ページ上部に残す最小行数を指定	widows: 2;
width	要素の幅を指定	width: 300px;
will-change	変更が予想されるプロパティを指定	will-change: transform;
word-break	単語の改行方法を指定	word-break: break-all;
word-spacing	単語間の間隔を指定	word-spacing: 5px;
writing-mode	文章の方向を指定	writing-mode: vertical-rl;
z-index	重なり順を指定	z-index: 100;

この一覧には、ほぼすべてのCSSプロパティが含まれています。ただし、ブラウザ固有のプロパティや非常に新しい実験的なプロパティは省略しています。また、CSS仕様の更新により、新しいプロパティが追加されたり、既存のプロパティが非推奨になったりする可能性があります。

CSSプロパティの一覧はほぼ網羅されていますが、いくつかの追加のプロパティや、より新しいプロパティについて補足いたします。

名前	機能	用例
accent-color	フォーム要素のアクセントカラーを指定	accent-color: #ff4500;
aspect-ratio	要素のアスペクト比を指定	aspect-ratio: 16 / 9;
backdrop-filter	要素の背後に視覚効果を適用	backdrop-filter: blur(10px);
color-scheme	要素のカラースキームを指定	color-scheme: light dark;
column-span	段組みをまたぐ要素を指定	column-span: all;
contain	レイアウト最適化のヒントを指定	contain: layout;
content-visibility	コンテンツの可視性を最適化	content-visibility: auto;
counter-set	カウンタの値を設定	counter-set: chapter 1;
font-display	Webフォントの表示方法を指定	font-display: swap;
font-variation-settings	可変フォントの設定を指定	font-variation-settings: "wght" 700;
gap	グリッドやフレックスボックスの間隔を指定	gap: 10px 20px;
initial-letter	ドロップキャップを指定	initial-letter: 3;
inset	上下左右の位置を一括指定	inset: 10px;
place-content	align-content と justify-content を一括指定	place-content: center;
place-items	align-items と justify-items を一括指定	place-items: center;
place-self	align-self と justify-self を一括指定	place-self: start end;
row-gap	グリッド行の間隔を指定	row-gap: 20px;
scroll-margin	スクロールスナップの余白を指定	scroll-margin: 10px;
scroll-padding	スクロールコンテナの内側の余白を指定	scroll-padding: 20px;
text-decoration-thickness	テキスト装飾の太さを指定	text-decoration-thickness: 3px;
text-underline-offset	下線のオフセットを指定	text-underline-offset: 3px;
user-select	テキスト選択の可否を指定	user-select: none;

また、以下のようなロジカルプロパティも追加されています：

名前	機能	用例
block-size	ブロック方向のサイズを指定	block-size: 300px;
inline-size	インライン方向のサイズを指定	inline-size: 200px;
margin-block	ブロック方向のマージンを指定	margin-block: 20px;
margin-inline	インライン方向のマージンを指定	margin-inline: 10px;
padding-block	ブロック方向のパディングを指定	padding-block: 15px;
padding-inline	インライン方向のパディングを指定	padding-inline: 10px;
inset-block	ブロック方向の位置を指定	inset-block: 20px;
inset-inline	インライン方向の位置を指定	inset-inline: 15px;

これらのプロパティは、書字方向に依存しないレイアウトを作成する際に役立ちます。

最後に、CSS Houdini APIに関連する新しいプロパティもあります：

名前	機能	用例
paint-order	SVG要素の描画順序を指定	paint-order: stroke fill markers;

これらのプロパティリストは、CSSの進化に伴って常に変化しています。新しいプロパティが追加されたり、既存のプロパティが非推奨になったりする可能性があるため、最新の仕様や各ブラウザの対応状況を確認することが重要です。