この CSS リファレンスは、CSS 規則の基本構文を紹介します。すべての標準 CSS プロパティ、擬似クラス、擬似要素、@-規則、単位 および セレクタ のリストです。このリストは、アルファベット順 のプロパティのリスト、種類別のセレクタ、その他で構成されているため、各詳細情報のページにすばやくアクセスできるでしょう。この一覧には、CSS 1 および CSS 2.1 のプロパティだけでなく、CSS 3 のリファレンスも含まれており、CSS3 プロパティや策定中または標準化されたコンセプトのページにリンクされています。また、簡単な DOM-CSS / CSSOM リファレンス も含まれています。
補足: CSS 規則の定義はすべて (ASCII) テキストベース であるのに対して、DOM-CSS / CSSOM と規則管理システムは オブジェクトベース です。
-moz- 接頭辞を持つ Gecko 固有のプロパティは、Mozilla 独自の CSS 拡張 をご覧ください。また、WebKit 固有のプロパティは、WebKit 独自の CSS 拡張 をご覧ください。Vendor-prefixed CSS Property Overview には、Peter Beverloo 氏によるすべての接頭辞の付いたプロパティのリストがあります。
基本的な規則と構文
規則定義内での構文エラーは、その規則全体を無効にするので十分に注意してください。
スタイル規則
selectorlist { property: value; [more property:value; pairs] }
...ここで、selectorlist は: selector[:pseudo-class] [::pseudo-element] [, more selectorlists] です。
例
strong { color: red;}
div.menu-bar li:hover > ul { display: block; }
@-規則
これには多くの異なる構造的な書式があるため、その構文は各 @-規則 のページをご覧ください。
キーワード索引
A
/* CSS3 syntax */ ::after { <var>style properties</var> } /* CSS2 syntax */ :after { <var>style properties</var> }:active { <var>style properties</var> }additive-symbols (@counter-style)align-contentalign-itemsalign-selfall<angle>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotation (@font-feature-values)annotation()attr()
/* CSS3 syntax */ ::before { <var>style properties</var> } /* CSS2 syntax */ :before { <var>style properties</var> }::backdrop { <var>style properties</var> }backface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape><blend-mode>block-sizeblur()borderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
calc()caption-sidech@character-variant (@font-feature-values)character-variant()@charset:checked { <var>style properties</var> }circle()clearclipclip-pathcm<color>colorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcontrast()<counter>counter-incrementcounter-reset@counter-stylecross-fade()cubic-bezier()cursor<custom-ident>
:default { <var>style properties</var> }deg:dir( ltr | rtl ) { <var>style properties</var> }direction:disabled { <var>style properties</var> }displaydpcmdpidppxdrop-shadow()
element()ellipse()emempty-cells:empty { <var>style properties</var> }:enabled { <var>style properties</var> }ex
/* CSS3 syntax */ ::first-letter { <var>style properties</var> } /* CSS2 syntax */ :first-letter { <var>style properties</var> }/* CSS3 syntax */ ::first-line { <var>style properties</var> } /* CSS2 syntax */ :first-line { <var>style properties</var> }fallback (@counter-style)filter:first-child { <var>style properties</var> }:first-of-type { <var>style properties</var> }:first { <var>style properties</var> }flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focus { <var>style properties</var> }font@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-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-ligaturesfont-variant-numericfont-variant-positionfont-weightfont-weight (@font-face)format()format() (@font-face)<frequency>:fullscreen { <var>style properties</var> }
grad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
<image>image()image-orientationimage-renderingimage-resolutionimage-set()ime-mode@importin:in-range { <var>style properties</var> }:indeterminate { <var>style properties</var> }inheritinitialinline-sizeinset()<integer>:invalid { <var>style properties</var> }invert()isolation
:lang( <language-code> ) { <var>style properties</var> }:last-child { <var>style properties</var> }:last-of-type { <var>style properties</var> }left:left { <var>style properties</var> }<length>letter-spacingline-breakline-heightlinear-gradient():link { <var>style properties</var> }list-stylelist-style-imagelist-style-positionlist-style-typelocal()
marginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmms
@namespacenegative (@counter-style):not( <selector># ) { <var>style properties</var> }:nth-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }:nth-last-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }:nth-last-of-type( <an-plus-b> ) { <var>style properties</var> }:nth-of-type( <an-plus-b> ) { <var>style properties</var> }<number>
object-fitobject-positionoffset-block-endoffset-block-startoffset-inline-endoffset-inline-start:only-child { <var>style properties</var> }:only-of-type { <var>style properties</var> }opacityopacity():optional { <var>style properties</var> }orderorientation (@viewport)@ornaments (@font-feature-values)ornaments()orphans:out-of-range { <var>style properties</var> }outlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
pad (@counter-style)paddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originpointer-eventspolygon()<position>positionprefix (@counter-style)ptpx
radradial-gradient()range (@counter-style)<ratio>:read-only { <var>style properties</var> }:read-write { <var>style properties</var> }rect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():required { <var>style properties</var> }resize<resolution>revertrgb()rgba()right:right { <var>style properties</var> }:root { <var>style properties</var> }rotate()rotate3d()rotateX()rotateY()rotateZ()ruby-alignruby-mergeruby-position
ssaturate()scale()scale3d()scaleX()scaleY()scaleZ():scope { <var>style properties</var> }scroll-behaviorscroll-snap-coordinatescroll-snap-destinationscroll-snap-type::selection { <var>style properties</var> }sepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewX()skewY()speak-as (@counter-style)src (@font-face)steps()<string>@styleset (@font-feature-values)styleset()@stylistic (@font-feature-values)stylistic()suffix (@counter-style)@supports@swash (@font-feature-values)swash()symbols (@counter-style)symbols()system (@counter-style)
tab-sizetable-layout:target { <var>style properties</var> }text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><timing-function>toptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()translate3d()translateX()translateY()translateZ()turn
unicode-bidiunicode-range (@font-face):unresolved { <var>style properties</var> }unset<url>url()<user-ident>user-zoom (@viewport)
:valid { <var>style properties</var> }var()vertical-alignvh@viewportvisibility:visited { <var>style properties</var> }vmaxvminvw
値
<angle>auto<color><カウンタ><frequency>inheritinitial<integer><length>nonenormal<number><percentage><resolution><shape><string><time><uri>
セレクタ
- 基本的なセレクタ
- 結合子
- 隣接セレクタ
A + B - 一般兄弟セレクタ (間接セレクタ)
A ~ B - 子セレクタ
A > B - 子孫セレクタ
A B
- 隣接セレクタ
- 擬似要素
- 標準の疑似クラス
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
Selectors Level 3 仕様の完全な セレクタの一覧。
CSS3 チュートリアル
以下は、CSS3 で登場したか CSS2.1 で登場して最近まであまりサポートされていなかった新しい技術の小さな手引書です:
- CSS メディアクエリ
- CSS カウンタの利用
- CSS グラデーション (gradients) の利用
- CSS 変形 (transforms) の利用
- CSS アニメーション
- CSS 遷移 (transitions)
- CSS で複数の背景の利用方法
- CSS flexible box の利用
- CSS 段組みレイアウトの利用
概念
- CSS 構文
- @-規則
- コメント
- 優先度
- 初期値
- 継承
- 指定値
- 算出値
- 使用値
- 実効値
- 解決値
- ボックスモデル
- 置換要素
- 値定義構文
- 短縮プロパティ
- Mastering margin collapsing
- 視覚書式設定モデル
- レイアウトモード
DOM-CSS / CSSOM
主なオブジェクトの種類:
- document . styleSheets
- styleSheets[x] . cssRules
- cssRules[x] . cssText (セレクタとスタイル)
- cssRules[x] . selectorText
- elem . style
- elem . style . cssText (スタイルのみ)
- elem . className
- elem . classList
重要なメソッド: