CSS3 リファレンス - KnotText about CSS3

1. プロパティの値を表すキーワード

CSS Values and Units Module Level 4#4.1.1. CSS-wide keywords: initial, inherit and unset

1-1. 「initial」キーワード

公式サイト：CSS Cascading and Inheritance Level 4#7.1. Initial Values

参考：initial - MDN

参考：initial_value - MDN

「initial」キーワードをCSSプロパティに指定することで、CSSプロパティを初期値(initial value)に戻すことができる。

初期値(initial value)とは、仕様書で初期の値として定義されているCSSプロパティが最初に持つ値である。

「initial」キーワードは全てのCSSプロパティに指定することができる。

1-2. 「inherit」キーワード

公式サイト：6 Assigning property values, Cascading, and Inheritance#6.2.1 The 'inherit' value

参考：inherit - MDN

「inherit」キーワードをCSSプロパティに指定することで、指定された要素の親要素のCSSプロパティを継承(inheritance)するように指定できる。

「inherit」キーワードは全てのCSSプロパティに指定することができる。

1-3. 「unset」キーワード

公式サイト：CSS Cascading and Inheritance Level 4#7.3.3. Erasing All Declarations: the unset keyword

参考：unset - MDN

「unset」キーワードをCSSプロパティに指定することで、未設定(unset)の状態に戻すことができ、それが継承プロパティであればinheritが適用された状態となり、それが非継承プロパティであればinitialが適用された状態となる。

「unset」キーワードは全てのCSSプロパティに指定することができる。

1-4. 「revert」キーワード

公式サイト：CSS Cascading and Inheritance Level 4#7.3.4. Rolling Back Cascade Origins: the revert keyword

参考：revert - MDN

「revert」キーワードをCSSプロパティに指定することで、元に戻す(revert)ことができ、ほとんどの場合はunsetが適用された状態となる。

しかし厳密には、非継承プロパティはinitialが適用された状態まで元に戻るのではなく、ユーザーエージェントスタイルシート(Webブラウザーが持つスタイルシート)が適用された状態となる。

「revert」キーワードは全てのCSSプロパティに指定することができる。

2. プロパティの値を表す単位

2-1. 長さ(Length)

参考：<length> - MDN

2-1-1. 相対的な長さの単位(Relative length units) 相対的な長さ

公式サイト：CSS Values and Units Module Level 4#6.1.1. Font-relative Lengths: the em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh units

公式サイト：CSS Values and Units Module Level 4#6.1.2. Viewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units

相対的な長さの単位は、別の長さプロパティに対する相対的な長さを指定します。相対的な長さの単位は、異なるレンダリング媒体間でより良くスケールします。

ヒント：emとremという単位は、完璧にスケーラブルなレイアウトを作るのに実用的です。* ビューポート＝ブラウザのウィンドウサイズ。ビューポートが50cm幅の場合、1vw = 0.5cm。

em	要素(element)のフォントサイズに相対値	1em = 現在のフォントサイズの1倍
ex	要素のフォントのx-height	現在のフォントのx-heightに対する相対値（ほとんど使われません）。
ch	0の幅に対する相対値	要素のフォントにおける、"0" (ZERO, U+0030) グリフで表されるような狭いグリフの典型的な文字先読み。
rem	ルート要素(root element)のフォントサイズ	ルート要素のfont-sizeに対する相対的な大きさ
vw	ビューポートの横幅(viewport’s width)の1%	ビューポートの幅の1%に対する相対値
vh	ビューポートの高さ(viewport’s height)の1%	ビューポートの高さの1%に対する相対値*。
vmin	ビューポートの小さい方の寸法(viewport’s smaller dimension)の1%	ビューポートの小さい方の1％*を基準にしています。
vmax	ビューポートの拡大寸法(viewport’s larger dimension)の1%。	ビューポート*の大きい方の1%に対する相対値です。

公式サイト：CSS Values and Units Module Level 4#5.5. Percentages: the <percentage> type

参考：<percentage> - MDN

%	要素の親オブジェクトからの相対的な寸法をパーセント値による割合で表す。	親要素に対する相対値

2-1-2. 絶対的な長さの単位(Absolute length units)

公式サイト：CSS Values and Units Module Level 4#6.2. Absolute Lengths: the cm, mm, Q, in, pt, pc, px units

絶対長単位(The absolute length units)は、互いの関係が固定されており、何らかの物理的な測定値に固定されている。主に出力環境が既知である場合に有効である。絶対単位は物理単位（in, cm, mm, pt, pc, Q）と視角単位（pixel unit）（px）で構成される。

cm	センチメートル(centimeters)	1cm = 96px/2.54
mm	ミリメートル(millimeters)	1mm = 1cmの1/10倍
in	インチ(inches)	1in = 2.54cm = 96px
pc	パイカ(picas)	1pc = 1inの1/6倍
pt	ポイント(points)	1pt = 1inの1/72倍
px	ピクセル(pixels)	1px = 1inの1/96倍

