CSS values syntax

Animations

プロパティ 構文 初期値 継承 メディア
animation <single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> 以下の各ロングハンドプロパティの初期値が使用されます:
  • animation-name: none
  • animation-duration: 0s
  • animation-timing-function: ease
  • animation-delay: 0s
  • animation-iteration-count: 1
  • animation-direction: normal
  • animation-fill-mode: none
継承しない visual
animation-delay <time># 0s 継承しない visual
animation-direction <single-animation-direction>#
where <single-animation-direction> = normal | reverse | alternate | alternate-reverse
normal 継承しない visual
animation-duration <time># 0s 継承しない visual
animation-fill-mode <single-animation-fill-mode>#
where <single-animation-fill-mode> = none | forwards | backwards | both
none 継承しない visual
animation-iteration-count <single-animation-iteration-count>#
where <single-animation-iteration-count> = infinite | <number>
1 継承しない visual
animation-name <single-animation-name>#
where <single-animation-name> = none | IDENT
none 継承しない visual
animation-play-state <single-animation-play-state>#
where <single-animation-play-state> = running | paused
running 継承しない visual
animation-timing-function <timing-function># ease 継承しない visual

Transitions

プロパティ 構文 初期値 継承 メディア
transition [ none | <single-transition-property> ] || <time> || <timing-function> || <time> 以下の各ロングハンドプロパティの初期値が使用されます:
  • transition-delay: 0s
  • transition-duration: 0s
  • transition-property: all
  • transition-timing-function: ease
継承しない interactive
transition-delay <time># 0s 継承しない interactive
transition-duration <time># 0s 継承しない interactive
transition-property none | <single-transition-property>#  [ ‘,’ <single-transition-property># ]*

where <single-transition-property> = all | IDENT
all 継承しない visual
transition-timing-function <timing-function># ease 継承しない interactive

Transforms

プロパティ 構文 初期値 継承 メディア
transform none | <transform-function>+ none 継承しない visual
transform-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] <length>? 50% 50% 0 継承しない visual
transform-style flat | preserve-3d flat 継承しない visual
perspective none | <length> none 継承しない visual
perspective-origin [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ] 50% 50% 継承しない visual
backface-visibility visible | hidden visible 継承しない visual

Color

プロパティ 構文 初期値 継承 メディア
color <color> Varies from one browser to another 継承する visual
opacity <number> 1.0 継承しない visual

Columns

プロパティ 構文 初期値 継承 メディア
columns <'column-width'> || <'column-count'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • column-width: auto
  • column-count: auto
継承しない visual
column-width <length> | auto auto 継承しない visual
column-count <number> | auto auto 継承しない visual
column-gap <length> | normal normal 継承しない visual
column-rule <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • column-rule-width: medium
  • column-rule-style: none
  • column-rule-color: currentColor
継承しない visual
column-rule-color <color> currentColor 継承しない visual
column-rule-style <br-style> none 継承しない visual
column-rule-width <br-width> medium 継承しない visual
break-before auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto 継承しない paged
break-after auto | always | avoid | left | right | page | column | avoid-page | avoid-colum auto 継承しない paged
break-inside auto | avoid | avoid-page | avoid-column auto 継承しない paged
column-span none | all none 継承しない visual
column-fill auto | balance balance 継承しない visual, but, in continuous media, has no effect in overflow columns

Text

プロパティ 構文 初期値 継承 メディア
hyphens none | manual | auto manual 継承する visual
letter-spacing normal | <length> normal 継承する visual
word-wrap normal | break-word normal 継承する visual
overflow-wrap normal | break-word normal 継承する visual
text-transform none | capitalize | uppercase | lowercase | full-width none 継承する visual
tab-size <integer> 8 継承する visual
text-align [ start | end | left | right | center ] || <string> ] | justify | match-parent | start end start, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser. 継承する visual
text-align-last auto | start | end | left | right | center | justify auto 継承する visual
text-indent <length> | <percentage> && [ hanging || each-line ] 0 継承する visual
direction ltr | rtl ltr 継承する visual
white-space normal | pre | nowrap | pre-wrap | pre-line normal 継承する visual
word-break normal | break-all | keep-all normal 継承する visual
word-spacing normal | <length> normal 継承する visual

Text decorations

プロパティ 構文 初期値 継承 メディア
text-decoration <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • text-decoration-color: currentColor
  • text-decoration-style: solid
  • text-decoration-line: none
