HTMLのデフォルトスタイルを初期化するCSS @ Initialize CSS

Initialize CSS は邪魔になりそうなスタイルを無くすためのリセットCSS でも、ブラウザ間の差異を無くすだけのノーマライズCSS でもありません。セマンティックな HTML が読みやすくなるよう初期化します。

特徴

initialize.css と initialize-plus.css の二段構え

各要素に初期スタイルを適用してブラウザ間の差異を無くす initialize.css と、初期スタイルを拡張する initialize-plus.css があります。

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/initialize-css@main/initialize.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/initialize-css@main/initialize-plus.min.css" />

専用のデザイントークン

カスタムプロパティでスタイリングに必要となる値を用意しています。

initialize.css

:root {
	/* 不透明度 */
	/* [使用例1] color: rgb(0, 0, 0, var(--alpha_m)); */
	/* [使用例2] color: color-mix(in srgb, transparent, var(--black) var(--alpha_m)); */
	/* [使用例3] opacity: var(--alpha_m); */
	--alpha_xl: calc(100% * 1 / 8);
	--alpha_l: calc(100% * 1 / 4);
	--alpha_m: calc(100% * 1 / 2);
	--alpha_h: calc(100% * 3 / 4);
	--alpha_xh: calc(100% * 7 / 8);

	/* レスポンシブレイアウトの計算値 */
	/* [使用例] flex: 1 1 clamp(0%, var(--clamp_rev-m), 100%); */
	--clamp_s: calc((100% - max(480px, 30rem)) * 1e6);
	--clamp_m: calc((100% - max(720px, 45rem)) * 1e6);
	--clamp_l: calc((100% - max(960px, 60rem)) * 1e6);
	--clamp_xl: calc((100% - max(1200px, 75rem)) * 1e6);
	--clamp_rev-s: calc((max(480px, 30rem) + 1px - 100%) * 1e6);
	--clamp_rev-m: calc((max(720px, 45rem) + 1px - 100%) * 1e6);
	--clamp_rev-l: calc((max(960px, 60rem) + 1px - 100%) * 1e6);
	--clamp_rev-xl: calc((max(1200px, 75rem) + 1px - 100%) * 1e6);
	--clamp_cqi-s: calc((100cqi - max(480px, 30rem)) * 1e6);
	--clamp_cqi-m: calc((100cqi - max(720px, 45rem)) * 1e6);
	--clamp_cqi-l: calc((100cqi - max(960px, 60rem)) * 1e6);
	--clamp_cqi-xl: calc((100cqi - max(1200px, 75rem)) * 1e6);
	--clamp_cqi-rev-s: calc((max(480px, 30rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-m: calc((max(720px, 45rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-l: calc((max(960px, 60rem) + 1px - 100cqi) * 1e6);
	--clamp_cqi-rev-xl: calc((max(1200px, 75rem) + 1px - 100cqi) * 1e6);

	/* 高度 */
	/* [使用例] box-shadow: var(--elev_m) var(--black); */
	--elev_xl: 0 1px 4px -1px;
	--elev_l: 0 2px 8px -2px;
	--elev_m: 0 4px 16px -4px;
	--elev_h: 0 8px 32px -8px;
	--elev_xh: 0 16px 64px -16px;

	/* 文字サイズ */
	/* [使用例] font-size: var(--em_m); */
	--em_h1: calc(1em * 12 / 6);
	--em_h2: calc(1em * 12 / 7);
	--em_h3: calc(1em * 12 / 8);
	--em_h4: calc(1em * 12 / 9);
	--em_h5: calc(1em * 12 / 10);
	--em_h6: calc(1em * 12 / 11);
	--em_xxs: calc(1em * 6 / 9);
	--em_xs: calc(1em * 6 / 8);
	--em_s: calc(1em * 6 / 7);
	--em_m: calc(1em * 6 / 6);
	--em_l: calc(1em * 6 / 5);
	--em_xl: calc(1em * 6 / 4);
	--em_xxl: calc(1em * 6 / 3);
	--em_xxxl: calc(1em * 6 / 2);

	/* フォント */
	/* [使用例] font-family: var(--font_sans); */
	--font_serif: ui-serif, serif;
	--font_sans: ui-sans-serif, sans-serif;
	--font_mono: ui-monospace, monospace;
	--font_default: var(--font_sans);

	/* 線の太さ */
	/* [使用例] border: solid var(--line_m); */
	--line_xf: max(1px, 0.0625rem);
	--line_f: max(1px, 0.125rem);
	--line_m: max(1px, 0.25rem);
	--line_b: max(1px, 0.5rem);
	--line_xb: max(1px, 1rem);

	/* 半径 */
	/* [使用例] border-radius: var(--radius_m); */
	--radius_xs: max(1px, 0.125rem);
	--radius_s: max(1px, 0.25rem);
	--radius_m: max(1px, 0.5rem);
	--radius_l: max(1px, 1rem);
	--radius_xl: max(1px, 2rem);

	/* スペース */
	/* [使用例] padding-block: var(--sp_m); */
	--sp_xxs: max(1px, 1rem / 8);
	--sp_xs: max(1px, 1rem / 4);
	--sp_s: max(1px, 1rem / 2);
	--sp_m: max(1px, 1rem);
	--sp_l: max(1px, 1rem * 2);
	--sp_xl: max(1px, 1rem * 4);
	--sp_xxl: max(1px, 1rem * 8);

	/* ページ全体に適用する文字間隔 */
	--letter-spacing: normal;

	/* :focus-visibleで適用するアウトライン */
	--outline-style: solid;
	--outline-width: var(--line_m);
	--outline-color: color-mix(in srgb, transparent, Highlight var(--alpha_m));
	--outline-offset: calc(var(--line_m) / -2);

	/* 基本色 */
	--red: #fc7459;
	--yellow: #df9a11;
	--green: #45b40e;
	--blue: #6194fa;
	--gray: #909090;
	--black: #202020;
	--white: #fff;
	--dark-light: light-dark(var(--black), var(--white));
	--light-dark: light-dark(var(--white), var(--black));

	/* 基本色をベースとした透過色 */
	--sheer-red: color-mix(in srgb, transparent, var(--red) var(--alpha_m));
	--sheer-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_m));
	--sheer-green: color-mix(in srgb, transparent, var(--green) var(--alpha_m));
	--sheer-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_m));
	--sheer-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_m));
	--sheer-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_m));
	--sheer-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_m));
	--sheer-text: color-mix(in srgb, transparent, currentcolor var(--alpha_m));
	--sheerer-red: color-mix(in srgb, transparent, var(--red) var(--alpha_l));
	--sheerer-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_l));
	--sheerer-green: color-mix(in srgb, transparent, var(--green) var(--alpha_l));
	--sheerer-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_l));
	--sheerer-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_l));
	--sheerer-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_l));
	--sheerer-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_l));
	--sheerer-text: color-mix(in srgb, transparent, currentcolor var(--alpha_l));
	--sheerest-red: color-mix(in srgb, transparent, var(--red) var(--alpha_xl));
	--sheerest-yellow: color-mix(in srgb, transparent, var(--yellow) var(--alpha_xl));
	--sheerest-green: color-mix(in srgb, transparent, var(--green) var(--alpha_xl));
	--sheerest-blue: color-mix(in srgb, transparent, var(--blue) var(--alpha_xl));
	--sheerest-gray: color-mix(in srgb, transparent, var(--gray) var(--alpha_xl));
	--sheerest-dark-light: color-mix(in srgb, transparent, var(--dark-light) var(--alpha_xl));
	--sheerest-light-dark: color-mix(in srgb, transparent, var(--light-dark) var(--alpha_xl));
	--sheerest-text: color-mix(in srgb, transparent, currentcolor var(--alpha_xl));
}

