Asagiri CSS Framework

朝霧（Asagiri）は、シンプルで軽量なCSSフレームワークです。このページでは、利用可能なすべてのコンポーネント、ユーティリティ、デザイントークンを確認できます。

特徴:

軽量でシンプル（約29KB）
CSS Custom Propertiesを活用
Flexboxベースのグリッドシステム
包括的なコンポーネントライブラリ

Design Tokens

Asagiriのデザインシステムの基礎となる変数です。

Color System

Primary Colors

Secondary Colors

Functional Colors

Typography Tokens

--font-size: 1.6rem;
--font-weight: 400;
--line-height: 1.8;

Spacing Tokens

/* Sass Variables */
$spacing-grid: 1.5rem 2rem 1rem;

Colors

Color Utility Classes

Primary color text (.color-primary)

Secondary color text (.color-secondary)

Accent color text (.color-accent)

Success color text (.color-success)

Warning color text (.color-warning)

Danger color text (.color-danger)

Info color text (.color-info)

Elegant color text (.color-elegant)

<p class="color-primary">Primary color text</p>
<p class="color-success">Success color text</p>
<p class="color-danger">Danger color text</p>

Typography

Headings

h1 Heading (3.2rem)

h2 Heading (2.4rem)

h3 Heading (2rem)

h4 Heading (1.8rem)

h5 Heading (1.6rem)

h6 Heading (1.4rem)

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>

Paragraph & Inline Elements

これは通常のパラグラフテキストです。This is a normal paragraph text.

リンクテキスト (Link text)

強調テキスト (Strong text)

イタリックテキスト (Emphasized text)

小さなテキスト (Small text)

下線テキスト (Underlined text)

Blockquote

これは引用テキストです。Blockquoteは特別なスタイリングが適用されます。

<blockquote>
  <p>引用テキスト</p>
</blockquote>

Code

Inline code: const foo = 'bar';

.example {
  color: var(--color-primary);
  padding: 1rem;
}

<code>inline code</code>
<pre><code>code block</code></pre>

Buttons

Default Buttons

<button class="button">Normal Button</button>
<button class="button button-outline">Outlined Button</button>
<button class="button button-cancel">Cancel Button</button>
<button class="button button-clear">Clear Button</button>

Color Variants - Filled

<button class="button btn-secondary">Secondary</button>
<button class="button btn-success">Success</button>
<button class="button btn-danger">Danger</button>

Color Variants - Outlined

Disabled State

<button class="button" disabled>Disabled Button</button>

Forms

Text Input

Label for input

<label for="text-input">Label for input</label>
<input id="text-input" type="text" placeholder="Enter text here...">

Select

Select an option

<label for="select-input">Select an option</label>
<select id="select-input">
  <option>Option 1</option>
</select>

Textarea

Textarea label

<label for="textarea-input">Textarea label</label>
<textarea id="textarea-input" placeholder="Enter long text here..."></textarea>

Radio Buttons

Select one option:

Option 1

Option 2

Option 3

Checkboxes

Checkbox 1

Checkbox 2

Checkbox 3

<input type="checkbox" id="check1">
<label class="label-inline" for="check1">Checkbox 1</label>

Tables

Default Table

Name	Age	Location
John Doe	28	Tokyo
Jane Smith	32	Osaka
Bob Johnson	25	Kyoto

<table>
  <thead>
    <tr><th>Name</th><th>Age</th></tr>
  </thead>
  <tbody>
    <tr><td>John</td><td>28</td></tr>
  </tbody>
</table>

Striped Table

Name	Age	Location
John Doe	28	Tokyo
Jane Smith	32	Osaka
Bob Johnson	25	Kyoto
Alice Williams	29	Nagoya

<table class="stripe">
  <thead class="dark">...</thead>
  <tbody>...</tbody>
</table>

Lists

Unordered List (Default)

List item 1
List item 2
List item 3

Unordered List Variants

Circle

Circle list item 1
Circle list item 2

Disc

Disc list item 1
Disc list item 2

<ul class="circle">...</ul>
<ul class="disc">...</ul>

Ordered List

First item
Second item
Third item

Nested Lists

Parent item 1
Parent item 2
- Child item 1
- Child item 2

Description List

Term 1: Definition for term 1
Term 2: Definition for term 2

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Grid System

Flexboxベースのグリッドシステム

Equal Width Columns

.column

<div class="mg-container">
  <div class="row">
    <div class="column">...</div>
    <div class="column">...</div>
  </div>
</div>

Fixed Width Columns

.column-25

.column (auto)

.column-33

.column-66

.column-50

Available Column Widths

10%

20%

25%

33%

40%

50%

60%

66%

75%

80%

90%

Column Offsets

.column-25

.column-25.column-offset-25

<div class="column column-25 column-offset-25">...</div>

Utilities

Width Utilities

.w-100 (100% width)

.w-75 (75% width)

.w-50 (50% width)

.w-25 (25% width)