継承しない visual
text-decoration-color <color> currentColor 継承しない visual
text-decoration-style solid | double | dotted | dashed | wavy solid 継承しない visual
text-decoration-line none | [ underline || overline || line-through || blink ] none 継承しない visual
text-decoration-skip none | [ objects || spaces || ink || edges || box-decoration ] objects 継承する visual
text-underline-position auto | alphabetic | [ under || [ left | right ] ] auto 継承する visual

Flexible boxes

プロパティ 構文 初期値 継承 メディア
align-content flex-start | flex-end | center | space-between | space-around | stretch stretch 継承しない visual
align-items flex-start | flex-end | center | baseline | stretch stretch 継承しない visual
align-self auto | flex-start | flex-end | center | baseline | stretch auto 継承しない visual
flex-basis <'width'> auto 継承しない visual
flex-direction row | row-reverse | column | column-reverse row 継承しない visual
flex-flow <'flex-direction'> || <'flex-wrap'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • flex-direction: row
  • flex-wrap: nowrap
継承しない visual
flex-grow <number> 0 継承しない visual
flex-shrink <number> 1 継承しない visual
flex none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 以下の各ロングハンドプロパティの初期値が使用されます:
  • flex-grow: 0
  • flex-shrink: 1
  • flex-basis: auto
継承しない visual
flex-wrap nowrap | wrap | wrap-reverse nowrap 継承しない visual
justify-content flex-start | flex-end | center | space-between | space-around flex-start 継承しない visual
order <integer> 0 継承しない visual

Background & Borders

プロパティ 構文 初期値 継承 メディア
background [ <bg-layer> , ]* <final-bg-layer>
where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>
以下の各ロングハンドプロパティの初期値が使用されます:
  • background-image: none
  • background-position: 0% 0%
  • background-size: auto auto
  • background-repeat: repeat
  • background-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • background-clip: border-box
  • background-color: transparent
継承しない visual
background-attachment <attachment>#
where <attachment> = scroll | fixed | local
scroll 継承しない visual
background-clip <box>#
where <box> = border-box | padding-box | content-box
border-box 継承しない visual
background-color <color> transparent 継承しない visual
background-image <bg-image>#
where <bg-image> = none | <image>
none 継承しない visual
background-origin <box># padding-box 継承しない visual
background-position <position># 0% 0% 継承しない visual
background-repeat <repeat-style>#
where <repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
repeat 継承しない visual
background-size <bg-size>#
where <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
auto auto 継承しない visual
border <br-width> || <br-style> || <color> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-width: 以下の各ロングハンドプロパティの初期値が使用されます:
    • border-bottom-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-width: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • border-style: 以下の各ロングハンドプロパティの初期値が使用されます:
    • border-bottom-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-bottom-style: is itself a shorthand, its initial value is the concatenation of its own longhand properties
  • border-color: 以下の各ロングハンドプロパティの初期値が使用されます:
    • border-bottom-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-left-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-right-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
    • border-top-color: is itself a shorthand, its initial value is the concatenation of its own longhand properties
継承しない visual
border-bottom <br-width> || <br-style> || <color> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-bottom-width: medium
  • border-bottom-style: none
  • border-bottom-color: currentColor
継承しない visual
border-bottom-color <color> currentColor 継承しない visual
border-bottom-left-radius [ <length> | <percentage> ]{1,2} 0 継承しない visual
border-bottom-right-radius [ <length> | <percentage> ]{1,2} 0 継承しない visual
border-bottom-style <br-style> none 継承しない visual
border-bottom-width <br-width> medium 継承しない visual
border-color <color>{1,4} 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-bottom-color: currentColor
  • border-left-color: currentColor
  • border-right-color: currentColor
  • border-top-color: currentColor
継承しない visual
border-image <'border-image-source'> || <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]? || <'border-image-repeat'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-image-source: none
  • border-image-slice: 100%
  • border-image-width: 1
  • border-image-outset: 0s
  • border-image-repeat: stretch
継承しない visual
border-image-outset [ <length> | <number> ]{1,4} 0s 継承しない visual
border-image-repeat [ stretch | repeat | round ]{1,2} stretch 継承しない visual
border-image-slice [<number> | <percentage>]{1,4} && fill? 100% 継承しない visual
border-image-source none | <image> none 継承しない visual
border-image-width [ <length> | <percentage> | <number> | auto ]{1,4} 1 継承しない visual
border-left <br-width> || <br-style> || <color> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-left-width: medium
  • border-left-style: none
  • border-left-color: currentColor