必要に応じてカスタムプロパティを上書き・追加する initialize-vars.css を作成して、

initialize-vars.css

:root {
	/* フォントを上書き */
	/* [使用例] font-family: var(--font_sans); */
	--font_serif: "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif CJK JP", "BIZ UDPMincho", ui-serif, serif;
	--font_sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "BIZ UDPGothic", ui-sans-serif, sans-serif;
	--font_mono: "Noto Sans Mono JP", "Noto Sans Mono CJK JP", "BIZ UDGothic", ui-monospace, monospace;
	--font_default: var(--font_sans);

	/* 文字間隔を上書き */
	--letter-spacing: calc(1em / 32);

	/* 基本色をベースとした薄い色を追加 */
	--pale-red: color-mix(in srgb, var(--light-dark), var(--red) var(--alpha_m));
	--pale-yellow: color-mix(in srgb, var(--light-dark), var(--yellow) var(--alpha_m));
	--pale-green: color-mix(in srgb, var(--light-dark), var(--green) var(--alpha_m));
	--pale-blue: color-mix(in srgb, var(--light-dark), var(--blue) var(--alpha_m));
	--pale-gray: color-mix(in srgb, var(--light-dark), var(--gray) var(--alpha_m));
	--pale-text: color-mix(in srgb, var(--light-dark), currentcolor var(--alpha_m));
	--paler-red: color-mix(in srgb, var(--light-dark), var(--red) var(--alpha_l));
	--paler-yellow: color-mix(in srgb, var(--light-dark), var(--yellow) var(--alpha_l));
	--paler-green: color-mix(in srgb, var(--light-dark), var(--green) var(--alpha_l));
	--paler-blue: color-mix(in srgb, var(--light-dark), var(--blue) var(--alpha_l));
	--paler-gray: color-mix(in srgb, var(--light-dark), var(--gray) var(--alpha_l));
	--paler-text: color-mix(in srgb, var(--light-dark), currentcolor var(--alpha_l));
	--palest-red: color-mix(in srgb, var(--light-dark), var(--red) var(--alpha_xl));
	--palest-yellow: color-mix(in srgb, var(--light-dark), var(--yellow) var(--alpha_xl));
	--palest-green: color-mix(in srgb, var(--light-dark), var(--green) var(--alpha_xl));
	--palest-blue: color-mix(in srgb, var(--light-dark), var(--blue) var(--alpha_xl));
	--palest-gray: color-mix(in srgb, var(--light-dark), var(--gray) var(--alpha_xl));
	--palest-text: color-mix(in srgb, var(--light-dark), currentcolor var(--alpha_xl));
}

