【CSS】各プロパティの初期値一覧
css
プロパティ
初期値
CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。
このプロパティの初期値って何だったかな？と思い、その都度調べているので今回は自分メモ用としても活用する意味でCSSの各プロパティの初期値を一覧化してみました。
全CSSプロパティではなく、自分の中で使用したことのある、もしくは知っているプロパティのみをリスト化しています。
この記事の目次を表示
CSS Color Module Level 3
| プロパティ | 初期値 |
|---|---|
| color | ブラウザごとに異なる |
| opacity | 1.0 |
CSS Backgrounds and Borders Module Level 3
| プロパティ | 初期値 |
|---|---|
| background-attachment | scroll |
| background-clip | border-box |
| background-color | transparent |
| background-image | none |
| background-origin | padding-box |
| background-position | 0% 0% |
| background-repeat | repeat |
| background-size | auto |
| border-bottom-color | currentColor |
| border-bottom-left-radius | 0 |
| border-bottom-right-radius | 0 |
| border-bottom-style | none |
| border-bottom-width | medium |
| border-image-outset | 0 |
| border-image-repeat | stretch |
| border-image-slice | 100% |
| border-image-source | none |
| border-image-width | 1 |
| border-radius | 0 |
| border-left-color | currentColor |
| border-left-style | none |
| border-left-width | medium |
| border-right-color | currentColor |
| border-right-style | none |
| border-right-width | medium |
| border-top-color | currentColor |
| border-top-left-radius | 0 |
| border-top-right-radius | 0 |
| border-top-style | none |
| border-top-width | medium |
CSS Image Values and Replaced Content Module Level 3
| プロパティ | 初期値 |
|---|---|
| object-fit | fill |
| object-position | 50% 50% |
CSS Transforms
| プロパティ | 初期値 |
|---|---|
| transform | none |
| transform-origin | 50% 50% |
| transform-style | flat |
CSS Transitions
| プロパティ | 初期値 |
|---|---|
| transition-delay | 0 |
| transition-duration | 0 |
| transition-property | all |
| transition-timing-function | ease |
CSS Animations
| プロパティ | 初期値 |
|---|---|
| animation-delay | 0 |
| animation-direction | normal |
| animation-duration | 0 |
| animation-fill-mode | none |
| animation-iteration-count | 1 |
| animation-name | none |
| animation-play-state | running |
| animation-timing-function | ease |
CSS Flexible Box Layout Module
| プロパティ | 初期値 |
|---|---|
| align-content | stretch |
| align-items | stretch |
| align-self | auto |
| flex-basis | main-size |
| flex-direction | row |
| flex-grow | 0 |
| flex-shrink | 1 |
| flex-wrap | nowrap |
| justify-content | flex-start |
| order | 0 |
CSS Fonts Module Level 3
| プロパティ | 初期値 |
|---|---|
| font-family | ブラウザごとに異なる |
| font-feature-settings | normal |
| font-kerning | auto |
| font-language-override | normal |
| font-size | medium |
| font-size-adjust | none |
| font-stretch | normal |
| font-style | normal |
| font-synthesis | weight style |
| font-variant | normal |
| font-variant-alternates | normal |
| font-variant-caps | normal |
| font-variant-east-asian | normal |
| font-variant-ligatures | normal |
| font-variant-numeric | normal |
| font-variant-position | normal |
| font-weight | normal |
CSS3 Module: Paged Media
| プロパティ | 初期値 |
|---|---|
| fit | fill |
| fit-position | 0% 0% |
| image-orientation | auto |
| orphans | 2 |
| page | auto |
| page-break-after | auto |
| page-break-before | auto |
| page-break-inside | auto |
| size | auto |
| widows | 2 |
CSS Text Level 3
| プロパティ | 初期値 |
|---|---|
| hanging-punctuation | none |
| hyphens | manual |
| letter-spacing | normal |
| line-break | auto |
| overflow-wrap | normal |
| tab-size | 8 |
| text-align | auto |
| text-align-last | auto |
| text-decoration | none |
| text-decoration-color | currentColor |
| text-decoration-line | none |
| text-decoration-skip | objects |
| text-decoration-style | solid |
| text-emphasis-color | currentColor |
| text-emphasis-position | above right |
| text-emphasis-style | none |
| text-indent | 0 |
| text-justify | auto |
| text-shadow | none |
| text-transform | none |
| text-underline-position | auto |
| white-space | normal |
| word-break | normal |
| word-spacing | normal |
まとめ
いかがでしたか？
初期値が0だと思っていたものが実はautoだったり、その逆だったり。
意外な発見もあって面白かったです。
機会があれば、初期値の挙動についてもまとめてみたいと思います。
