HTML Base styles

HTMLのそれぞれのタグのデフォルトスタイルを確認するためのページです。

Text & Headings

↓

Preview

h1: heading

h2: heading

h3: heading

h4: heading

h5: heading

h6: heading

p: Lorem ipsum dolor sit amet, test link adipiscing elit.

inlines: b: text | strong: text | em: text | i: text | small: text | ^{sup: text} | _{sub: text} | code: text | kbd | mark: text | abbr: text | q: text | dfn: text | samp: text

ruby: 紫陽花あじさい, 踝くるぶし

ruby(with rp): 聖剣( エクスカリバー )

blockquote: Lorem ipsum dolor sit amet, Nunc iaculis suscipit dui.

- Lorem ipsum, https://example.com

pre :
	Lorem ipsum dolor sit amet, Nunc iaculis suscipit dui.
		Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum.

List

↓

Preview

Unordered List:

List item 1
List item 2
- Nested List
- ...
  - Nested List
  - ...

Ordered List:

List item 1
List item 2
1. Nested List
2. ...
  1. Nested List
  2. ...

↓

list関連のbaseスタイル

:where(ul, ol) {
  list-style: none;
  padding: 0;
  padding-inline-start: var(--list-pis, 0);
}
:where(ul, ol):not([class]){
  --list-pis: 1.5em;
  list-style: revert;
}

ul,liの標準スタイルはリセットした上で、class属性を持たないリストについては、ブラウザ標準のスタイルを再適用させています。
<List>(l--listクラス) を使っても、同様に標準スタイルを再適用させることができます。

Table

↓

Preview

Caption
Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2	Cell 3	Cell 4
Cell 2-1	Cell 2-2	Cell 2-3	Cell 2-4
Cell 3-1	Cell 3-2	Cell 3-3	Cell 3-4
Footer 1	Footer 2	Footer 3	Footer 4

↓

table関連のbaseスタイル

:where(td, th) {
  padding: var(--cell-p, 0.5em);
  min-inline-size: var(--cell-minIs, unset);
}
:where(th) {
  color: var(--th-c, inherit);
  background-color: var(--th-bgc, transparent);
}
:where(td) {
  color: var(--td-c, inherit);
  background-color: var(--td-bgc, transparent);
}

<Table>(l--tableクラス)を使うことで、最低限のスタイリングが整ったテーブルを表示できます。

Forms

↓

Fields

Checkbox Checkbox Radio Radio Range