読み込んでください。

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/initialize-css@main/initialize.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/nov-jp/initialize-css@main/initialize-plus.min.css" />
<link rel="stylesheet" href="path/to/initialize-vars.css" />

余白の制御

要素間のブロック方向のマージンと行間を細かく制御しています。

initialize.css

/* マージン */
* {
	--sp-scale: 1;
	--sp: calc(var(--sp-size, var(--sp_m)) * var(--sp-scale) * var(--sp-ratio, 1));
	margin: 0;
}
:where(article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, address, p, hr, pre, blockquote, ol, ul, menu, dl, figure, main, search, div, table, form, fieldset, details) {
	--sp-scale: 2;

	&:where(article, section, nav, aside, h1, h2, h3, h4, h5, h6, hgroup, header, footer, hr, main) {
		--sp-scale: 4;
	}
	& ~ & {
		margin-block-start: var(--sp);
	}
	:where(article, section, nav, aside, header, footer, hr, main):has(~ &) {
		margin-block-end: var(--sp);
	}
	:where(article, nav, aside, header, footer, blockquote, ol, ul, menu, dl, figure, table, fieldset, details) & {
		--sp-ratio: calc(1 / 2);
	}
}

/* 行間 */
*, ::before, ::after, ::file-selector-button, ::details-content {
	…
	line-height: var(--line-height, calc(var(--leading, var(--leading-size, var(--sp_m)) * var(--leading-scale, 1) * var(--leading-ratio, 1)) + 1em));
	…
}

デフォルトでは --sp_m に設定した rem値をベースとしているため、余白は文字サイズの影響を受けず、サイズ (size), 尺度 (scale), 比率 (ratio) で調整できる柔軟性も確保しています。

CSS

/* 文字サイスをベースに行間を設定 */
header.example, footer.example {
	--leading-size: 1rem;
	font-size: 1rem;

	& > * {
		--leading-ratio: calc(3 / 4);
	}
}
main.example {
	--leading-size: 1.125rem;
	font-size: 1.125rem;

	& > * {
		--leading-ratio: 1;
	}
}
aside.example {
	--leading-size: 0.875rem;
	font-size: 0.875rem;

	& > * {
		--leading-ratio: calc(3 / 4);
	}
}
/* 行の高さを設定 */
pre.example {
	--line-height: 1.5;
}
/* 行間を固定サイズで設定 */
button.example {
	--leading: 0.25rem;
}
/* 行間を尺度で設定 */
small.example {
	--leading-scale: calc(1 / 2);
}
/* マージンを設定 */
span.example {
	display: block;
	margin-block: var(--sp);
}
/* マージンを尺度で設定 */
p.example {
	--sp-scale: calc(1 / 2);
}
/* 子孫要素のマージンを比率で設定 */
blockquote.example {
	& > * {
		--sp-ratio: 0;
	}
}

プログラミング的な拡張スタイル

initialize-plus.css では、__element__ のような特殊なクラス名を採用しています。これはクラスの継承 (class pre_code extends pre {}) のように基本スタイルから派生スタイルを作りやすくするためです。

initialize-plus.css

[class*="__pre__"] { /* 基本スタイル */ }
.__pre__code { /* コード用スタイル */ }
.__pre__samp { /* コンピュータ出力用スタイル */ }

また、関数の引数 (function pre ( background = none, … ) {}) のように、コード内の値を style属性に設定したカスタムプロパティで上書きできるようにしています。

initialize-plus.css

[class*="__pre__"] {
	--background--: none;
	--border-width--: var(--line_xf);
	--border-color--: var(--sheerer-text);
	--border-radius--: calc(var(--border-width--) * 2);
	--color--: inherit;
	…
	background: var(--background--);
	border: solid var(--border-width--) var(--border-color--);
	border-radius: var(--border-radius--);
	color: var(--color--);
	…
}

これにより、異なるバリエーションを簡単に生成することができます。

HTML

<pre class="__pre__" style="--border-width--: var(--line_m);"> … </pre>
<pre class="__pre__samp" style="--background--: var(--green); --color--: var(--white);"><samp> … </samp></pre>

デモンストレーション

段落・罫線・テキストレベルセマンティックス・エディット

HTML

<p>
	<a>a</a>
	<a href="https://example.com">a[href]</a>
	<a href="mailto:example@example.com">a[href^="mailto:"]</a>
	<a href="tel:050-0000-0000">a[href^="tel:"]</a>
	<a href="sms:050-0000-0000">a[href^="sms:"]</a>
</p>
<p>
	<em>em</em>
	<strong>strong</strong>
	<small>small</small>
	<s>s</s>
	<cite>cite</cite>
	<q>q</q>
	<q cite="https://example.com">q[cite]</q>
	<dfn>dfn</dfn>
	<dfn title="title">dfn[title]</dfn>
	<abbr>abbr</abbr>
	<abbr title="title">abbr[title]</abbr>
	<ruby>RUBY<rp> (</rp><rt>RT</rt><rp>) </rp></ruby>
	<data>data</data>
	<data value="value">data[value]</data>
	<time>time</time>
	<time datetime="1970-01-01T00:00:00">time[datetime]</time>
	<code>code</code>
	<var>var</var>
	<samp>samp</samp>
	<kbd>kbd</kbd>
	<i>i</i>
	<b>b</b>
	<u>u</u>
	<mark>mark</mark>
	<span>SPAN<sub>SUB</sub></span>
	<span>SPAN<sup>SUP</sup></span>