継承しない visual
border-left-color <color> currentColor 継承しない visual
border-left-style <br-style> none 継承しない visual
border-left-width <br-width> medium 継承しない visual
border-radius [ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]? 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-bottom-left-radius: 0
  • border-bottom-right-radius: 0
  • border-top-left-radius: 0
  • border-top-right-radius: 0
継承しない visual
border-right <br-width> || <br-style> || <color> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-right-width: medium
  • border-right-style: none
  • border-right-color: currentColor
継承しない visual
border-right-color <color> currentColor 継承しない visual
border-right-style <br-style> none 継承しない visual
border-right-width <br-width> medium 継承しない visual
border-style <br-style>{1,4}
where <br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
以下の各ロングハンドプロパティの初期値が使用されます:
  • border-bottom-style: none
  • border-left-style: none
  • border-right-style: none
  • border-bottom-style: none
継承しない visual
border-top <br-width> || <br-style> || <color> 以下の各ロングハンドプロパティの初期値が使用されます:
  • border-top-width: medium
  • border-top-style: none
  • border-top-color: currentColor
継承しない visual
border-top-color <color> currentColor 継承しない visual
border-top-left-radius [ <length> | <percentage> ]{1,2} 0 継承しない visual
border-top-right-radius [ <length> | <percentage> ]{1,2} 0 継承しない visual
border-top-style <br-style> none 継承しない visual
border-top-width <br-width> medium 継承しない visual
border-width <br-width>{1,4}
where <br-width> = <length> | thin | medium | thick
以下の各ロングハンドプロパティの初期値が使用されます:
  • border-bottom-width: medium
  • border-left-width: medium
  • border-right-width: medium
  • border-bottom-width: medium
継承しない visual

Box Model

プロパティ 構文 初期値 継承 メディア
box-decoration-break slice | clone slice 継承しない visual
box-shadow none | <shadow>#
where <shadow> = inset? && [ <length>{2,4} && <color>? ]
none 継承しない visual
margin [ <length> | <percentage> | auto ]{1,4} 以下の各ロングハンドプロパティの初期値が使用されます:
  • margin-bottom: 0
  • margin-left: 0
  • margin-right: 0
  • margin-top: 0
継承しない visual
margin-bottom <length> | <percentage> | auto 0 継承しない visual
margin-left <length> | <percentage> | auto 0 継承しない visual
margin-right <length> | <percentage> | auto 0 継承しない visual
margin-top <length> | <percentage> | auto 0 継承しない visual
padding [ <length> | <percentage> ]{1,4} 以下の各ロングハンドプロパティの初期値が使用されます:
  • padding-bottom: 0
  • padding-left: 0
  • padding-right: 0
  • padding-top: 0
