Accordion

ダミーテキストとは何ですか?

これはダミーテキストです。
ダミーテキストは、デザインやレイアウトの作成時に使用される仮の文章です。
「ダミーテキストとは何ですか?」の先頭に戻る

二つ目の質問が入ります

回答テキストが入ります。

Blockquote

これは引用文の例です。デジタル庁デザインシステムでは、アクセシビリティファーストの原則に基づいて、すべてのユーザーが利用しやすいサービスの提供を目指しています。

Breadcrumb

Card / example-1: 縦型・画像オーバーラップ

Card / example-2: 横型・画像右・subgrid

Card / example-3: 縦型・アバター付き・subgrid高さ揃え

Card / example-4: 平型・テキスト主体・アクションボタン付き

Card / example-5: 縦型・日付バッジ・ボタン色テーマ変数上書き

Card / example-6: 選択カード・:has(:checked)で状態背景変化

Button

Calendar

Checkbox

Chip Label

ラベル

Date Picker

Description List

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

Disclosure

詳細を表示する

開閉コンテンツが入ります。accordionと異なりh要素を持たない単体用途に適しています。

先頭に戻る

Divider










Drawer

メニュー

ドロワーのコンテンツが入ります。

Emergency Banner

【緊急】〇〇地区に避難準備情報が発令されました

1時23分に○○地区に対して避難準備情報が発令されました。お年寄りの方等避難に時間がかかる方は、直ちに指定避難所へ避難してください。

File Upload

対応ファイル:PNG/JPEG/GIF形式の画像、Excel/Word/PowerPoint/PDF形式のドキュメント
5ファイルまで選択可能。1ファイルあたり5MB(5,242,880バイト)まで、合計10MB(10,485,760バイト)まで

または、このエリア内にドラッグ&ドロップ

    ファイルが選択されていません

    Form Control Label

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

    該当する項目 任意

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

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

    Global Menu

    Hamburger Menu Button

    Heading

    ショルダーテキスト

    見出しテキスト

    Input Text

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

    Language Selector

    Link

    リンクテキスト

    List

    Menu List

    Menu List Box

    Notification Banner

    操作を完了できませんでした

    入力内容を確認して再度お試しください。

    送信が完了しました

    申請内容を受け付けました。

    入力内容に注意が必要です

    入力期限が近づいています。

    Radio

    Resource List

    Search Box

    Select

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

    Step Navigation

    全4ステップ中、2ステップ目まで到達済み

    全3ステップ中、1ステップ目まで到達済み

    Table

    ラベル ラベル ラベル ラベル
    データ データ データ データ
    データ データ データ データ
    列1 列2 列3 列4 列5
    データ1 データ2 データ3 データ4 データ5
    ラベル ラベル ラベル
    データデータデータ
    データデータデータ
    データデータデータ

    Textarea

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

    Utility Link

    リンクテキスト 同一タブリンク