</p>
<hr />
<p>
	<ins>ins</ins>
	<ins cite="https://example.com">ins[cite]</ins>
	<ins datetime="1970-01-01T00:00:00">ins[datetime]</ins>
</p>
<hr class="__hr__" />
<p>
	<del>del</del>
	<del cite="https://example.com">del[cite]</del>
	<del datetime="1970-01-01T00:00:00">del[datetime]</del>
</p>

a a[href] a[href^="mailto:"] a[href^="tel:"] a[href^="sms:"]

em strong small s cite q q[cite] dfn dfn[title] abbr abbr[title] RUBY (RT) data data[value] time time[datetime] code var samp kbd i b u mark SPAN_SUB SPAN^SUP

ins ins[cite] ins[datetime]

~~del~~ ~~del[cite]~~ ~~del[datetime]~~

整形文

<!DOCTYPE html>
<html … >
	<head>
		…
	</head>
	<body>
		…
		<pre>&lt;pre&gt; … &lt;/pre&gt;</pre>
		…
	</body>
</html>

<!DOCTYPE html>
<html … >
	<head>
		…
	</head>
	<body>
		…
		<pre class="__pre__">&lt;pre class=&quot;__pre__&quot;&gt; … &lt;/pre&gt;</pre>
		…
	</body>
</html>

<!DOCTYPE html>
<html … >
	<head>
		…
	</head>
	<body>
		…
		<pre class="__pre__code"><code>&lt;pre class=&quot;__pre__code&quot;&gt;&lt;code&gt; … &lt;/code&gt;&lt;/pre&gt;</code></pre>
		…
	</body>
</html>

<!DOCTYPE html>
<html … >
	<head>
		…
	</head>
	<body>
		…
		<pre class="__pre__samp"><samp>&lt;pre class=&quot;__pre__samp&quot;&gt;&lt;samp&gt; … &lt;/samp&gt;&lt;/pre&gt;</samp></pre>
		…
	</body>
</html>

引用文

HTML

<blockquote>
	<p>引用文の段落</p>
	<p>引用文の段落</p>
</blockquote>
<blockquote class="__blockquote__">
	…
</blockquote>

引用文の段落

引用文の段落

順序リスト

HTML

<ol>
	<li>リスト項目</li>
	<li>リスト項目
		<ol>
			<li>リスト項目</li>
			<li>リスト項目</li>
		</ol>
	</li>
</ol>
<ol type="A">
	<li>リスト項目</li>
	<li>リスト項目
		<ol type="a" start="26" reversed>
			<li>リスト項目</li>
			<li>リスト項目</li>
		</ol>
	</li>
</ol>
<ol class="__ol__compact">
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ol>

リスト項目
リスト項目
1. リスト項目
2. リスト項目

リスト項目
リスト項目
1. リスト項目
2. リスト項目

リスト項目
リスト項目
リスト項目
リスト項目

順不同リスト

HTML

<ul>
	<li>リスト項目</li>
	<li>リスト項目
		<ul>
			<li>リスト項目</li>
			<li>リスト項目</li>
		</ul>
	</li>
</ul>
<ul class="__ul__compact">
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
	<li>リスト項目</li>
</ul>

リスト項目
リスト項目
- リスト項目
- リスト項目

リスト項目
リスト項目
リスト項目
リスト項目

説明リスト

HTML

<dl>
	<div>
		<dt>定義用語</dt>
		<dt>定義用語</dt>
		<dd>用語説明</dd>
		<dd>用語説明</dd>
	</div>
	<div>
		<dt>定義用語</dt>
		<dt>定義用語</dt>
		<dd>用語説明</dd>
		<dd>用語説明</dd>
	</div>
</dl>
<dl class="__dl__noindent">
	…
</dl>
<dl class="__dl__compact">
	…
</dl>
<dl class="__dl__compact-group">
	…
</dl>
<dl class="__dl__compact-group-names">
	…
</dl>
<dl class="__dl__compact-group-values">
	…
</dl>
<dl class="__dl__tabular">
	…
</dl>

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

定義用語
定義用語: 用語説明; 用語説明
定義用語
定義用語: 用語説明; 用語説明

テーブル

HTML

<table>
	<caption>キャプション</caption>
	<thead>
		<tr><th></th><th scope="col">A</th><th scope="col">B</th><th scope="col">C</th> … </tr>
	</thead>
	<tbody>
		<tr><th scope="row">1</th><td>A1</td><td>B1</td><td>C1</td> … </tr>
		…
	</tbody>
	<tfoot>
		<tr><th scope="row">0</th><td>A0</td><td>B0</td><td>C0</td> … </tr>
	</tfoot>
</table>
<div class="__div-table__">
	<table>
		…
	</table>
</div>
<div class="__div-table__">
	<table style="--inline-size--: 60rem; --table-layout--: fixed;">
		…
	</table>
</div>

キャプション
	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

キャプション
	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

キャプション
	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

フィギュア

HTML