<div class="w-100">...</div>
<div class="w-75">...</div>
<div class="w-50">...</div>
<div class="w-25">...</div>

Max Width Utilities

.max.mw-50 (max-width: 50rem)

.max.mw-100 (max-width: 100rem)

.max.mvw-50 (max-width: 50vw)

<div class="max mw-50">...</div>
<div class="max mvw-50">...</div>

Flexbox Utilities

.flex-center (justify-content: center; align-items: center)

.flex.flex-jc-between Space between

Space Around

<div class="flex-center">...</div>
<div class="flex flex-jc-between">...</div>
<div class="flex flex-jc-around">...</div>
<div class="flex flex-ai-center">...</div>

Available Flexbox Classes

.flex - display: flex
.flex-center - justify-content & align-items center
.flex-jc-center - justify-content: center
.flex-jc-between - justify-content: space-between
.flex-jc-around - justify-content: space-around
.flex-jc-evenly - justify-content: space-evenly
.flex-ai-center - align-items: center
.flex-ai-start - align-items: flex-start
.flex-ai-end - align-items: flex-end
.flex-column - flex-direction: column

Spacing

Padding Utilities

.space-pd (padding applied)

<div class="space-pd">...</div>

Margin Utilities

.space-mg (margin applied)

<div class="space-mg">...</div>

Layout

Container

.containerクラスは、コンテンツを中央配置し、最大幅を設定します。

Section

Section example

セクションは構造化されたレイアウトのための基本的なブロックです。

<section class="section">...</section>

Box

Box component for contained content

<div class="box">...</div>

CSS Grid NEW

モダンなCSS Gridレイアウトシステム。Flexboxグリッドと併用可能です。

Basic Grid

1

2

3

4

5

6

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Auto-Fit Responsive Grid

Auto 1

Auto 2

Auto 3

Auto 4

<div class="grid grid-auto-fit-md gap-4">
  <!-- Automatically responsive without media queries -->
</div>

Column Spanning

Span 2 columns

1

2

Full width span

<div class="grid grid-cols-4 gap-4">
  <div class="col-span-2">Span 2</div>
  <div class="col-span-full">Full width</div>
</div>

Modern Spacing System NEW

体系的なマージンとパディングユーティリティ

Margin Utilities

.m-{size} - All sides margin

.mt-{size}, .mr-{size}, .mb-{size}, .ml-{size} - Individual sides

.mx-{size} - Horizontal (left + right)

.my-{size} - Vertical (top + bottom)

Sizes: 0, 1 (0.25rem), 2 (0.5rem), 3 (0.75rem), 4 (1rem), 5, 6, 8, 10, 12, 16, 20

Padding Examples

.p-4 (padding: 1rem all sides)

.px-6 .py-3 (horizontal 1.5rem, vertical 0.75rem)

<div class="p-4">Padding 1rem</div>
<div class="px-6 py-3">Horizontal and vertical padding</div>
<div class="m-4">Margin 1rem</div>
<div class="mx-auto">Centered with auto margin</div>

Display Utilities NEW

Display Types

.d-block - display: block
.d-inline - display: inline
.d-inline-block - display: inline-block
.d-flex - display: flex
.d-grid - display: grid
.d-none - display: none

Position & Z-Index

.position-relative, .position-absolute, .position-fixed, .position-sticky
.z-10, .z-20, .z-50 - Z-index utilities
.top-0, .right-0, .bottom-0, .left-0

Opacity

100%

75%

50%

25%

<div class="opacity-100">Fully visible</div>
<div class="opacity-50">50% opacity</div>

Accessibility Features NEW

Focus-Visible

キーボードナビゲーション時のみフォーカスリングを表示します。

Focus Link

Reduced Motion Support

ユーザーのモーション設定を尊重し、アニメーションを制限します。

@media (prefers-reduced-motion: reduce)

Screen Reader Only

スクリーンリーダーには "Save document" と読み上げられます。

<span class="sr-only">Screen reader only text</span>

Touch Target Size

WCAGガイドラインに準拠した最小タッチターゲットサイズ（44x44px）

Accessibility Testing Tools

推奨ツール

axe DevTools - ブラウザ拡張機能。WCAG 2.1準拠の自動テスト
WebAIM Contrast Checker - カラーコントラスト比チェッカー（WCAG AA/AAA）
TPGi Colour Contrast Analyser - デスクトップアプリ。リアルタイムコントラストチェック
WAVE - Webページのアクセシビリティチェックツール
NVDA - 無料のスクリーンリーダー（Windows）

Color Contrast Requirements (WCAG 2.1)

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Large text = 18pt以上（24px）または14pt太字以上（18.5px bold）

Modal & Dialog NEW

モーダルダイアログコンポーネント。オーバーレイと共に表示される対話型ウィンドウです。

Basic Modal

<button class="button btn-primary" onclick="openModal('modal1')">Open Modal</button>

