TL
ツールラボ
💰寄付する
💰寄付する

CSSプロパティリファレンス

フレックスボックス・グリッド・タイポグラフィ・アニメーションなどの総合CSSリファレンスです。

52個のプロパティ

displayレイアウト

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionレイアウト

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftレイアウト

Offset for positioned elements.

<length> | <percentage> | auto
floatレイアウト

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearレイアウト

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-indexレイアウト

Sets stacking order of elements.

auto | <integer>
overflowレイアウト

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightボックスモデル

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightボックスモデル

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightボックスモデル

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginボックスモデル

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingボックスモデル

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderボックスモデル

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radiusボックスモデル

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingボックスモデル

How width/height is calculated.

content-box | border-box
box-shadowボックスモデル

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-directionFlexbox

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrapFlexbox

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-contentFlexbox

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsFlexbox

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-contentFlexbox

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flexFlexbox

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gapFlexbox

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columnsGrid

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rowsGrid

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-columnGrid

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-rowGrid

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-areaGrid

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-sizeタイポグラフィ

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-familyタイポグラフィ

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weightタイポグラフィ

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-styleタイポグラフィ

Italic or oblique font.

normal | italic | oblique
line-heightタイポグラフィ

Height of a line box.

normal | <number> | <length> | <percentage>
text-alignタイポグラフィ

Horizontal alignment of text.

left | right | center | justify | start | end
text-decorationタイポグラフィ

Decorative lines on text.

none | underline | overline | line-through | blink
text-transformタイポグラフィ

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingタイポグラフィ

Space between characters.

normal | <length>
word-spacingタイポグラフィ

Space between words.

normal | <length>
colorビジュアル

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundビジュアル

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorビジュアル

Background color of element.

<color> | transparent
opacityビジュアル

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityビジュアル

Shows or hides element without changing layout.

visible | hidden | collapse
transitionアニメーション

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationアニメーション

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transformアニメーション

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-changeアニメーション

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

このツールについて

このリファレンスは、レイアウト、ボックスモデル、Flexbox、Grid、タイポグラフィ、ビジュアル、アニメーション、UIインタラクションの8つのカテゴリにわたる最も一般的なCSSプロパティをカバーしています。

検索ボックスを使用してプロパティ名、説明、または許容値でフィルタリングします。カテゴリフィルターを使用して特定のグループを参照します。

使い方

  1. 検索ボックスにプロパティ名またはキーワードを入力してリストをフィルタリングします。
  2. ドロップダウンからカテゴリを選択して、そのグループのみを表示します。
  3. 各行にはプロパティ名、カテゴリタグ、説明、許容値が表示されます。

活用事例

フロントエンド開発者が開発中にプロパティ名と有効な値を検索します。CSSを学ぶ学生が利用可能なプロパティを探索するために使用します。

よくある質問

  • すべてのCSSプロパティが含まれていますか？ — いいえ。最も一般的に使用されるプロパティのみをカバーしています。
  • ベンダープレフィックス付きプロパティは掲載されていますか？ — いいえ。プレフィックスなしの標準プロパティのみが掲載されています。