ピックアップ項目のタイトルが入ります。ピックアップ項目のタイトルが入ります。ピックアップ項目のタイトルが入ります。
ピックアップニュースの要約文が入ります。ピックアップニュースの要約文が入ります。ピックアップニュースの要約文が入ります。ピックアップニュースの要約文が入ります。ピックアップニュースの要約文が入ります。ピックアップニュースの要約文が入ります。
詳細をみる
コンテナ要素
Container Elements
Table Components
テーブル
データを整理して表示するためのテーブルコンポーネントです。様々なスタイルとレスポンシブ対応を備えています。
フィルター:
基本テーブル
| 項目 | 説明 | 価格 | 在庫 |
|---|---|---|---|
| 製品A | 基本的な製品説明テキスト | ¥10,000 | あり |
| 製品B | 高機能な製品の説明が入ります | ¥15,000 | あり |
| 製品C | 特別仕様の製品説明 | ¥20,000 | なし |
ストライプテーブル
| 項目 | 説明 | 価格 | 在庫 |
|---|---|---|---|
| 製品A | 基本的な製品説明テキスト | ¥10,000 | あり |
| 製品B | 高機能な製品の説明が入ります | ¥15,000 | あり |
| 製品C | 特別仕様の製品説明 | ¥20,000 | なし |
| 製品D | 限定版製品の説明 | ¥25,000 | あり |
ボーダーレステーブル
| 項目 | 説明 | 価格 | 在庫 |
|---|---|---|---|
| 製品A | 基本的な製品説明テキスト | ¥10,000 | あり |
| 製品B | 高機能な製品の説明が入ります | ¥15,000 | あり |
| 製品C | 特別仕様の製品説明 | ¥20,000 | なし |
水平スクロールテーブル（多列データ用）
| 項目 | 説明 | 価格 | 在庫 | カテゴリ | 製造日 | 保証期間 | 評価 |
|---|---|---|---|---|---|---|---|
| 製品A | 基本的な製品説明テキスト | ¥10,000 | あり | 電子機器 | 2025/01/15 | 1年 | ★★★★☆ |
| 製品B | 高機能な製品の説明が入ります | ¥15,000 | あり | 家電 | 2025/02/20 | 2年 | ★★★★★ |
| 製品C | 特別仕様の製品説明 | ¥20,000 | なし | オフィス用品 | 2025/03/10 | 3年 | ★★★☆☆ |
定義リスト型テーブル（左見出し・右詳細）
| 社名 | 株式会社カンパニー（Company Co.,Ltd.） |
|---|---|
| 設立 | 2000年1月1日 |
| 資本金 | 5,000万円 |
| 所在地 |
本社 〒101-0048 東京都千代田区 大阪営業所 〒550-0012 大阪府大阪市 名古屋営業所 〒450-0003 愛知県名古屋市 |
ソート機能付きテーブル
| 製品名 | カテゴリ | 価格 | 発売日 |
|---|---|---|---|
| スマートフォンX | 電子機器 | ¥80,000 | 2025/03/15 |
| ノートパソコンY | 電子機器 | ¥120,000 | 2025/01/10 |
| スマートウォッチZ | ウェアラブル | ¥35,000 | 2025/02/20 |
| ワイヤレスイヤホンA | オーディオ | ¥25,000 | 2025/04/05 |
テーブルコンポーネントの使い方
<!-- 基本テーブル -->
<div class="table-wrapper">
<table class="table">
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1</td>
<td>データ2</td>
</tr>
</tbody>
</table>
</div>
<!-- ストライプテーブル -->
<div class="table-wrapper">
<table class="table table-striped">
...
</table>
</div>
<!-- ボーダーレステーブル -->
<div class="table-wrapper">
<table class="table table-borderless">
...
</table>
</div>
<!-- 水平スクロールテーブル -->
<div class="table-wrapper table-responsive">
<table class="table">
...
</table>
</div>
<!-- 定義リスト型テーブル -->
<div class="table-wrapper">
<table class="table table-definition">
<tbody>
<tr>
<th>見出し</th>
<td>詳細テキスト</td>
</tr>
</tbody>
</table>
</div>
テーブルコンポーネントは、データを整理して表示するのに適しています。基本テーブル、ストライプテーブル、ボーダーレステーブル、水平スクロールテーブル、定義リスト型テーブルなど、様々なスタイルを選択できます。すべてのテーブルはレスポンシブ対応しており、モバイル表示では縦型レイアウトに自動変換されます。
Card Components
カードコンポーネント
カード形式のコンポーネントです。サイズや画像・アイコン付きなど、様々なパターンを選べます。
フィルター:
カードコンポーネントの使い方
<!-- ベーシックカード -->
<div class="card medium">
<div class="card-content">
<h3 class="card-title">カードタイトル</h3>
<p class="card-text">カードの説明文をここに入れます。</p>
<a href="#" class="card-link">詳細を見る <i class="ri-arrow-right-line"></i></a>
</div>
</div>
<!-- サムネイル付きカード -->
<div class="card medium">
<div class="card-thumbnail">
<img src="path/to/image.jpg" alt="サムネイル">
</div>
<div class="card-content">
<h3 class="card-title">カードタイトル</h3>
<p class="card-text">カードの説明文をここに入れます。</p>
<a href="#" class="card-link">詳細を見る <i class="ri-arrow-right-line"></i></a>
</div>
</div>カードコンポーネントは、様々な種類の情報を整理して表示するのに適しています。サイズクラス（small, medium, large, wide, full）を組み合わせて、レイアウトを調整できます。また、サムネイル、背景画像、アイコンなどを追加することで、視覚的な表現力を高めることができます。
Grid Components
グリッドコンポーネント
非対称のグリッドを並べていくことができます。
フィルター:
Small Grid Item
3カラム幅のグリッドアイテム
Small Grid Item
grid-column: span 3;
grid-row: span 1;
Medium Grid Item
4カラム幅のグリッドアイテム
Medium Grid Item
grid-column: span 4;
grid-row: span 1;
Large Grid Item
6カラム幅、2行高さのグリッドアイテム
Large Grid Item
grid-column: span 6;
grid-row: span 2;
Wide Grid Item
6カラム幅のグリッドアイテム
Wide Grid Item
grid-column: span 6;
grid-row: span 1;
Tall Grid Item
3カラム幅、2行高さのグリッドアイテム
Tall Grid Item
grid-column: span 3;
grid-row: span 2;
Small Grid Item
3カラム幅のグリッドアイテム
Small Grid Item
grid-column: span 3;
grid-row: span 1;
Medium Grid Item
4カラム幅のグリッドアイテム
Medium Grid Item
grid-column: span 4;
grid-row: span 1;
Wide Grid Item
6カラム幅のグリッドアイテム
Wide Grid Item
grid-column: span 6;
grid-row: span 1;
Small Grid Item
3カラム幅のグリッドアイテム
Small Grid Item
grid-column: span 3;
grid-row: span 1;
Medium Grid Item
4カラム幅のグリッドアイテム
Medium Grid Item
grid-column: span 4;
grid-row: span 1;
グリッドコンポーネントの使い方
<div class="grid-container">
<div class="grid-item small">...</div>
<div class="grid-item medium">...</div>
<div class="grid-item large">...</div>
<div class="grid-item wide">...</div>
<div class="grid-item tall">...</div>
</div>グリッドコンポーネントは、様々なサイズのアイテムを組み合わせて柔軟なレイアウトを作成できます。各アイテムのサイズクラスを変更することで、デザインに合わせたグリッドを構築できます。
Tab Components
タブ
タブを3種類作ってあります。
基本タブ
基本タブ1の内容が表示されます。
表示されるのは基本タブ2の内容です。
アンダーラインタブ
アンダーラインタブ1の内容が表示されます。
Underlined Tab Content the 2nd
ここに出るのはアンダーラインタブ3の内容です。
ミニマルタブ
ミニマルタブ1の内容が表示されます。
シンプルでミニマルなタブの2。
多数タブの例（レスポンシブでアイコンのみ表示）
タブ例1の内容が表示されます。
2nd Tab for sample
第三のタブ例
4つめのタブ例
FIFTH EXAMPLE
タブコンポーネントの使い方
<!-- タブコンポーネント -->
<div class="tabs-basic"> <!-- または tabs-underline, tabs-minimal -->
<div class="tab-nav-container">
<div class="tab-nav">
<button class="tab-btn active" data-tab="tab1">
<i class="ri-building-line tab-icon"></i>
<span class="tab-text">タブ1</span>
</button>
<button class="tab-btn" data-tab="tab2">
<i class="ri-customer-service-line tab-icon"></i>
<span class="tab-text">タブ2</span>
</button>
</div>
</div>
<div class="tab-content-container">
<div class="tab-content active" id="tab1">
タブ1のコンテンツ
</div>
<div class="tab-content" id="tab2">
タブ2のコンテンツ
</div>
</div>
</div>
タブコンポーネントは、複数のコンテンツを切り替えて表示するのに適しています。レスポンシブデザインでは、画面幅が狭くなるとテキストが非表示になりアイコンのみが表示されます。タブボタンの「data-tab」属性と、タブコンテンツの「id」属性を一致させることで、正しく動作します。
Timeline & Flow
タイムライン・フロー表示
タイムライン、フローなどの表示バリエーション。
垂直タイムライン
2025年1月
プロジェクト開始
プロジェクトの計画立案と初期調査を行いました。チームメンバーの選定と役割分担を決定しました。
2025年3月
要件定義フェーズ
クライアントとの打ち合わせを重ね、詳細な要件定義書を作成しました。プロジェクトのスコープと目標を明確化しました。
2025年5月
設計フェーズ
システム設計とUIデザインを並行して進めました。複数の設計レビューを経て、最終設計を確定しました。
2025年8月
開発フェーズ
アジャイル開発手法を採用し、2週間ごとのスプリントで機能を実装していきました。定期的なデモを通じてクライアントからのフィードバックを取り入れました。
2025年11月
テストフェーズ
単体テスト、結合テスト、システムテスト、ユーザー受け入れテストを順次実施しました。発見された不具合を修正し、品質を向上させました。
2026年1月
リリース
本番環境へのデプロイを完了し、サービスを正式にリリースしました。ユーザートレーニングとサポート体制を整えました。
水平タイムライン
STEP 1
計画
目標設定と計画立案
STEP 2
分析
データ収集と分析
STEP 3
設計
システム設計とプロトタイピング
STEP 4
実装
コーディングと機能実装
STEP 5
テスト
品質検証と改善
交互フロー
01
課題発見
市場調査とユーザーインタビューを通じて、現在のシステムの問題点と改善すべき点を明確にしました。
02
アイデア創出
ブレインストーミングセッションを実施し、多様な視点からソリューションのアイデアを出し合いました。
03
プロトタイピング
有望なアイデアを選定し、低〜中忠実度のプロトタイプを作成して初期検証を行いました。
04
ユーザーテスト
実際のユーザーにプロトタイプを使ってもらい、フィードバックを収集して改善点を特定しました。
05
実装と改善
テスト結果に基づいて設計を改善し、最終的なソリューションを実装しました。
ステップフロー
情報収集
必要な情報を収集し、現状を把握します。
計画立案
収集した情報を基に、具体的な計画を立てます。
実行
計画に基づいて実際の作業を行います。
評価
結果を評価し、成功点と改善点を特定します。
改善
評価結果に基づいて改善策を実施します。
アイコン付きタイムライン
2025年1月
プロジェクト開始
プロジェクトの目標設定とチーム編成を行いました。
2025年3月
要件定義
クライアントの要望を整理し、詳細な要件定義書を作成しました。
2025年5月
デザイン
UIデザインとシステム設計を完了しました。
2025年8月
開発
設計に基づいてシステムの実装を進めました。
2025年11月
テスト
品質保証のための各種テストを実施しました。
2026年1月
リリース
システムを本番環境にデプロイし、正式にサービスを開始しました。
カード型タイムライン
2025年1月
プロジェクト開始
プロジェクトの計画立案と初期調査を行いました。チームメンバーの選定と役割分担を決定しました。
2025年3月
要件定義フェーズ
クライアントとの打ち合わせを重ね、詳細な要件定義書を作成しました。プロジェクトのスコープと目標を明確化しました。
2025年5月
設計フェーズ
システム設計とUIデザインを並行して進めました。複数の設計レビューを経て、最終設計を確定しました。
タイムライン・フローの使い方
<!-- 垂直タイムライン -->
<div class="timeline-container vertical">
<div class="timeline-item">
<div class="timeline-marker">
<div class="timeline-dot"></div>
</div>
<div class="timeline-content">
<div class="timeline-date">2025年1月</div>
<h3 class="timeline-title">プロジェクト開始</h3>
<p class="timeline-description">プロジェクトの計画立案と初期調査を行いました。</p>
</div>
</div>
<!-- 追加のタイムラインアイテム -->
</div>
<!-- 水平タイムライン -->
<div class="timeline-container horizontal">
<div class="timeline-item">
<div class="timeline-marker">
<div class="timeline-dot"></div>
</div>
<div class="timeline-content">
<div class="timeline-date">STEP 1</div>
<h3 class="timeline-title">計画</h3>
<p class="timeline-description">目標設定と計画立案</p>
</div>
</div>
<!-- 追加のタイムラインアイテム -->
</div>
<!-- 交互フロー -->
<div class="flow-container alternating">
<div class="flow-item">
<div class="flow-marker">
<div class="flow-number">01</div>
</div>
<div class="flow-content">
<h3 class="flow-title">課題発見</h3>
<p class="flow-description">市場調査とユーザーインタビューを実施</p>
</div>
</div>
<!-- 追加のフローアイテム -->
</div>