<div class="modal-overlay" id="modal1">
  <div class="modal">
    <div class="modal-header">
      <h3>Modal Title</h3>
      <button class="modal-close" onclick="closeModal('modal1')">×</button>
    </div>
    <div class="modal-body">
      <p>Modal content goes here...</p>
    </div>
    <div class="modal-footer">
      <button class="button button-cancel" onclick="closeModal('modal1')">Cancel</button>
      <button class="button btn-primary">Confirm</button>
    </div>
  </div>
</div>

Modal Sizes

<div class="modal modal-sm">...</div>  <!-- Small -->
<div class="modal modal-lg">...</div>  <!-- Large -->

Tooltip NEW

ホバー時に表示される情報ツールチップ

Tooltip Positions

<div class="tooltip tooltip-top">
  <button class="button">Hover me</button>
  <span class="tooltip-content">Tooltip text</span>
</div>

Tooltip Colors

<div class="tooltip tooltip-primary">...</div>
<div class="tooltip tooltip-success">...</div>
<div class="tooltip tooltip-warning">...</div>
<div class="tooltip tooltip-danger">...</div>

Practical Layout Patterns NEW

実用的なレイアウトパターンの実装例

Holy Grail Layout (聖杯レイアウト)

ヘッダー、3カラム、フッターの古典的なレイアウト

Main Content

<div class="holy-grail-layout">
  <header class="layout-header">Header</header>
  <div class="layout-content">
    <aside class="layout-sidebar-left">Left Sidebar</aside>
    <main class="layout-main">Main Content</main>
    <aside class="layout-sidebar-right">Right Sidebar</aside>
  </div>
  <footer class="layout-footer">Footer</footer>
</div>

Admin Dashboard Layout

サイドバーナビゲーション + メインコンテンツエリア

Dashboard

User Profile

Card 1

Card 2

Card 3

<div class="admin-layout">
  <aside class="admin-sidebar">
    <div class="admin-logo">Admin</div>
    <nav class="admin-nav">...</nav>
  </aside>
  <div class="admin-main">
    <header class="admin-header">...</header>
    <div class="admin-content">...</div>
  </div>
</div>

Card Grid Layout

レスポンシブなカードグリッド（ECサイト、ギャラリーなど）

Image

Card Title 1

Card description goes here.

Image

Card Title 2

Card description goes here.

Image

Card Title 3

Card description goes here.

Image

Card Title 4

Card description goes here.

<div class="card-grid">
  <div class="card-item">
    <div class="card-image">...</div>
    <div class="card-content">
      <h3>Title</h3>
      <p>Description</p>
      <button>Action</button>
    </div>
  </div>
</div>

Video Streaming UI Layout

映像配信サービス風レイアウト

StreamApp

User

Featured Content

Watch the latest trending videos

Trending Now

Video 1

Video 2

Video 3

Video 4

<div class="streaming-layout">
  <header class="streaming-header">...</header>
  <div class="streaming-hero">...</div>
  <div class="streaming-categories">
    <h3>Category</h3>
    <div class="streaming-row">...</div>
  </div>
</div>

Responsive Breakpoints NEW

Breakpoint System

Name	Size	Target
`sm`	640px	Landscape phones
`md`	768px	Tablets
`lg`	1024px	Desktops
`xl`	1280px	Large desktops
`xxl`	1536px	Extra large screens

Usage in SCSS

// Mobile-first approach
@include breakpoint(md) {
  .element { font-size: 1.5rem; }
}

// Breakpoint range
@include breakpoint-range(sm, lg) {
  .element { padding: 2rem; }
}

Basic Modal

Small Modal

Large Modal

Example Content

Asagiri CSS Framework

Design Tokens

Color System

Primary Colors

Secondary Colors

Functional Colors

Typography Tokens

Spacing Tokens

Colors

Color Utility Classes

Typography

Headings

h1 Heading (3.2rem)

h2 Heading (2.4rem)

h3 Heading (2rem)

h4 Heading (1.8rem)

h5 Heading (1.6rem)

h6 Heading (1.4rem)

Paragraph & Inline Elements

Blockquote

Code

Buttons

Default Buttons

Color Variants - Filled

Color Variants - Outlined

Disabled State

Forms

Text Input

Select

Textarea

Radio Buttons

Checkboxes

Tables

Default Table

Striped Table

Lists

Unordered List (Default)

Unordered List Variants

Circle

Disc

Ordered List

Nested Lists

Description List

Grid System

Equal Width Columns

Fixed Width Columns

Available Column Widths

Column Offsets

Utilities

Width Utilities

Max Width Utilities

Flexbox Utilities

Available Flexbox Classes

Spacing

Padding Utilities

Margin Utilities

Layout

Container

Section

Section example

Box

CSS Grid NEW

Basic Grid

Auto-Fit Responsive Grid

Column Spanning

Modern Spacing System NEW

Margin Utilities

Padding Examples

Display Utilities NEW

Display Types

Position & Z-Index

Opacity

Accessibility Features NEW

Focus-Visible

Reduced Motion Support

Screen Reader Only