デジタル庁デザインシステム コードスニペット（HTML版）

デジタル庁デザインシステムをプレーンなHTML/CSS/JavaScriptで実装したサンプル集です。

各コンポーネントの動作やスタイル、使用方法や実装上の注意点等はコードスニペット（HTML版）Storybookでもご確認いただけます。

特長

• アクセシビリティファースト
• フレームワーク非依存
• カスタマイズ可能
• 後付け可能
• シンプルな実装
• デジタル庁デザインシステムチームによる優先サポート

クイックスタート

1. リポジトリのクローン

任意の方法でリポジトリをクローンしてください。

https://github.com/digital-go-jp/design-system-example-components-html

2. 依存関係のインストール

npm install

3. Storybookでコンポーネントを確認

npm run storybook

ブラウザで http://localhost:6006 にアクセスすると、すべてのコンポーネントを確認できます。

ディレクトリ構成

src/
├── components/         # 各コンポーネント
│   ├── button/
│   ├── input-text/
│   └── ...
├── docs/               # ドキュメント
├── helpers/            # ユーティリティ関数
└── global.css          # グローバルスタイル

各コンポーネントディレクトリには以下のファイルが含まれています：

• *.css - スタイルシート
• *.html - HTMLサンプル
• *.js - JavaScript（必要な場合）
• *.stories.ts - Storybookストーリー
• *.mdx - ドキュメント

スクリプト

# Storybookを起動（開発用）
npm run storybook

# Storybookをビルド
npm run build-storybook

# テストを実行
npm test

# コードフォーマット
npm run format

ライセンス

本コードスニペットはMITライセンスの下で公開されています。

不具合報告・機能要望について

本コードスニペットに関する不具合や機能要望は、Issueを作成して報告してください。Pull Requestは現時点では受け付けておりません。

求人情報

デジタル庁デザインシステムのチームメンバーを募集しています。行政のデジタル環境を支える基盤づくりに、あなたのスキルや経験を活かしてみませんか？　求人ページからご応募ください。

• プロダクトデザイナー
• プロダクトデザイナー（アソシエイト）