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 の名前は含んでいません。
-
A
abs()(en-US)accent-coloracos()(en-US):activeadditive-symbols (@counter-style)::after (:after)align-contentalign-itemsalign-selfalign-tracksall<an-plus-b><angle><angle-percentage>animationanimation-composition(en-US)animation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timelineanimation-timing-function@annotationannotation():any-linkappearanceascent-override (@font-face)asin()(en-US)aspect-ratioatan()(en-US)atan2()(en-US)attr()
B
::backdropbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-sizebase-palette (@font-palette-values)(en-US)<basic-shape>::before (:before):blankbleed (@page)<blend-mode>block-overflowblock-sizeblur()borderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottom@bottom-centerbox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
C
calc()caption-sidecaretcaret-colorcaret-shape@character-variantcharacter-variant()@charset:checkedcircle()clamp()clearclipclip-path<color>colorcolor-schemecolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontain-intrinsic-block-size(en-US)contain-intrinsic-height(en-US)contain-intrinsic-inline-size(en-US)contain-intrinsic-sizecontain-intrinsic-width(en-US)container(en-US)container-name(en-US)container-type(en-US)contentcontent-visibilitycontrast()cos()(en-US)<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-region:current(en-US)cursor<custom-ident>length#caplength#chlength#cm
D
angle#deg:default:defineddescent-override (@font-face)<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>drop-shadow()resolution#dpcmresolution#dpiresolution#dppx
E
F
fallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapflex_value#frfloat:focus:focus-visible:focus-withinfontfont-display (@font-face)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)(en-US)font-feature-settingsfont-feature-settings (@font-face)(en-US)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette(en-US)@font-palette-values(en-US)font-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emoji(en-US)font-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)forced-color-adjustformat()<frequency><frequency-percentage>:fullscreen:future(en-US)
G
angle#gradgap<gradient>::grammar-errorgrayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
frequency#Hzhanging-punctuation:hasheightheight (@viewport)@historical-forms:host():host-context():hoverhsl()hsla()hue-rotate()hwb()hyphenate-characterhyphenate-limit-chars(en-US)hyphenshypot()(en-US)
I
<ident><image>image()image-orientationimage-renderingimage-resolutionimage-set()@import:in-range:indeterminateinheritinherits (@property)initialinitial-letterinitial-letter-aligninitial-value (@property)inline-sizeinput-securityinsetinset()inset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>:invalidinvert():isisolationlength#iclength#in
J
K
L
lab():lang:last-child:last-of-type@layerlayer()layer() (@import)lch()leader():leftleft@left-bottom<length><length-percentage>letter-spacingline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>(en-US)linear-gradient():linklist-stylelist-style-imagelist-style-positionlist-style-typelocal():local-link(en-US)log()(en-US)
M
length#mmmarginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trim::markermarks (@page)maskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemasonry-auto-flowmath-depth(en-US)math-shift(en-US)math-style(en-US)matrix()matrix3d()max()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-linesmax-widthmax-width (@viewport)(en-US)max-zoom (@viewport)@mediamin()min-block-sizemin-heightmin-height (@viewport)(en-US)min-inline-sizemin-widthmin-width (@viewport)(en-US)min-zoom (@viewport)minmax()mix-blend-modemod()(en-US)time#ms
N
@namespacenegative (@counter-style):not:nth-child:nth-col(en-US):nth-last-child:nth-last-col(en-US):nth-last-of-type:nth-of-type<number>
O
object-fitobject-positionoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotate:only-child:only-of-typeopacityopacity():optionalorderorientation (@viewport)@ornamentsornaments()orphans:out-of-rangeoutlineoutline-coloroutline-offsetoutline-styleoutline-width<overflow>overflow-anchoroverflow-blockoverflow-clip-marginoverflow-inlineoverflow-wrapoverflow-xoverflow-yoverride-colors (@font-palette-values)(en-US)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-y
P
Pseudo-classesPseudo-elementslength#pclength#ptlength#pxpad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage(en-US)page-break-afterpage-break-beforepage-break-insidepage-orientation (@page)(en-US)paint()paint-order::part:past(en-US)path():paused<percentage>perspectiveperspective()perspective-origin:picture-in-pictureplace-contentplace-itemsplace-self::placeholder:placeholder-shown:playingpointer-eventspolygon()<position>positionpow()(en-US)prefix (@counter-style)print-color-adjust@property
Q
R
angle#radlength#remradial-gradient()range (@counter-style)<ratio>ray()(en-US):read-only:read-writerect()rem()(en-US)repeat()repeating-conic-gradient()(en-US)repeating-linear-gradient()repeating-radial-gradient():requiredresize<resolution>reversed()revertrgb()rgba():rightright@right-bottom:rootrotaterotate()rotate3d()rotateX()rotateY()rotateZ()round()(en-US)row-gapruby-alignruby-mergeruby-position
S
saturate()scalescale()scale3d()scaleX()scaleY()scaleZ():scopescroll()(en-US)scroll-behaviorscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-topscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-type@scroll-timelinescroll-timelinescroll-timeline-axis(en-US)scroll-timeline-name(en-US)scrollbar-colorscrollbar-gutter(en-US)scrollbar-width::selectionselector()sepia()<shape>shape-image-thresholdshape-marginshape-outsidesign()(en-US)sin()(en-US)size (@page)size-adjust (@font-face)skew()skewX()skewY()::slottedspeak-as (@counter-style)::spelling-errorsqrt()(en-US)src (@font-face)steps()<string>@stylesetstyleset()@stylisticstylistic()suffix (@counter-style)@supportssupports() (@import)@swashswash()symbols (@counter-style)symbols()syntax (@property)system (@counter-style)time#s
T
angle#turntab-sizetable-layouttan()(en-US):targettarget-counter()target-counters()::target-texttarget-text():target-within(en-US)text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-skiptext-decoration-skip-inktext-decoration-styletext-decoration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translateX()translateY()translateZ()type()
U
unicode-bidiunicode-range (@font-face)unset<url>url():user-invaliduser-select:user-validuser-zoom (@viewport)
V
length#vhlength#vmaxlength#vminlength#vw:validvar()vertical-align::view-transition(en-US)::view-transition-group(en-US)::view-transition-image-pair(en-US)view-transition-name(en-US)::view-transition-new(en-US)::view-transition-old(en-US)@viewportviewport-fit (@viewport)visibility:visited
W
:wherewhite-spacewidowswidthwidth (@viewport)(en-US)will-changeword-breakword-spacingword-wrapwriting-mode
X
Z
Others
セレクター
以下は様々なセレクターで、 DOM 内の要素の様々な特徴に基づいた条件付きのスタイル付けを可能にします。
基本セレクター
グループ化セレクター
- セレクターリスト
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 || BExperimental -
Bで指定された要素のうち、Aで指定された表の列にあるものを指定します。複数の列にまたがる要素は、そのすべての列のメンバーであるとみなされます。
擬似クラスと擬似要素
メモ: 関連情報: Selectors Level 4 仕様書におけるセレクター。
概念
構文と意味
値
レイアウト
DOM-CSS / CSSOM
主なオブジェクトの種類
Document.styleSheetsstyleSheets[i].cssRulescssRules[i].cssText(セレクターとスタイル)cssRules[i].selectorTextHTMLElement.styleHTMLElement.style.cssText(スタイルのみ)Element.classNameElement.classList
重要なメソッド
関連情報
- Mozilla CSS 拡張 (
-moz-接頭辞付き) - WebKit CSS 拡張 (ほとんどが
-webkit-接頭辞付き)