<figure>
	<img … />
	<figcaption> … </figcaption>
</figure>
<figure class="__figure__">
	<img … />
	<figcaption> … </figcaption>
</figure>
<figure class="__figure__">
	<figcaption> … </figcaption>
	<pre class="__pre__">
		…
	</pre>
</figure>
<figure class="__figure__" style="--inline-size--: fit-content;">
	<blockquote class="__blockquote__">
		…
	</blockquote>
	<figcaption><cite> … </cite></figcaption>
</figure>
<figure class="__figure__">
	<figcaption> … </figcaption>
	<div class="__div-table__">
		<table>
			…
		</table>
	</div>
</figure>

HTML

<pre class="__pre__">&lt;pre class=&quot;__pre__&quot;&gt; … &lt;/pre&gt;</pre>

引用文の段落

引用元

表のキャプション

	A	B	C
1	A1	B1	C1
2	A2	B2	C2
3	A3	B3	C3

開閉ウィジェット

HTML

<details>
	<summary>概要</summary>
	<p>段落</p>
</details>
<details class="__details__">
	<summary>概要</summary>
	<p>段落</p>
</details>
<details name="accordion" class="__details__">
	<summary>概要</summary>
	<p>段落</p>
</details>
<details name="accordion" class="__details__">
	<summary>概要</summary>
	<p>段落</p>
</details>

概要

段落

概要

段落

概要

段落

概要

段落

ダイアログ・ポップオーバー

HTML

<p><button class="__button__" aria-controls="non-modal-dialog" onclick="document.getElementById('non-modal-dialog').show();">button[onclick*="show()"]</button></p>
<dialog id="non-modal-dialog" closedby="closerequest">
	<p>dialog要素内の段落</p>
	<p><button class="__button__" aria-controls="non-modal-dialog" onclick="document.getElementById('non-modal-dialog').close();">button[onclick*="close()"]</button></p>
</dialog>
<p><button class="__button__" commandfor="modal-dialog" command="show-modal">button[command="show-modal"]</button></p>
<dialog id="modal-dialog" closedby="closerequest">
	<p>dialog要素内の段落</p>
	<p><button class="__button__" commandfor="modal-dialog" command="close">button[command="close"]</button></p>
</dialog>
<p><button class="__button__" popovertarget="popover-dialog-1" popovertargetaction="show">button[popovertargetaction="show"]</button></p>
<dialog id="popover-dialog-1" closedby="closerequest" popover="auto">
	<p>dialog要素内の段落</p>
	<p><button class="__button__" popovertarget="popover-dialog-1" popovertargetaction="hide">button[popovertargetaction="hide"]</button></p>
</dialog>
<p><button class="__button__" commandfor="popover-dialog-2" command="show-popover">button[command="show-popover"]</button></p>
<dialog id="popover-dialog-2" closedby="closerequest" popover="auto">
	<p>dialog要素内の段落</p>
	<p><button class="__button__" commandfor="popover-dialog-2" command="hide-popover">button[command="hide-popover"]</button></p>
</dialog>
<p><button class="__button__" popovertarget="popover-div-1" popovertargetaction="show">button[popovertargetaction="show"]</button></p>
<div id="popover-div-1" popover="auto">
	<p>div要素内の段落</p>
	<p><button class="__button__" popovertarget="popover-div-1" popovertargetaction="hide">button[popovertargetaction="hide"]</button></p>
</div>
<p><button class="__button__" commandfor="popover-div-2" command="show-popover">button[command="show-popover"]</button></p>
<div id="popover-div-2" popover="auto">
	<p>div要素内の段落</p>
	<p><button class="__button__" commandfor="popover-div-2" command="hide-popover">button[command="hide-popover"]</button></p>
</div>

タブ

HTML

<div class="__div-tabs__">
	<ul role="tablist">
		<li role="presentation">
			<label id="tab-1" role="tab" aria-controls="tabpanel-1">
				<input type="radio" name="tab" checked />
				<span>タブ1</span>
			</label>
		</li>
		<li role="presentation">
			<label id="tab-2" role="tab" aria-controls="tabpanel-2">
				<input type="radio" name="tab" />
				<span>タブ2</span>
			</label>
		</li>
	</ul>
	<ul>
		<li id="tabpanel-1" role="tabpanel" aria-labelledby="tab-1">
			<p><a href="#">タブ1の段落</a></p>
		</li>
		<li id="tabpanel-2" role="tabpanel" aria-labelledby="tab-2">
			<p><a href="#">タブ2の段落</a></p>
		</li>
	</ul>
</div>
<div class="__div-tabs__vertical">
	…
</div>

タブ1
タブ2

タブ1
タブ2

カルーセル

HTML

<div class="__div-carousel__">
	<ul role="tablist">
		<li role="presentation">
			<label id="carousel-tab-1" role="tab" aria-controls="carousel-tabpanel-1">
				<input type="radio" name="carousel-tab" checked />
				<span>1/2</span>
			</label>
		</li>
		<li role="presentation">
			<label id="carousel-tab-2" role="tab" aria-controls="carousel-tabpanel-2">
				<input type="radio" name="carousel-tab" />
				<span>2/2</span>
			</label>
		</li>
	</ul>
	<ul>
		<li id="carousel-tabpanel-1" role="tabpanel" aria-labelledby="carousel-tab-1">
			<figure><a href="#"><img src="…" width="960" height="540" … /></a></figure>
		</li>
		<li id="carousel-tabpanel-2" role="tabpanel" aria-labelledby="carousel-tab-2">
			<figure><a href="#"><img src="…" width="960" height="540" … /></a></figure>
		</li>
	</ul>