2-2. 角度(Angle)

参考：<angle> - MDN

<angle> は CSS のデータ型で、度、グラード、ラジアン、周の値で表される角度の値を表します。例えば、 <gradient> 関数や一部の transform 関数などで使われています。

deg
grad
rad
turn

2-3. 時間(Time)

参考：<time> - MDN

<time> は CSS のデータ型で、時間の値を秒単位またはミリ秒単位で表現します。これは animation や transition および関連するプロパティで使用されています。

s
ms

3. プロパティの値を表す関数(Functions)

参考：CSS 関数記法 - MDN

CSS 関数記法は CSS 値の一種で、より複雑なデータ型を表現したり、特別なデータ処理や計算を呼び出したりすることができます。

63あって草

attr()
calc()
clamp()
max()
min()

https://developer.mozilla.org/ja/docs/Web/CSS/attr()
https://developer.mozilla.org/ja/docs/Web/CSS/calc()
https://developer.mozilla.org/ja/docs/Web/CSS/clamp()
https://developer.mozilla.org/ja/docs/Web/CSS/max()
https://developer.mozilla.org/ja/docs/Web/CSS/min()

5. 「!important」宣言

公式サイト：CSS Cascading and Inheritance Level 4#6.3. Important Declarations: the !important annotation

参考：詳細度 - CSS: カスケーディングスタイルシート | MDN#!important の例外

参考：カスケードと継承 - ウェブ開発を学ぶ | MDN#!important

2. KnotTextでのCSSの分類

参考：CSS reference - CSS | MDN

2-1. CSSセレクター

2-1-1. ベーシックセレクター

ユニバーサルセレクタ―	* { }
タイプセレクタ―	element { }
クラスセレクタ―	.classname { }
IDセレクター	#idname { }
属性セレクタ―	selector[attribute] { }

2-1-2. グルーピングセレクター

セレクターリスト	div, p { }

2-1-3. コンビネーター(結合子)

子孫結合子	div a
子結合子	div > a
一般兄弟結合子	p ~ a
隣接兄弟結合子	p + a

2-1-4. 疑似クラスと疑似要素

疑似クラス	div:hover { }
疑似要素	div::before { }

2-2. CSSプロパティ

その他のCSSプロパティ
3D	perspective, backface-visibilityなど
animation	animation, transform, transitionなど
boxmodel	outline, margin, border, padding, background, overflow, z-index, height, width, positionなど
counter	counter-increment, counter-reset, counter-setなど
custom	--*
element	box-shadow, box-sizing, object-fit, object-position, opacity, mix-blend-mode, visibility, content, display, text-overflow, float, clear, empty-cells, caption-side, list-styleなど
graphics	backdrop-filter, filter, shape-image-threashold, shape-margin, scale, image-rendering, aspect-ratio, mask, clip, clip-path, inset, outsetなど
internationalization	line-break, writing-mode, text-orientation, text-combine-upright, direction, unicode-bidi, block-size, inline-sizeなど
layout	column-rule, flex, grid, align-content, align-items, align-self, align-tracks, justify-content, justify-items, justify-self, order, column-count, column-fill, column-gap, columns, column-span, column-width, gap, row-gap, place-content, place-items, place-self, vertical-alignなど
performance	forced-color-adjust, text-rendering, content-visibility, will-change, color-scheme, contain, color-adjustなど
text	word-spacing, text-shadow, text-transform, text-underline-offset, text-underline-position, white-space, shape-outside, text-align, text-align-last, text-indent, text-justify, letter-spacing, line-height, line-height-step, widows, word-break, word-wrap, color, hanging-punctuation, hyphens, initial-letter, orphans, quotes, font, text-decoration, text-emphasis, break-after, break-before, break-insideなど
user-interface	scroll-margin, scroll-padding, overscroll-behavior, user-select, touch-action, caret-color, cursor, resize, pointer-events, scrollbar-color, scrollbar-gutter, scrollbar-width, scroll-behavior, scroll-snap-align, scroll-snap-typeなど

2-3. CSSプロパティの値

その他の値
キーワード	initial, inherit, unset, revert
単位	長さ(em, rem, %, px...)、角度(deg...)、時間(s, ms)
関数	attr(), calc(), max(), min()...
!important	!important

2-4. @ルール

その他の@ルール
@font-face	Webフォント
@namespace
@media	@media(min-width: 540px) { }
@supports
@charset	@charset 'utf-8';
@page
@counter-style
@color-profile
@keyframes

W3C CSS Validation Service は CSS が正しく書かれているかを判定するために利用できます。デバッグのために重宝するツールです。

端末のディスプレイ情報を調べる (responsive web design で役立ちます)