とほほのCSS入門 (CSSリファレンス)

• CSS入門
• リンク
• サンプル
• 表記について
• CSS3関連規約
• CSS新機能

• tagName { ... }
• class { ... }
• #id { ... }
• * { ... }
• ns|E { ... }

• [attr]
• [attr="val"]
• [attr~="val"]
• [attr|="val"]
• [attr^="val"]
• [attr$="val"]
• [attr*="val"]
• [ns|attr]

• E, F { ... }
• E F { ... }
• E > F { ... }
• E + F { ... }
• E ~ F { ... }
• E || F { ... }

• :autofill
• :enabled
• :disabled
• :read-only
• :read-write
• :placeholder-shown
• :default
• :checked
• :indeterminate
• :blank
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :user-valid
• :user-invalid
• :dir(dir)
• :lang(c)
• :any-link
• :link
• :visited
• :local-link
• :target
• :target-within
• :scope
• :playing
• :paused
• :current
• :past
• :future
• :root
• :empty
• :nth-child(n)
• :nth-last-child(n)
• :first-child
• :last-child
• :only-child
• :nth-of-type(n)
• :nth-last-of-type(n)
• :first-of-type
• :last-of-type
• :only-of-type
• :nth-col
• :nth-last-col
• :hover
• :active
• :focus
• :focus-visible
• :focus-within
• :is(...)
• :not(...)
• :where(...)
• :has(...)
• :fullscreen
• :modal
• :picture-in-picture
• :defined

• ::first-line (:first-line)
• ::first-letter (:first-letter)
• ::cue
• ::selection
• ::target-text
• ::spelling-error
• ::grammar-error
• ::highlight(...)
• ::before (:before)
• ::after (:after)
• ::marker
• ::placeholder
• ::backdrop
• ::details-content
• ::file-selector-button
• ::part()
• ::slotted()

• @charset
• @container
• @counter-style
• @font-face
• @font-palette-values
• @import
• @keyframes
• @layer
• @media
• @namespace
• @page
• @supports
• @position-try
• @view-transition
• @starting-style

• !important

• <integer>
• <angle>
• <color>
• <image>
• <position>
• <frequency>
• <length>
• <percentage>
• <length-percentage>
• <resolution>
• <time>
• <url>
• <gradient>
• <custom-ident>
• initial
• revert
• inherit
• unset

• var()
• attr()
• url()
• toggle()

• calc()
• calc-size()

• min()
• max()
• clamp()

• round()
• mod()
• rem()

• sin()
• cos()
• tan()
• asin()
• acos()
• atan()
• atan2()

• image-set()
• cross-fade()
• paint()

• all

• color
• accent-color
• color-scheme
• opacity
• print-color-adjust
• rgb()
• rgba()
• hsl()
• hsla()

• linear-gradient()
• radial-gradient()
• conic-gradient()
• repeating-linear-gradient()
• repeating-radial-gradient()
• repeating-conic-gradient()

• font
• font-style
• font-variant
• font-weight
• font-size
• font-size-adjust
• font-family
• font-stretch
• font-synthesis
• font-synthesis-style
• font-synthesis-weight
• font-synthesis-small-caps
• font-synthesis-position
• font-kerning
• font-feature-settings
• font-variant-numeric
• font-variant-caps
• font-variant-ligatures
• font-variant-position
• font-variant-alternates
• font-variant-east-asian
• font-language-override
• font-variation-settings
• font-variant-emoji
• font-palette
• font-optical-sizing

• text-indent
• text-align
• text-align-last
• vertical-align
• text-underline-position
• text-underline-offset
• text-transform
• line-height
• word-spacing
• letter-spacing
• text-justify
• text-autospace
• text-kashida-space
• text-combine-upright
• text-rendering
• text-stroke
• text-stroke-color
• text-stroke-width
• text-rendering
• text-size-adjust
• text-spacing-trim
• tab-size
• layout-grid
• layout-grid-line
• layout-grid-char
• layout-grid-mode
• layout-grid-type
• user-select
• initial-letter

• white-space
• white-space-collapse
• white-space-trim
• line-break
• word-break
• word-wrap
• text-wrap
• text-wrap-mode
• text-wrap-style
• overflow-wrap
• hyphens
• hyphenate-character
• hyphenate-limit-chars

• text-shadow
• text-decoration
• text-decoration-color
• text-decoration-line
• text-decoration-skip
• text-decoration-skip-ink
• text-decoration-style
• text-decoration-thickness
• text-emphasis
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

• writing-mode
• text-orientation
• direction
• unicode-bidi

• ruby-align
• ruby-overhang
• ruby-position

• break-before
• break-after
• break-inside
• page-break-before
• page-break-after
• page-break-inside
• box-decoration-break

• list-style
• list-style-type
• list-style-position
• list-style-image

• counter-set
• counter-reset
• counter-increment
• counter()
• counters()

• caption-side
• table-layout
• border-collapse
• border-spacing
• empty-cells

• quotes
• content
• marker-offset

• size
• marks
• page
• orphans
• widows

• mix-blend-mode
• background-blend-mode
• isolation

• position
• top
• right
• bottom
• left
• inset
• z-index