</div>
<div class="__div-carousel__transition-move-rl">
	…
</div>
<div class="__div-carousel__transition-move-lr">
	…
</div>
<div class="__div-carousel__transition-move-bt">
	…
</div>
<div class="__div-carousel__transition-move-tb">
	…
</div>
<div class="__div-carousel__transition-rotate-x">
	…
</div>
<div class="__div-carousel__transition-rotate-y">
	…
</div>
<div class="__div-carousel__transition-skew-x">
	…
</div>
<div class="__div-carousel__transition-skew-y">
	…
</div>
<div class="__div-carousel__transition-zoom-out">
	…
</div>
<div class="__div-carousel__transition-zoom-in">
	…
</div>
<div class="__div-carousel__stacked-ctrls" style="--time: 8s; --easing: ease-in-out;">
	…
</div>

フォーム

テキスト入力

HTML

<p>
	<input type="text" name="example-text-1" value="text" />
	<input type="search" name="example-search-1" value="search" />
	<input type="tel" name="example-tel-1" value="1234567890" />
	<input type="url" name="example-url-1" value="https://example.com/" />
	<input type="email" name="example-email-1" value="example@example.com" />
	<input type="password" name="example-password-1" value="password" />
	<input type="date" name="example-date-1" value="2001-01-01" min="2001-01-01" max="2100-12-31" step="1" />
	<input type="month" name="example-month-1" value="2001-01" min="2001-01" max="2100-12" step="1" />
	<input type="week" name="example-week-1" value="2001-W01" min="2001-W01" max="2100-W52" step="1" />
	<input type="time" name="example-time-1" value="00:00" min="00:00" max="23:59" step="60" />
	<input type="datetime-local" name="example-datetime-1" value="2001-01-01T00:00" min="2001-01-01T00:00" max="2100-12-31T23:59" step="60" />
	<input type="number" name="example-number-1" value="0" min="0" max="10" step="1" />
	<input type="text" name="example-text-placeholder-1" value="" placeholder="input[placeholder]" />
	<input type="text" name="example-text-size-1" value="input[size]" size="10" />
	<input type="text" name="example-text-length-1" value="input[minlength][maxlength]" minlength="4" maxlength="8" />
	<input type="text" name="example-text-pattern-1" value="input[pattern]" pattern="[a-z\[\]]+" />
	<input type="text" name="example-text-required-1" value="input[required]" required />
	<input type="text" name="example-text-readonly-1" value="input[readonly]" readonly />
	<input type="text" name="example-text-disabled-1" value="input[disabled]" disabled />
</p>
<p>
	<textarea name="example-textarea-1" placeholder="textarea[placeholder]"></textarea>
	<textarea name="example-textarea-size-1" cols="10" rows="4">textarea[cols][rows]</textarea>
	<textarea name="example-textarea-length-1" minlength="4" maxlength="8">textarea[minlength][maxlength]</textarea>
	<textarea name="example-textarea-required-1" required>textarea[required]</textarea>
	<textarea name="example-textarea-readonly-1" readonly>textarea[readonly]</textarea>
	<textarea name="example-textarea-disabled-1" disabled>textarea[disabled]</textarea>
</p>
<hr class="__hr__" />
<p>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-2" value="text" /></label>
	<label class="__label-text__"><input class="__text__" type="search" name="example-search-2" value="search" /></label>
	<label class="__label-text__"><input class="__text__" type="tel" name="example-tel-2" value="1234567890" /></label>
	<label class="__label-text__"><input class="__text__" type="url" name="example-url-2" value="https://example.com/" /></label>
	<label class="__label-text__"><input class="__text__" type="email" name="example-email-2" value="example@example.com" /></label>
	<label class="__label-text__"><input class="__text__" type="password" name="example-password-2" value="password" /></label>
	<label class="__label-text__"><input class="__text__" type="date" name="example-date-2" value="2001-01-01" min="2001-01-01" max="2100-12-31" step="1" /></label>
	<label class="__label-text__"><input class="__text__" type="month" name="example-month-2" value="2001-01" min="2001-01" max="2100-12" step="1" /></label>
	<label class="__label-text__"><input class="__text__" type="week" name="example-week-2" value="2001-W01" min="2001-W01" max="2100-W52" step="1" /></label>
	<label class="__label-text__"><input class="__text__" type="time" name="example-time-2" value="00:00" min="00:00" max="23:59" step="60" /></label>
	<label class="__label-text__"><input class="__text__" type="datetime-local" name="example-datetime-2" value="2001-01-01T00:00" min="2001-01-01T00:00" max="2100-12-31T23:59" step="60" /></label>
	<label class="__label-text__"><input class="__text__" type="number" name="example-number-2" value="0" min="0" max="10" step="1" /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-placeholder-2" value="" placeholder="input[placeholder]" /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-size-2" value="input[size]" size="10" /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-length-2" value="input[minlength][maxlength]" minlength="4" maxlength="8" /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-pattern-2" value="input[pattern]" pattern="[a-z\[\]]+" /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-required-2" value="input[required]" required /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-readonly-2" value="input[readonly]" readonly /></label>
	<label class="__label-text__"><input class="__text__" type="text" name="example-text-disabled-2" value="input[disabled]" disabled /></label>
