css library

Css universal design boilerplate. Works without interference to HTML.

WCAG 2.2 Report

WCAG 2.2 auto-generated report

Blockquote

はじめに 14歳のきみへ - 池田晶子 14歳の君へ どう考えどう生きるか

『男でも女でもない、あるいは男でもあり女でもある共通の主語は、「人類」だ。「人類」という主語で語れる本当に大事なこと、すべての人に共通する本質的なことだけを、考えて、語るようにしようじゃないか。』

Button

Checkbox

Chip Label

text, outlined, fill (with hatch icon)

tag tag tag

Description List

氏名
山田 太郎
メールアドレス
taro.yamada@example.com
電話番号
03-0000-0000

Horizontal Rule

Field Label

姓と名の間にスペースを入れてください。

エラーテキストが入ります。

該当する項目 任意

該当するものをすべて選択してください。

Heading

Size scale

h2.css-h css-size="display-1"

見出しテキスト

h2.css-h css-size="display-2"

見出しテキスト

h2.css-h css-size="heading-1"

見出しテキスト

h2.css-h css-size="heading-2"

見出しテキスト

h2.css-h css-size="heading-3"

見出しテキスト

h2.css-h css-size="heading-4"

見出しテキスト

h2.css-h css-size="heading-6"

見出しテキスト

h2.css-h css-size="heading-8"

見出しテキスト

h2.css-h css-size="heading-9"

見出しテキスト

h2.css-h css-size="text-normal-2"

見出しテキスト

shoulder（hgroup 使用）

hgroup[css-size="heading-2"] > h2.css-h

ショルダーテキスト

見出しテキスト

data-chip

h2.css-h css-size="heading-2" data-chip

見出しテキスト

hgroup[css-size="heading-2"][data-chip] > h2.css-h — shoulder あり

ショルダーテキスト

見出しテキスト

data-rule

h2.css-h css-size="heading-2" data-rule="8"

見出しテキスト

h2.css-h css-size="heading-2" data-rule="6"

見出しテキスト

h2.css-h css-size="heading-2" data-rule="4"

見出しテキスト

h2.css-h css-size="heading-2" data-rule="2"

見出しテキスト

data-chip + data-rule

h2.css-h css-size="heading-2" data-chip data-rule="4"

見出しテキスト

Input Number

Input Text

Link

リンクテキスト

List

List Box

Radio

Search Box

Select

Table

ラベル ラベル ラベル ラベル
データ データ データ データ
データ データ データ データ
ストライプ・デンスタイプ
ラベル ラベル ラベル ラベル
データデータデータデータ
データデータデータデータ
データデータデータデータ
行ヘッダー付き
項目 値A 値B
行1 データ データ
行2 データ データ
ホバーハイライト
ラベル ラベル ラベル
データデータデータ
データデータデータ
データデータデータ
選択可能（チェックボックス）
ラベル ラベル
データ データ
データ データ
ソート（aria-sort: none / ascending / descending）
名前
日付
金額
山田 太郎 2026-06-01 ¥12,000
佐藤 花子 2026-06-02 ¥8,500
全セルボーダー
ラベル ラベル ラベル
データデータデータ
データデータデータ

Textarea

20文字以内で入力してください