• float
• clear
• overflow
• overflow-x
• overflow-y
• text-overflow
• line-clamp
• visibility
• display
• appearance
• contain
• contain-intrinsic-height
• contain-intrinsic-size
• contain-intrinsic-width
• content-visibility

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

• width
• height
• min-width
• min-height
• max-width
• max-height
• box-sizing
• resize
• zoom
• aspect-ratio
• field-sizing

• background
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-position-x
• background-position-y
• background-clip
• background-origin
• background-size
• backdrop-filter

• border
• border-top
• border-right
• border-bottom
• border-left
• border-width
• border-top-width
• border-right-width
• border-bottom-width
• border-left-width
• border-style
• border-top-style
• border-right-style
• border-bottom-style
• border-left-style
• border-color
• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

• border-radius
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius

• border-image
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

• box-shadow

• outline
• outline-width
• outline-style
• outline-color
• outline-offset

• image-orientation
• image-rendering
• object-fit
• object-position

• clip
• clip-path
• mask-image
• mask-size
• mask-repeat
• mask-mode
• mask-position
• mask-origin
• mask-clip
• mask-composite
• mask

• filter
• filter (IE4-9)
• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()

• touch-action

• translate
• scale
• rotate
• transform
• transform-origin
• transform-style
• perspective
• perspective-origin
• backface-visibility
• matrix()
• matrix3d()
• perspective()
• rotate()
• rotate3d()
• rotateX()
• rotateY()
• rotateZ()
• scale()
• scale3d()
• scaleX()
• scaleY()
• scaleZ()
• skew()
• skewX()
• skewY()
• translate()
• translate3d()
• translateX()
• translateY()
• translateZ()
• will-change

• transition
• transition-property
• transition-duration
• transition-timing-function
• transition-delay
• interpolate-size
• view-transition-name
• overlay

• animation
• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

• shape-outside
• shape-margin
• shape-image-threshold

• columns
• column-count
• column-width
• column-rule
• column-rule-width
• column-rule-style
• column-rule-color
• column-span
• column-fill

• flex-flow
• flex-direction
• flex-wrap
• order
• flex
• flex-grow
• flex-shrink
• flex-basis

• grid
• grid-template
• grid-template-areas
• grid-template-rows
• grid-template-columns
• grid-auto-flow
• grid-auto-rows
• grid-auto-columns
• grid-area
• grid-row
• grid-column
• grid-row-start
• grid-row-end
• grid-column-start
• grid-column-end

• gap
• column-gap
• row-gap

• justify-self
• justify-items
• justify-content
• align-self
• align-items
• align-content
• place-self
• place-items
• place-content

• container
• container-name
• container-type

• anchor-name
• position-anchor
• position-area
• position-try-fallbacks
• position-try-order
• position-try
• anchor-scope
• position-visibility
• anchor()
• anchor-size()

• scroll-behavior
• scroll-snap-type
• scroll-snap-align
• scroll-margin
• scroll-margin-top
• scroll-margin-bottom
• scroll-margin-right
• scroll-margin-left
• scroll-padding
• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-right
• scroll-padding-left
• overscroll-behavior
• overscroll-behavior-x
• overscroll-behavior-y
• scrollbar-color
• scrollbar-width
• scrollbar-base-color
• scrollbar-track-color
• scrollbar-face-color
• scrollbar-shadow-color
• scrollbar-darkshadow-color
• scrollbar-highlight-color
• scrollbar-3dlight-color
• scrollbar-arrow-color

• cursor
• ime-mode
• behavior
• caret-color
• pointer-events

• volume
• speak
• pause
• pause-before
• pause-after
• cue
• cue-after
• cue-before
• play-during
• azimuth
• elevation
• speech-rate
• voice-family
• pitch
• pitch-range
• stress
• richness
• speak-punctuation
• speak-numeral
• speak-header

• block-size
• inline-size
• border-block
• border-inline
• border-block-start
• border-inline-start
• border-block-end
• border-inline-end
• border-block-color
• border-inline-color
• border-block-start-color
• border-inline-start-color
• border-block-end-color
• border-inline-end-color
• border-block-style
• border-inline-style
• border-block-start-style
• border-inline-start-style
• border-block-end-style
• border-inline-end-style
• border-block-width
• border-inline-width
• border-block-start-width
• border-inline-start-width
• border-block-end-width
• border-inline-end-width
• inset-block
• inset-inline
• inset-block-start
• inset-inline-start
• inset-block-end
• inset-inline-end
• margin-block
• margin-inline
• margin-block-start
• margin-inline-start
• margin-block-end
• margin-inline-end
• padding-block
• padding-inline
• padding-block-start
• padding-inline-start
• padding-block-end
• padding-inline-end
• max-block-size
• max-inline-size
• min-block-size
• min-inline-size
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius
• overflow-block
• overflow-inline
• overscroll-behavior-block
• overscroll-behavior-inline
• scroll-margin-block
• scroll-margin-inline
• scroll-margin-block-start
• scroll-margin-inline-start
• scroll-margin-block-end
• scroll-margin-inline-end
• scroll-padding-block
• scroll-padding-inline
• scroll-padding-block-start
• scroll-padding-inline-start
• scroll-padding-block-end
• scroll-padding-inline-end
• contain-intrinsic-block-size
• contain-intrinsic-inline-size