継承しない visual
padding-bottom <length> | <percentage> 0 継承しない visual
padding-left <length> | <percentage> 0 継承しない visual
padding-right <length> | <percentage> 0 継承しない visual
padding-top <length> | <percentage> 0 継承しない visual
box-sizing content-box | padding-box | border-box content-box 継承しない visual
max-height <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none 継承しない visual
min-height <length> | <percentage> | max-content | min-content | fit-content | fill-available 0 継承しない visual
height auto | <length> | <percentage> auto 継承しない visual
max-width <length> | <percentage> | none | max-content | min-content | fit-content | fill-available none 継承しない visual
min-width <length> | <percentage> | max-content | min-content | fit-content | fill-available 0 継承しない visual
width [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | auto auto 継承しない visual
overflow visible | hidden | scroll | auto visible 継承しない visual
overflow-x visible | hidden | scroll | auto visible 継承しない visual
overflow-y visible | hidden | scroll | auto visible 継承しない visual
visibility visible | hidden | collapse visible 継承する visual

Table

プロパティ 構文 初期値 継承 メディア
border-collapse collapse | separate separate 継承する visual
border-spacing <length> <length>? 0 継承する visual
caption-side top | bottom top 継承する visual
empty-cells show | hide show 継承する visual
table-layout auto | fixed auto 継承しない visual
vertical-align baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length> baseline 継承しない visual

Positioning

プロパティ 構文 初期値 継承 メディア
bottom <length> | <percentage> | auto auto 継承しない visual
left <length> | <percentage> | auto auto 継承しない visual
right <length> | <percentage> | auto auto 継承しない visual
top <length> | <percentage> | auto auto 継承しない visual
float left | right | none none 継承しない visual
clear none | left | right | both none 継承しない visual
position static | relative | absolute | fixed static 継承しない visual
z-index auto | <integer> auto 継承しない visual

Fonts

プロパティ 構文 初期値 継承 メディア
font [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar 以下の各ロングハンドプロパティの初期値が使用されます:
  • font-style: normal
  • font-variant: normal
  • font-weight: normal
  • font-stretch: normal
  • font-size: medium
  • line-height: normal
  • font-family: ユーザエージェントに依存
継承する visual
font-family [ <family-name> | <generic-family> ]#
where <family-name> = <string> | <IDENT>+
<generic-name> = serif | sans-serif | cursive | fantasy | monospace
ユーザエージェントに依存 継承する visual
font-variant normal | small-caps normal 継承する visual
font-weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 normal 継承する visual
font-stretch normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded normal 継承する visual
font-size <absolute-size> | <relative-size> | <length> | <percentage>
where <absolute-size> = xx-small | s-small | small | medium | large | x-large | xx-large
<relative-size> = larger | smaller
medium 継承する visual
line-height normal | <number> | <length> | <percentage> normal 継承する visual
font-feature-settings normal | <feature-tag-value>#
where <feature-tag-value> = <string> [ <integer> | on | off ]?
normal 継承する visual
font-size-adjust none | auto | <number> none 継承する visual
font-style normal | italic | oblique normal 継承する visual

Images

プロパティ 構文 初期値 継承 メディア
image-rendering auto | crisp-edges | pixelated auto 継承する visual
image-orientation <angle> 0deg 継承する visual

Counters & Lists

プロパティ 構文 初期値 継承 メディア
counter-increment [<user-ident> <integer>?]+ | none none 継承しない all
counter-reset [<user-ident> <integer>?]+ | none none 継承しない all
list-style <'list-style-image'> || <'list-style-position'> || <'list-style-type'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • list-style-image: none
  • list-style-position: outside
  • list-style-type: disc
継承する visual
list-style-image <uri> | none none 継承する visual
list-style-position inside | outside outside 継承する visual
list-style-type disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none disc 継承する visual

Page

プロパティ 構文 初期値 継承 メディア
orphans <integer> 2 継承する visual, paged
page-break-after auto | always | avoid | left | right auto 継承しない visual, paged
page-break-before auto | always | avoid | left | right auto 継承しない visual, paged
page-break-inside auto | always auto 継承しない visual, paged
widows <integer> 2 継承する visual, paged

User interface

プロパティ 構文 初期値 継承 メディア
outline <'outline-color'> || <'outline-width'> || <'outline-style'> 以下の各ロングハンドプロパティの初期値が使用されます:
  • outline-color: invert, for browsers supporting it, currentColor for the other
  • outline-width: medium
  • outline-style: none
継承しない visual, interactive
outline-color <color> | invert invert, for browsers supporting it, currentColor for the other 継承しない visual, interactive
outline-width <br-width> medium 継承しない visual, interactive
outline-style <br-style> none 継承しない visual, interactive
outline-offset <length> 0 継承しない visual, interactive
cursor [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out ] ] auto 継承する visual, interactive
resize none | both | horizontal | vertical none 継承しない visual
text-overflow [ clip | ellipsis | <string> ]{1,2} clip 継承しない visual

Generated content

プロパティ 構文 初期値 継承 メディア
content normal | none | [ <string> | <uri> | <counter> | attr() | open-quote | close-quote | no-open-quote | no-close-quote ]+ normal 継承しない all
quotes [<string> <string>]+ | none ユーザエージェント固有 継承する visual

Miscellaneous

プロパティ 構文 初期値 継承 メディア
clip <shape> | auto
where <shape> = rect(<top>, <right>, <bottom>, <left>)
auto 継承しない visual
display none | inline | block | list-item | inline-block | inline-table | table | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | flex | inline-flex | grid | inline-grid | run-in inline 継承しない all
unicode-bidi normal | embed | isolate | bidi-override | isolate-override | plaintext normal 継承しない visual
ime-mode auto | normal | active | inactive | disabled auto 継承しない interactive

Document Tags and Contributors

Contributors to this page: ethertank, Marsf
最終更新者: ethertank,