</p>
<p>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-2" placeholder="textarea[placeholder]"></textarea></label>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-size-2" cols="10" rows="4">textarea[cols][rows]</textarea></label>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-length-2" minlength="4" maxlength="8">textarea[minlength][maxlength]</textarea></label>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-required-2" required>textarea[required]</textarea></label>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-readonly-2" readonly>textarea[readonly]</textarea></label>
	<label class="__label-text__"><textarea class="__text__" name="example-textarea-disabled-2" disabled>textarea[disabled]</textarea></label>
</p>

ファイル入力

HTML

<p>
	<input type="file" name="example-file-1" /></label>
	<input type="file" name="example-file-required-1" required /></label>
	<input type="file" name="example-file-disabled-1" disabled /></label>
</p>
<hr class="__hr__" />
<p>
	<label class="__label-file__"><input class="__file__" type="file" name="example-file-2" /></label>
	<label class="__label-file__"><input class="__file__" type="file" name="example-file-required-2" required /></label>
	<label class="__label-file__"><input class="__file__" type="file" name="example-file-disabled-2" disabled /></label>
</p>

セレクトメニュー

HTML

<p>
	<select name="example-select-1">
		<optgroup … >
			<option value="" selected> … </option>
			<option> … </option>
		</optgroup>
		<optgroup … >
			<option> … </option>
			<option disabled> … </option>
		</optgroup>
		<optgroup … disabled>
			<option> … </option>
			<option disabled> … </option>
		</optgroup>
	</select>
	<select name="example-select-disabled-1" disabled> … </select>
	<select name="example-select-size-1" size="1"> … </select>
	<select name="example-select-size-disabled-1" size="1" disabled> … </select>
</p>
<p>
	<select name="example-select-multiple-1" multiple> … </select>
	<select name="example-select-multiple-disabled-1" multiple disabled> … </select>
</p>
<hr class="__hr__" />
<p>
	<label class="__label-select__"><select class="__select__" name="example-select-2"> … </select></label>
	<label class="__label-select__"><select class="__select__" name="example-select-disabled-2" disabled> … </select></label>
	<label class="__label-select__"><select class="__select__" name="example-select-size-2" size="1"> … </select></label>
	<label class="__label-select__"><select class="__select__" name="example-select-size-disabled-2" size="1" disabled> … </select></label>
</p>
<p>
	<label class="__label-select__"><select class="__select__" name="example-select-multiple-2" multiple> … </select></label>
	<label class="__label-select__"><select class="__select__" name="example-select-multiple-disabled-2" multiple disabled> … </select></label>
</p>

レンジスライダー

HTML

<p>
	<input type="range" name="example-range-1" value="0" min="0" max="10" step="1" />
	<input type="range" name="example-range-disabled-1" value="0" min="0" max="10" step="1" disabled />
</p>
<hr class="__hr__" />
<p>
	<label class="__label-range__"><input class="__range__" type="range" name="example-range-2" value="0" min="0" max="10" step="1" /></label>
	<label class="__label-range__"><input class="__range__" type="range" name="example-range-disabled-2" value="0" min="0" max="10" step="1" disabled /></label>
</p>

カラーピッカー

HTML

<p>
	<input type="color" name="example-color-1" value="#ff0000" pattern="#[A-Za-z0-9]{6}" />
	<input type="color" name="example-color-disabled-1" value="#ff0000" pattern="#[A-Za-z0-9]{6}" disabled />
</p>
<hr class="__hr__" />
<p>
	<label class="__label-color__"><input class="__color__" type="color" name="example-color-2" value="#ff0000" pattern="#[A-Za-z0-9]{6}" /></label>
	<label class="__label-color__"><input class="__color__" type="color" name="example-color-disabled-2" value="#ff0000" pattern="#[A-Za-z0-9]{6}" disabled /></label>
</p>

チェックボックス

HTML

<p>
	<input type="checkbox" … checked /><span>チェックボックス1</span>
	<input type="checkbox" … required /><span>チェックボックス2</span>
	<input type="checkbox" … disabled /><span>チェックボックス3</span>
</p>
<hr class="__hr__" />
<p>
	<span class="__span-checkbox__" style="--column-width: 12em;">
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … checked /><span>チェックボックス1</span></label>
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … required /><span>チェックボックス2</span></label>
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … disabled /><span>チェックボックス3</span></label>
	</span>
</p>
<p>
	<span class="__span-checkbox__" style="--column-width: 12em;">
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … disabled checked /><span>チェックボックス1</span></label>
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … disabled required /><span>チェックボックス2</span></label>
		<label class="__label-checkbox__"><input class="__checkbox__" type="checkbox" … disabled /><span>チェックボックス3</span></label>
	</span>
</p>

ラジオボタン

HTML

