Asagiri（朝霧）は、モダンで軽量なCSSフレームワークです。シンプルさを保ちながら、最新のCSS機能を活用した汎用性の高いフレームワークを目指しています。
13個の新規UIコンポーネントを追加し、世界トップクラスのデザインシステムに進化しました！
- Alert - 通知システム（dismissible、サイズバリエーション）
- Badge - ステータス表示（8色、形状、アニメーション）
- Tabs - ARIA完全対応タブナビゲーション
- Accordion - アコーディオンパネル
- Pagination - ページネーション
- Breadcrumb - パンくずナビゲーション
- Progress - プログレスバー（striped、animated）
- Loading - スピナー（4種類のスタイル）
- Skeleton - コンテンツプレースホルダー
- Card - カードコンポーネント（hover、clickable）
- Avatar - プロフィール画像（グループ、ステータス）
- Form Validation - バリデーション状態
- Dropdown - ドロップダウンメニュー
- TypeScript型定義: 600+ 型定義（400個追加）
- アクセシビリティ: 完全なARIA対応
- ダークモード: 全コンポーネント対応
- レスポンシブ: モバイルファースト設計
- パフォーマンス: Reduced motion サポート
- Modern Normalize v3.0.1に更新
- 包括的なダークモードサポート（WCAG AA準拠）
- CSS Grid完全サポート
- 体系的なスペーシングシステム（m-, p-）
- 流動的タイポグラフィ（clamp関数）
- アクセシビリティ大幅強化（focus-visible, reduced-motion）
- モバイルファーストのブレークポイントシステム
- 包括的なユーティリティクラス
- Modern Normalize v3.0.1 - 最新のリセットCSS
- CSS Custom Properties - テーマのカスタマイズが容易
- CSS Grid & Flexbox - 柔軟なレイアウトシステム
- Fluid Typography - clamp()による流動的なフォントサイズ
- Accessibility First - WCAGガイドライン準拠
- Typography（見出し、段落、リンク）
- Buttons（多様なバリエーション）
- Forms（入力、選択、テキストエリア）
- Tables（デフォルト、ストライプ）
- Lists（UL、OL、DL）
- Grid Systems（Flexbox & CSS Grid）
- Spacing - マージン・パディング（m-, p-, mx-, my-, etc.）
- Display - 表示制御（d-, position-, opacity-*, etc.）
- Grid - CSS Grid（grid-cols-, gap-, col-span-*, etc.）
- Layout - Flexbox（flex-, justify-, align-*, etc.）
<!-- jsdelivr (npm) - 推奨 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asagiri@latest/css/main.min.css">
<!-- unpkg -->
<link rel="stylesheet" href="https://unpkg.com/asagiri@latest/css/main.min.css">
<!-- 特定バージョン -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/asagiri@2.0.0/css/main.min.css">npm install asagiri<link rel="stylesheet" href="node_modules/asagiri/css/main.css">Releasesから最新版をダウンロード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asagiri Framework</title>
<link rel="stylesheet" href="path/to/asagiri/css/main.css">
</head>
<body>
<div class="container">
<h1>Hello, Asagiri!</h1>
<!-- CSS Grid -->
<div class="grid grid-cols-3 gap-4 my-4">
<div class="p-4">Grid 1</div>
<div class="p-4">Grid 2</div>
<div class="p-4">Grid 3</div>
</div>
<!-- Buttons -->
<button class="button btn-primary">Primary</button>
<button class="button btn-success">Success</button>
</div>
</body>
</html>Asagiri v2.0は、包括的なダークモードサポートを提供します。すべてのコンポーネントが自動的にダークテーマに対応します。
HTML要素にdata-theme="dark"属性を追加するだけです：
<html lang="ja" data-theme="dark">// テーマを切り替える
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
html.setAttribute('data-theme', newTheme);
localStorage.setItem('theme', newTheme);
}- WCAG AA準拠 - コントラスト比4.5:1以上
- 自動対応 - すべてのコンポーネントが自動的にテーマ切り替え
- システム連携 -
prefers-color-schemeに対応 - カスタマイズ可能 - CSS変数で簡単にカスタマイズ
- テーマ設定Wiki - 実装パターン集（バニラJS、React、Vue対応）
- ダークモード詳細ガイド - カラーシステム、カスタマイズ、トラブルシューティング
Asagiri v2.0は、React、Vue、その他のJavaScriptフレームワークでの使用に最適化されています。
npm install asagiri
# または
yarn add asagiri// CSSのインポート
import 'asagiri/css/main.css';
function App() {
return (
<div className="container">
<h1 className="head-1">Hello, Asagiri!</h1>
<div className="grid grid-cols-3 gap-4 my-4">
<div className="p-4">Grid 1</div>
<div className="p-4">Grid 2</div>
<div className="p-4">Grid 3</div>
</div>
<button className="btn btn-primary">Primary</button>
</div>
);
}import 'asagiri/css/main.css';
import { cn } from 'asagiri';
function Button({ variant, size, className, children }) {
return (
<button
className={cn(
'btn',
variant && `btn-${variant}`,
size && `btn-${size}`,
className
)}
>
{children}
</button>
);
}
// 使用例
<Button variant="primary" size="lg" className="mt-4">
Click me
</Button>import 'asagiri/css/main.css';
import { cn, AsagiriClass } from 'asagiri';
interface CardProps {
className?: string;
children: React.ReactNode;
}
function Card({ className, children }: CardProps) {
return (
<div className={cn('card', 'p-6', 'm-4', className)}>
{children}
</div>
);
}import { cn } from 'asagiri';
function Alert({ type, isVisible }) {
return (
<div
className={cn(
'alert',
type && `alert-${type}`,
isVisible && 'd-block',
!isVisible && 'd-none'
)}
>
Alert message
</div>
);
}
// オブジェクト形式も可能
function Card({ isActive, isDisabled }) {
return (
<div
className={cn('card', {
'opacity-50': isDisabled,
'border-primary': isActive
})}
>
Card content
</div>
);
}<script setup>
import 'asagiri/css/main.css';
import { computed } from 'vue';
const props = defineProps({
variant: String,
size: String
});
</script>
<template>
<div class="container">
<h1 class="head-1">Hello, Asagiri!</h1>
<div class="grid grid-cols-3 gap-4 my-4">
<div class="p-4">Grid 1</div>
<div class="p-4">Grid 2</div>
<div class="p-4">Grid 3</div>
</div>
<button class="btn btn-primary">Primary</button>
</div>
</template><script setup>
import 'asagiri/css/main.css';
import { cn } from 'asagiri';
import { computed } from 'vue';
const props = defineProps({
variant: String,
size: String,
disabled: Boolean
});
const buttonClass = computed(() =>
cn(
'btn',
props.variant && `btn-${props.variant}`,
props.size && `btn-${props.size}`,
{ 'opacity-50': props.disabled }
)
);
</script>
<template>
<button :class="buttonClass">
<slot />
</button>
</template><script setup lang="ts">
import 'asagiri/css/main.css';
import { cn, AsagiriClass } from 'asagiri';
import { computed } from 'vue';
interface Props {
variant?: 'primary' | 'secondary' | 'success';
size?: 'sm' | 'lg';
className?: string;
}
const props = defineProps<Props>();
const buttonClass = computed(() =>
cn('btn', props.variant && `btn-${props.variant}`, props.size && `btn-${props.size}`, props.className)
);
</script>
<template>
<button :class="buttonClass">
<slot />
</button>
</template>複数のクラス名を結合します。文字列、配列、オブジェクト、条件式に対応しています。
import { cn } from 'asagiri';
// 基本的な使用
cn('btn', 'btn-primary'); // => 'btn btn-primary'
// 条件式
cn('btn', isActive && 'active'); // => 'btn active' (isActiveがtrueの場合)
// オブジェクト形式
cn('btn', {
active: isActive,
disabled: isDisabled
}); // => 'btn active' (isActiveがtrueの場合)
// 配列
cn(['btn', 'btn-primary']); // => 'btn btn-primary'
// 混合
cn('btn', { active: true }, ['m-4', 'p-2']); // => 'btn active m-4 p-2'cn()のエイリアス。Asagiri特有のクラス名に対して型安全性を提供します（TypeScript使用時）。
import { asagiri } from 'asagiri';
const classes = asagiri('m-4', 'p-2', 'd-flex'); // 型チェック付き// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
scss: {
// SCSSファイルを直接使う場合
additionalData: `@import "asagiri/scss/Tokens/Token";`
}
}
}
});// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
};// pages/_app.js または app/layout.js
import 'asagiri/css/main.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}// components/Button.jsx
import { cn } from 'asagiri';
export default function Button({ variant, children, ...props }) {
return (
<button
className={cn('btn', variant && `btn-${variant}`)}
{...props}
>
{children}
</button>
);
}// nuxt.config.js (Nuxt 3)
export default defineNuxtConfig({
css: ['asagiri/css/main.css']
});<!-- components/Button.vue -->
<script setup>
import { cn } from 'asagiri';
const props = defineProps({
variant: String
});
const buttonClass = computed(() =>
cn('btn', props.variant && `btn-${props.variant}`)
);
</script>
<template>
<button :class="buttonClass">
<slot />
</button>
</template>カスタマイズが必要な場合は、SCSSファイルを直接インポートできます：
// あなたのプロジェクトの main.scss
@import 'asagiri/scss/Tokens/Token';
@import 'asagiri/scss/Utility/UtilityAll';
// カスタムスタイルを追加
.your-custom-class {
// Asagiriのトークンを使用
color: var(--color-primary);
margin: var(--spacing-4);
}- Getting Started - 導入ガイドとクイックスタート
- コンポーネント一覧 - 24+のコンポーネントデモ
- 実用的なコード例集 - コピペですぐ使える実装例
- ダークモード実装ガイド - コピペで実装できるダークモード
- テーマカスタマイズ - オリジナルテーマの作成方法
- Developer Guide - API仕様・アーキテクチャ・拡張ガイド
- Testing Architecture - テスト設計アーキテクチャ完全ガイド
- API Reference - 完全なCSS変数・クラス名リファレンス
- 管理画面ダッシュボード - サイドバー、統計、テーブル付き
- ログインページ - バリデーション、ソーシャルログイン付き
# ローカルサーバーで開く
python3 -m http.server 8000
# http://localhost:8000/docs/getting-started.html
# http://localhost:8000/showcase.html
# http://localhost:8000/examples/admin-dashboard.htmlAsagiriのすべてのコンポーネントを、Storybookで実際に操作しながら確認できます。
# Storybookを起動
npm run storybook
# ブラウザで開く
# http://localhost:6006Storybookの機能：
- 全24+コンポーネントをインタラクティブに検証
- デザイントークンの完全なドキュメント
- アクセシビリティテスト（axe-core統合）
- ビジュアルリグレッションテスト（Chromatic対応）
- レスポンシブテスト（複数のビューポート）
- ダークモード切り替え（ツールバーから）
Storybookをビルド：
# 静的サイトとしてビルド
npm run build-storybook
# 出力先: storybook-static/<div class="m-4">マージン 1rem（全方向）</div>
<div class="mt-2">マージントップ 0.5rem</div>
<div class="px-6 py-3">パディング 水平1.5rem 垂直0.75rem</div>
<div class="mx-auto">中央配置</div><div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<!-- 自動レスポンシブ -->
<div class="grid grid-auto-fit-md gap-4">
<!-- メディアクエリ不要 -->
</div><div class="d-flex">フレックス表示</div>
<div class="d-grid">グリッド表示</div>
<div class="d-none">非表示</div>
<div class="opacity-50">50%透明度</div>asagiri/
├── css/
│ └── main.css # コンパイル済みCSS（本番用）
├── scss/
│ ├── main.scss # メインSCSSファイル
│ ├── _Normalize.scss # Modern Normalize
│ ├── _Typography.scss # タイポグラフィ
│ ├── _Accessibility.scss # アクセシビリティ
│ ├── Tokens/ # デザイントークン
│ │ ├── _Breakpoints.scss # レスポンシブ
│ │ ├── _Color.scss # カラーシステム
│ │ └── _Spacing.scss # スペーシング
│ ├── Utility/ # ユーティリティ
│ │ ├── _Grid.scss # CSS Grid
│ │ ├── _SpacingSystem.scss # スペーシング
│ │ └── _Display.scss # 表示制御
│ └── Components/ # コンポーネント
└── components.html # デモ・ドキュメント
# 1. リポジトリをクローン
git clone https://github.com/BoxPistols/asagiri.git
cd asagiri
# 2. 依存関係をインストール
npm install
# 3. SCSSをコンパイル
npx sass scss/main.scss css/main.css --no-source-map
# 4. 開発中は watch モード
npx sass scss/main.scss css/main.css --watch --no-source-map// scss/Tokens/_Color.scss を編集
:root {
--color-primary: #your-color; // ← 変更
}// scss/Tokens/_Breakpoints.scss を編集
$breakpoints: (
'md': 768px, // ← 変更可能
'lg': 1024px // ← 変更可能
) !default;// 1. scss/Utility/_YourUtility.scss を作成
.your-utility {
// スタイルを定義
}
// 2. scss/Utility/_UtilityAll.scss にインポート追加
@import "YourUtility";
// 3. コンパイル
npx sass scss/main.scss css/main.css新しい機能を追加したら、必ず components.html にデモを追加してください。
# 通常コンパイル
npx sass scss/main.scss css/main.css --no-source-map
# 監視モード（開発用）
npx sass scss/main.scss css/main.css --watch --no-source-map
# 圧縮版（本番用）
npx sass scss/main.scss css/main.min.css --style=compressed --no-source-map# 1. 変更をテスト
npx sass scss/main.scss css/main.css
# 2. package.json のバージョンを更新
# "version": "2.1.0"
# 3. コミット
git add .
git commit -m "feat: add new feature"
git push
# 4. タグを作成
git tag v2.1.0
git push origin v2.1.0# Sassを再インストール
npm install --save-dev sass
# キャッシュクリア
rm -rf node_modules package-lock.json
npm install- ブラウザキャッシュをクリア（Ctrl+Shift+R）
- CSSファイルのタイムスタンプを確認
ls -l css/main.css
- HTMLのリンクパスを確認
- 常にSCSSを編集 - CSSファイルを直接編集しない
- モバイルファースト - 小さい画面から設計
- コメントを残す - 意図を明確に記載
- components.htmlを更新 - 新機能のデモを追加
- セマンティックバージョニング - MAJOR.MINOR.PATCH
このセクションでは、Asagiriフレームワークをnpmパッケージとして公開・管理する手順を説明します。
# npmアカウントを持っていない場合
# https://www.npmjs.com/signup でアカウント作成
# npmにログイン
npm login
# ログイン状態の確認
npm whoamiセキュリティのため、2FAの有効化を強く推奨します。
# npmのプロフィール設定で2FAを有効化
# https://www.npmjs.com/settings/your-username/tfa
# 2FAモード
# - Auth-only: ログイン時のみ必要
# - Auth-and-writes: ログイン + 公開時に必要（推奨）公開前に以下の項目を確認してください：
{
"name": "asagiri", // パッケージ名（重複不可）
"version": "2.0.0", // セマンティックバージョニング
"description": "...", // 簡潔な説明
"main": "css/main.css", // メインエントリーポイント
"files": [ // 公開するファイル
"css/",
"scss/",
"index.js",
"index.mjs",
"index.d.ts"
],
"keywords": [...], // 検索用キーワード
"license": "MIT", // ライセンス
"repository": {...}, // GitHubリポジトリ
"engines": { // Node.jsバージョン要件
"node": ">=14.0.0"
}
}# 公開されるファイルの一覧を確認
npm pack --dry-run
# 実際にtarballを作成して確認
npm pack
tar -tzf asagiri-2.0.0.tgz
rm asagiri-2.0.0.tgz# SCSSをコンパイル
npm run build
npm run build:compressed
# ビルド成果物の確認
ls -la css/
# ローカルでパッケージをテスト
npm link
cd /path/to/test-project
npm link asagiri# 公開（publicパッケージとして）
npm publish --access public
# スコープ付きパッケージの場合
npm publish --access public
# 公開の確認
npm view asagiriMAJOR.MINOR.PATCH (例: 2.1.3)
- MAJOR: 破壊的変更（Breaking Changes）
- MINOR: 後方互換性のある機能追加
- PATCH: 後方互換性のあるバグ修正
# パッチバージョンアップ（バグ修正）
npm version patch # 2.0.0 → 2.0.1
# マイナーバージョンアップ（機能追加）
npm version minor # 2.0.1 → 2.1.0
# メジャーバージョンアップ（破壊的変更）
npm version major # 2.1.0 → 3.0.0
# カスタムバージョン指定
npm version 2.1.5
# プレリリースバージョン
npm version prerelease --preid=beta # 2.0.0 → 2.0.1-beta.0
npm version prerelease --preid=alpha # 2.0.0 → 2.0.1-alpha.0# 1. 変更内容の確認
git status
git diff
# 2. ビルド
npm run build
npm run build:compressed
# 3. テスト（任意だが推奨）
# npm test
# 4. バージョンアップ（自動でgit commitとtagが作成される）
npm version minor -m "feat: add new utility classes"
# 5. GitHubにプッシュ
git push origin main
git push origin --tags
# 6. npmに公開
npm publish
# 7. 公開の確認
npm view asagiri version
npm info asagiri# デフォルトは "latest" タグ
npm publish # latest
npm publish --tag beta # beta版として公開
npm publish --tag next # next版として公開
# タグの確認
npm dist-tag ls asagiri
# タグの追加
npm dist-tag add asagiri@2.1.0 stable
# タグの削除
npm dist-tag rm asagiri beta
# 特定タグをインストール
npm install asagiri@beta
npm install asagiri@next# package.jsonのメタデータを変更後
npm publish
# READMEのみ更新（バージョンアップ不要）
# README.md を編集後
npm publish# 特定バージョンを非推奨に
npm deprecate asagiri@1.0.0 "Please upgrade to 2.0.0"
# バージョン範囲で非推奨に
npm deprecate asagiri@"< 2.0.0" "Version 1.x is no longer supported"
# 非推奨を解除
npm deprecate asagiri@1.0.0 ""# 公開から72時間以内のみ削除可能（それ以降は非推奨化を使用）
npm unpublish asagiri@2.0.0
# パッケージ全体を削除（非推奨、使用禁止）
# npm unpublish asagiri --force# コラボレーターを追加
npm owner add <username> asagiri
# コラボレーターを削除
npm owner rm <username> asagiri
# 所有者リストの確認
npm owner ls asagiri
# パッケージのアクセス権限を変更
npm access public asagiri
npm access restricted asagiri # スコープ付きのみ# 1. ログイン状態を確認
npm whoami
# 2. 再ログイン
npm logout
npm login
# 3. パッケージ名の重複確認
npm view asagiri# パッケージ名を変更するか、スコープを追加
# @your-org/asagiri のような形式# バージョンを上げる
npm version patch
npm publish# .npmignoreを確認（存在する場合、.gitignoreより優先される）
cat .npmignore
# package.json の "files" フィールドを確認
# "files": ["css/", "scss/", "index.js", ...]
# 実際の公開内容を確認
npm pack --dry-run.github/workflows/publish.yml の例：
name: Publish to npm
on:
release:
types: [created]
jobs:
publish:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
registry-url: 'https://registry.npmjs.org'
- run: npm ci
- run: npm run build
- run: npm run build:compressed
- run: npm publish --access public
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}GitHub Secretsに NPM_TOKEN を追加：
- npmで Access Token を生成: https://www.npmjs.com/settings/your-username/tokens
- GitHubリポジトリの Settings > Secrets > New repository secret
- Name:
NPM_TOKEN, Value: 生成したトークン
-
必ず prepublishOnly スクリプトを使用
{ "scripts": { "prepublishOnly": "npm run build && npm run build:compressed" } } -
セマンティックバージョニングを厳守
- 破壊的変更はメジャーバージョンアップ
- 機能追加はマイナーバージョンアップ
- バグ修正はパッチバージョンアップ
-
CHANGELOG.md を維持
- 各バージョンの変更内容を記録
-
タグとリリースノートを作成
git tag -a v2.1.0 -m "Release version 2.1.0" git push origin v2.1.0 -
公開前にローカルテスト
npm link cd ../test-project npm link asagiri -
2要素認証を有効化 - セキュリティ向上
-
不要なファイルを除外
.npmignoreまたはpackage.jsonのfilesで制御
-
公開後72時間以上経過したパッケージは削除しない
- 代わりに
npm deprecateを使用
- 代わりに
main- 本番環境（安定版）develop- 開発環境feature/*- 新機能開発fix/*- バグ修正
プルリクエストを歓迎します！
- Fork this repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
- Chrome/Edge (最新2バージョン)
- Firefox (最新2バージョン)
- Safari (最新2バージョン)
- iOS Safari (最新2バージョン)
- Internet Explorer (非サポート)
MIT License - See LICENSE for details
- Modern Normalize
- All Contributors
Made with love by BoxPistols