フリーランス|WEB 制作経験丸7年、制作会社様からのご依頼に丁寧・高クオリティでお手伝いいたします。 IRODORI DESIGN

B L O G

【CSS】各プロパティの初期値一覧

css
プロパティ
初期値

こんにちは、岐阜・名古屋を拠点に全国各地からご依頼いただくWEBサイトを制作しているフリーランスエンジニアの寺井です。

CSSを使用している際、プロパティの値を初期値に戻したいと思うことが多々あります。
このプロパティの初期値って何だったかな?と思い、その都度調べているので今回は自分メモ用としても活用する意味でCSSの各プロパティの初期値を一覧化してみました。
全CSSプロパティではなく、自分の中で使用したことのある、もしくは知っているプロパティのみをリスト化しています。

CSS Color Module Level 3

プロパティ初期値
colorブラウザごとに異なる
opacity1.0

CSS Backgrounds and Borders Module Level 3

プロパティ初期値
background-attachmentscroll
background-clipborder-box
background-colortransparent
background-imagenone
background-originpadding-box
background-position0% 0%
background-repeatrepeat
background-sizeauto
border-bottom-colorcurrentColor
border-bottom-left-radius0
border-bottom-right-radius0
border-bottom-stylenone
border-bottom-widthmedium
border-image-outset0
border-image-repeatstretch
border-image-slice100%
border-image-sourcenone
border-image-width1
border-radius0
border-left-colorcurrentColor
border-left-stylenone
border-left-widthmedium
border-right-colorcurrentColor
border-right-stylenone
border-right-widthmedium
border-top-colorcurrentColor
border-top-left-radius0
border-top-right-radius0
border-top-stylenone
border-top-widthmedium

CSS Image Values and Replaced Content Module Level 3

プロパティ初期値
object-fitfill
object-position50% 50%

CSS Transforms

プロパティ初期値
transformnone
transform-origin50% 50%
transform-styleflat

CSS Transitions

プロパティ初期値
transition-delay0
transition-duration0
transition-propertyall
transition-timing-functionease

CSS Animations

プロパティ初期値
animation-delay0
animation-directionnormal
animation-duration0
animation-fill-modenone
animation-iteration-count1
animation-namenone
animation-play-staterunning
animation-timing-functionease

CSS Flexible Box Layout Module

プロパティ初期値
align-contentstretch
align-itemsstretch
align-selfauto
flex-basismain-size
flex-directionrow
flex-grow0
flex-shrink1
flex-wrapnowrap
justify-contentflex-start
order0

CSS Fonts Module Level 3

プロパティ初期値
font-familyブラウザごとに異なる
font-feature-settingsnormal
font-kerningauto
font-language-overridenormal
font-sizemedium
font-size-adjustnone
font-stretchnormal
font-stylenormal
font-synthesisweight style
font-variantnormal
font-variant-alternatesnormal
font-variant-capsnormal
font-variant-east-asiannormal
font-variant-ligaturesnormal
font-variant-numericnormal
font-variant-positionnormal
font-weightnormal

CSS3 Module: Paged Media

プロパティ初期値
fitfill
fit-position0% 0%
image-orientationauto
orphans2
pageauto
page-break-afterauto
page-break-beforeauto
page-break-insideauto
sizeauto
widows2

CSS Text Level 3

プロパティ初期値
hanging-punctuationnone
hyphensmanual
letter-spacingnormal
line-breakauto
overflow-wrapnormal
tab-size8
text-alignauto
text-align-lastauto
text-decorationnone
text-decoration-colorcurrentColor
text-decoration-linenone
text-decoration-skipobjects
text-decoration-stylesolid
text-emphasis-colorcurrentColor
text-emphasis-positionabove right
text-emphasis-stylenone
text-indent0
text-justifyauto
text-shadownone
text-transformnone
text-underline-positionauto
white-spacenormal
word-breaknormal
word-spacingnormal

まとめ

いかがでしたか?
初期値が0だと思っていたものが実はautoだったり、その逆だったり。
意外な発見もあって面白かったです。
機会があれば、初期値の挙動についてもまとめてみたいと思います。