CSS リファレンス
==========

この **CSS リファレンス** は、すべての標準 CSS プロパティ、擬似クラス、擬似要素、データ型、関数記法、アットルール のアルファベット順の索引として利用できます。また、すべての CSS 種類別セレクター の一覧および 重要な CSS の概念 の一覧もあります。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。

基本的なルールと構文
----------

### スタイルルールの構文
```

スタイルルール ::=
    セレクターリスト {
      プロパティリスト
    }
```


ここで、
```

セレクターリスト ::=
    セレクター[:擬似クラス] [::擬似要素]
    [, セレクターリスト]

プロパティリスト ::=
    [プロパティ : 値] [; プロパティリスト]
```


下記の *セレクター*、*擬似クラス*、*擬似要素* の一覧を参照してください。 各指定*値*の構文は、各指定*プロパティ*に定義されたデータ型に依存します。

#### スタイルルールの例


```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


初心者レベルの CSS セレクター構文への入門については、 CSS セレクターのガイドをご覧ください。ルール定義内での CSS 構文 エラーは、そのルール全体を無効にするので十分に注意してください。無効なルールはブラウザーにより無視されます。 CSS ルールの定義はすべて (ASCII) テキストベース であり、DOM-CSS / CSSOM (ルール管理システム) は オブジェクトベース なので注意してください。

### アットルールの構文

アットルールの構造は様々であるため、知りたい構文について調べるにはアットルールのページをご覧ください。

索引
--

**メモ:** この索引でのプロパティ名は、CSS 標準の名前と異なる JavaScript の名前は含んでいません。

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()` (en-US)
* `accent-color`
* `acos()` (en-US)
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks`
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range`
* `animation-range-end`
* `animation-range-start`
* `animation-timeline`
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)`
* `asin()` (en-US)
* `aspect-ratio`
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before`
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
* `conic-gradient()`
* `contain`
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size`
* `contain-intrinsic-width` (en-US)
* `container`
* `container-name`
* `container-type`
* `content`
* `content-visibility`
* `contrast()`
* `cos()` (en-US)
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()`
* `cubic-bezier()`
* `::cue`
* `::cue-region`
* `:current` (en-US)
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>`
* `:default`
* `:defined`
* `descent-override (@font-face)`
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)`
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)`
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)`
* `font-weight`
* `font-weight (@font-face)`
* `forced-color-adjust`
* `format()`
* `<frequency>`
* `<frequency-percentage>`
* `:fullscreen`
* `:future` (en-US)

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end`
* `grid-column-start`
* `grid-row`
* `grid-row-end`
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()`
* `hwb()`
* `hyphenate-character`
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>`
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution`
* `image-set()`
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)`
* `initial`
* `initial-letter`
* `initial-letter-align`
* `initial-value (@property)`
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks`

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)`
* `line-height`
* `line-height-step`
* `<line-style>` (en-US)
* `linear-gradient()`
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link` (en-US)
* `log()` (en-US)

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
* `masonry-auto-flow`
* `math-depth`
* `math-shift`
* `math-style`
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size`
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)`
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin`
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block`
* `overscroll-behavior-inline`
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after`
* `page-break-before`
* `page-break-inside`
* `page-orientation (@page)` (en-US)
* `paint()`
* `paint-order`
* `::part`
* `:past` (en-US)
* `path()`
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self`
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)`
* `print-color-adjust`
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()`
* `range (@counter-style)`
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()`
* `rem()` (en-US)
* `repeat()`
* `repeating-conic-gradient()` (en-US)
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()` (en-US)
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position`

### S

* `saturate()`
* `scale`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `:scope`
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline`
* `scroll-timeline-axis`
* `scroll-timeline-name`
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()`
* `<shape>`
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)`
* `size-adjust (@font-face)`
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()` (en-US)
* `src (@font-face)`
* `@starting-style` (en-US)
* `steps()`
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)`
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)`
* `symbols()`
* `syntax (@property)`
* `system (@counter-style)`
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()` (en-US)
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within` (en-US)
* `text-align`
* `text-align-last`
* `text-combine-upright`
* `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-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>`
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()`
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)`
* `unset`
* `<url>`
* `url()`
* `:user-invalid`
* `user-select`
* `:user-valid`

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline`
* `view-timeline-axis`
* `view-timeline-inset`
* `view-timeline-name`
* `::view-transition`
* `::view-transition-group`
* `::view-transition-image-pair`
* `view-transition-name`
* `::view-transition-new`
* `::view-transition-old`
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

セレクター
-----

以下は様々なセレクターで、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。

### 基本セレクター

**基本セレクター**は基礎的なセレクターです。これらは最も基本的なセレクターで、他のより複雑なセレクターを作成するために頻繁に組み合わせられます。

* 全称セレクター `*`
* 要素型セレクター `elementname`
* クラスセレクター `.classname`
* ID セレクター `#idname`
* 属性セレクター `[attr=value]`
### グループ化セレクター

セレクターリスト `A, B`

`A` と `B` の両方の要素が選択されることを指定します。これは複数の一致する要素をグループ化する方法です。

### 結合子

結合子 (Combinator) は 2 つ以上の単純セレクターの関係、例えば「`A` は `B` の子である」や「`A` は `B` の子孫である」などを確立し、複合セレクターを作成するためのセレクターです。

次兄弟結合子 `A + B`

`A` と `B` のそれぞれで選択された要素が同じ親を持ち、かつ `B` で選択された要素が `A` で選択された要素の水平的な直後にあることを指定します。

後続兄弟結合子 `A ~ B`

`A` と `B` のそれぞれで選択された要素が同じ親を共有しており、かつ `A` で選択された要素が `B` の前に — ただし直前である必要はありませんが — 来た場合を指定します。

子結合子 `A > B`

`B` で選択された要素のうち、 `A` で選択された要素の直接の子であるものを指定します。

子孫結合子 `A B`

`B` で選択された要素のうち、 `A`で選択された要素の子孫であるものを指定します。直接の子である必要はありません。

列結合子 `A || B` 
Experimental

`B` で指定された要素のうち、 `A` で指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。

### 擬似クラスと擬似要素

擬似クラス `:`

選択された要素が特別な状態にあることを指定します。

擬似要素 `::`

HTML に含まれていないエンティティを表します。


**メモ:** **関連情報:** Selectors Level 4 仕様書におけるセレクター。

概念
--

### 構文と意味

* CSS 構文
* アットルール
* カスケード
* コメント
* 記述子
* 継承
* 一括指定プロパティ
* 優先度
* 値定義構文
* CSS 単位と値の種類
* CSS 関数記法
### 値

* 実効値
* 算出値
* 初期値
* 解決値
* 指定値
* 使用値
### レイアウト

* ブロック整形コンテキスト
* ボックスモデル
* 包含ブロック
* レイアウトモード
* マージンの相殺
* 置換要素
* 重ね合わせコンテキスト
* 視覚整形モデル
DOM-CSS / CSSOM
---------------

### 主なオブジェクトの種類

* `Document.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText` (セレクターとスタイル)
* `cssRules[i].selectorText`
* `HTMLElement.style`
* `HTMLElement.style.cssText` (スタイルのみ)
* `Element.className`
* `Element.classList`
### 重要なメソッド

* `CSSStyleSheet.insertRule()`
* `CSSStyleSheet.deleteRule()`
関連情報
----

* Mozilla CSS 拡張 (`-moz-` 接頭辞付き)
* WebKit CSS 拡張 (ほとんどが `-webkit-` 接頭辞付き)
外部リンク
-----

* CSS 目次 (w3.org)