<p>
	<input type="radio" … checked /><span>ラジオボタン1</span>
	<input type="radio" … /><span>ラジオボタン2</span>
	<input type="radio" … disabled /><span>ラジオボタン3</span>
</p>
<hr class="__hr__" />
<p>
	<span class="__span-radio__" style="--column-width: 12em;">
		<label class="__label-radio__"><input class="__radio__" type="radio" … checked /><span>ラジオボタン1</span></label>
		<label class="__label-radio__"><input class="__radio__" type="radio" … /><span>ラジオボタン2</span></label>
		<label class="__label-radio__"><input class="__radio__" type="radio" … disabled /><span>ラジオボタン3</span></label>
	</span>
</p>
<p>
	<span class="__span-radio__" style="--column-width: 12em;">
		<label class="__label-radio__"><input class="__radio__" type="radio" … disabled checked /><span>ラジオボタン1</span></label>
		<label class="__label-radio__"><input class="__radio__" type="radio" … disabled /><span>ラジオボタン2</span></label>
		<label class="__label-radio__"><input class="__radio__" type="radio" … disabled /><span>ラジオボタン3</span></label>
	</span>
</p>

ボタン

HTML

<p>
	<input type="button" value="ボタン" />
	<input type="button" value="ボタン" disabled />
	<button type="button">ボタン</button>
	<button type="button" disabled>ボタン</button>
	<a href="#">ボタン</a>
</p>
<hr class="__hr__" />
<p>
	<input class="__button__" type="button" value="ボタン" />
	<input class="__button__" type="button" value="ボタン" disabled />
	<button class="__button__" type="button">ボタン</button>
	<button class="__button__" type="button" disabled>ボタン</button>
	<a class="__button__" href="#">ボタン</a>
</p>
<p>
	<button class="__button__" type="button" style="--color--: var(--red);">ボタン</button>
	<button class="__button__" type="button" style="--color--: var(--yellow);">ボタン</button>
	<button class="__button__" type="button" style="--color--: var(--green);">ボタン</button>
	<button class="__button__" type="button" style="--color--: var(--blue);">ボタン</button>
	<button class="__button__" type="button" style="--color--: var(--gray);">ボタン</button>
</p>
<p>
	<button class="__button__" type="button" style="--border-radius--: 1e6px; --color--: var(--light-dark); --background--: var(--red);">ボタン</button>
	<button class="__button__" type="button" style="--border-radius--: 1e6px; --color--: var(--light-dark); --background--: var(--yellow);">ボタン</button>
	<button class="__button__" type="button" style="--border-radius--: 1e6px; --color--: var(--light-dark); --background--: var(--green);">ボタン</button>
	<button class="__button__" type="button" style="--border-radius--: 1e6px; --color--: var(--light-dark); --background--: var(--blue);">ボタン</button>
	<button class="__button__" type="button" style="--border-radius--: 1e6px; --color--: var(--light-dark); --background--: var(--gray);">ボタン</button>
</p>

ボタン

プログレスバー

HTML

<p>
	<progress></progress>
	<progress value="0.5" max="1">50%</progress>
</p>
<hr class="__hr__" />
<p>
	<progress class="__progress__"></progress>
	<progress class="__progress__" value="0.5" max="1">50%</progress>
</p>

50%

メーター

HTML

<p>
	<meter></meter>
	<meter value="2" min="0" max="10" low="4" high="8" optimum="2">20%</meter>
	<meter value="6" min="0" max="10" low="4" high="8" optimum="2">60%</meter>
	<meter value="10" min="0" max="10" low="4" high="8" optimum="2">100%</meter>
</p>
<hr class="__hr__" />
<p>
	<meter class="__meter__"></meter>
	<meter class="__meter__" value="2" min="0" max="10" low="4" high="8" optimum="2">20%</meter>
	<meter class="__meter__" value="6" min="0" max="10" low="4" high="8" optimum="2">60%</meter>
	<meter class="__meter__" value="10" min="0" max="10" low="4" high="8" optimum="2">100%</meter>
</p>

20% 60% 100%

埋め込みコンテンツ

イメージ

HTML

<figure class="__figure__">
	<img src="example.png" width="960" height="540" … />
</figure>

インラインフレーム

HTML

<figure class="__figure__">
	<iframe src="example.html" width="960" height="540" style="--aspect-ratio--: 16 / 9;"></iframe>
</figure>

エンベッド

HTML

<figure class="__figure__">
	<embed type="image/png" src="example.png" width="960" height="540" />
</figure>

オブジェクト

HTML

<figure class="__figure__">
	<object type="image/png" data="example.png" width="960" height="540"></object>
</figure>

ビデオ

HTML

<figure class="__figure__">
	<video src="example.mp4" width="960" height="540" controls></video>
</figure>

オーディオ

HTML

<figure class="__figure__">
	<audio src="example.m4a" controls></audio>
</figure>

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0

	A	B	C	D	E	F
1	A1	B1	C1	D1	E1	F1
2	A2	B2	C2	D2	E2	F2
3	A3	B3	C3	D3	E3	F3
4	A4	B4	C4	D4	E4	F4
5	A5	B5	C5	D5	E5	F5
6	A6	B6	C6	D6	E6	F6
0	A0	B0	C0	D0	E0	F0