スタイル開発ドキュメント
概要
このドキュメントは、VJSP Vue3フレームワークのスタイル処理メカニズムとカスタマイズ方法について詳しく説明します。フレームワークはモダンなCSSアーキテクチャを採用し、Tailwind CSS、Lessプリプロセッサ、CSS変数システムを組み合わせて、柔軟で保守可能なスタイルソリューションを提供します。
スタイルアーキテクチャ
1. スタイルファイル構造
shell
src/styles/
├── components/ # コンポーネントスタイル
│ ├── nprogress.less # プログレスバースタイル
│ ├── tables.less # テーブル関連スタイル
│ └── tools.less # ユーティリティクラススタイル
├── element/ # Element Plusテーマカスタマイズ
│ ├── dark.less # ダークテーマ
│ └── index.less # Element Plusテーマエントリ
├── index.less # グローバルスタイルエントリ
└── variables.module.less # CSS変数システム2. スタイル処理フロー
- CSS変数定義:
variables.module.lessでグローバルCSS変数を定義 - Tailwind統合:
index.lessを通じてTailwind基本スタイルをインポート - コンポーネントスタイル: 機能モジュールごとにコンポーネントスタイルを整理
- テーマカスタマイズ: CSS変数オーバーライドによるElement Plusテーマカスタマイズ
コアスタイルメカニズム
1. CSS変数システム
フレームワークはCSSカスタムプロパティ（CSS Variables）をスタイルの基礎として使用し、明暗テーマ切り替えをサポートします。すべてのCSS変数は[variables.module.less]ファイルで定義されています。
完全なCSS変数テーブル
| 変数名 | デフォルト値 | 機能説明 | テーマサポート |
|---|---|---|---|
--left-menu-max-width | 200px | 左メニュー最大幅 | 一般 |
--navbar-height | 64px | デスクトップナビゲーションバー高さ | 一般 |
--navbar-height-mobile | 56px | モバイルナビゲーションバー高さ | 一般 |
--tags-view-height | 36px | デスクトップタグページ高さ | 一般 |
--tags-view-height-mobile | 32px | モバイルタグページ高さ | 一般 |
--global-btn-radius | 6px | グローバルボタン角丸半径 | 一般 |
--spacing-xs | 4px | 超小間隔、密な配置用 | 一般 |
--spacing-sm | 8px | 小間隔、内部要素間隔用 | 一般 |
--spacing-md | 16px | 中間間隔、通常要素間隔用 | 一般 |
--spacing-lg | 24px | 大間隔、ブロック間隔用 | 一般 |
--spacing-xl | 32px | 超大間隔、大ブロック間隔用 | 一般 |
--font-size-xs | 12px | 超小フォント、補助テキスト用 | 一般 |
--font-size-sm | 14px | 小フォント、本文内容用 | 一般 |
--font-size-md | 16px | 中間フォント、タイトル用 | 一般 |
--font-size-lg | 18px | 大フォント、大タイトル用 | 一般 |
--font-size-xl | 20px | 超大フォント、ページタイトル用 | 一般 |
--shadow-sm | 0 1px 2px rgba(0, 0, 0, 0.05) | 小影、カードホバー用 | 一般 |
--shadow-md | 0 4px 6px -1px rgba(0, 0, 0, 0.1) | 中間影、モーダルボックス用 | 一般 |
--shadow-lg | 0 10px 15px -3px rgba(0, 0, 0, 0.1) | 大影、ドロップダウンメニュー用 | 一般 |
--shadow-xl | 0 20px 25px -5px rgba(0, 0, 0, 0.1) | 超大影、大コンポーネント用 | 一般 |
--bg-primary | #ffffff | 主背景色 | 明るいテーマ |
--bg-secondary | #f5f7fa | 副背景色 | 明るいテーマ |
--bg-tertiary | #f0f2f5 | 第三背景色 | 明るいテーマ |
--bg-card | #ffffff | カード背景色 | 明るいテーマ |
--bg-hover | #f5f7fa | ホバー背景色 | 明るいテーマ |
--bg-active | #ecf5ff | アクティブ状態背景色 | 明るいテーマ |
--text-primary | #303133 | 主テキスト色 | 明るいテーマ |
--text-secondary | #606266 | 副テキスト色 | 明るいテーマ |
--text-tertiary | #909399 | 第三テキスト色 | 明るいテーマ |
--text-disabled | #c0c4cc | 無効テキスト色 | 明るいテーマ |
--border-color | #dcdfe6 | ボーダー色 | 明るいテーマ |
--border-light | #e4e7ed | 明るいボーダー | 明るいテーマ |
--border-dark | #c0c4cc | 暗いボーダー | 明るいテーマ |
--color-primary | #409eff | 主色 | 一般 |
--color-success | #67c23a | 成功色 | 一般 |
--color-warning | #e6a23c | 警告色 | 一般 |
--color-danger | #f56c6c | 危険色 | 一般 |
--color-info | #909399 | 情報色 | 一般 |
--shadow-color | rgba(0, 0, 0, 0.1) | 影色 | 明るいテーマ |
--shadow-color-dark | rgba(0, 0, 0, 0.2) | 暗い影 | 明るいテーマ |
--mask-color | rgba(0, 0, 0, 0.8) | マスク色 | 一般 |
--mask-color-light | rgba(0, 0, 0, 0.3) | 明るいマスク | 一般 |
--striped-bg | rgba(255, 255, 255, 0.02) | 縞模様背景 | 明るいテーマ |
--loading-gradient | linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent) | ローディングアニメーショングラデーション | 明るいテーマ |
--bg-primary | #141414 | 主背景色 | 暗いテーマ |
--bg-secondary | #1f1f1f | 副背景色 | 暗いテーマ |
--bg-tertiary | #262626 | 第三背景色 | 暗いテーマ |
--bg-card | #1f1f1f | カード背景色 | 暗いテーマ |
--bg-hover | #2a2a2a | ホバー背景色 | 暗いテーマ |
--bg-active | #2a2a2a | アクティブ状態背景色 | 暗いテーマ |
--text-primary | #e5e5e5 | 主テキスト色 | 暗いテーマ |
--text-secondary | #a3a3a3 | 副テキスト色 | 暗いテーマ |
--text-tertiary | #737373 | 第三テキスト色 | 暗いテーマ |
--text-disabled | #525252 | 無効テキスト色 | 暗いテーマ |
--border-color | #404040 | ボーダー色 | 暗いテーマ |
--border-light | #525252 | 明るいボーダー | 暗いテーマ |
--border-dark | #303030 | 暗いボーダー | 暗いテーマ |
--shadow-color | rgba(0, 0, 0, 0.3) | 影色 | 暗いテーマ |
--shadow-color-dark | rgba(0, 0, 0, 0.5) | 暗い影 | 暗いテーマ |
--transition-theme | 0.3s ease | テーマ切り替え遷移時間 | 一般 |
--transition-fast | 0.15s ease | 高速遷移アニメーション | 一般 |
--transition-slow | 0.5s ease | 低速遷移アニメーション | 一般 |
--bg-gradient-start | #f5f7fa | グラデーション背景開始色 | 明るいテーマ |
--bg-gradient-end | #c3cfe2 | グラデーション背景終了色 | 明るいテーマ |
--card-shadow | 0 4px 6px -1px rgba(0, 0, 0, 0.1) | カード影 | 明るいテーマ |
--primary-color | #409eff | 主色 | 一般 |
--bg-gradient-start | #1f1f1f | グラデーション背景開始色 | 暗いテーマ |
--bg-gradient-end | #2a2a2a | グラデーション背景終了色 | 暗いテーマ |
--card-shadow | 0 4px 6px -1px rgba(0, 0, 0, 0.3) | カード影 | 暗いテーマ |
変数使用例
less
// CSS変数の使用
.component {
background-color: var(--bg-primary);
color: var(--text-primary);
border: 1px solid var(--border-color);
border-radius: var(--global-btn-radius);
padding: var(--spacing-md);
box-shadow: var(--shadow-sm);
transition: all var(--transition-fast);
}
// レスポンシブ間隔
.responsive-spacing {
padding: var(--spacing-sm);
@media (min-width: 768px) {
padding: var(--spacing-md);
}
@media (min-width: 1024px) {
padding: var(--spacing-lg);
}
}2. Tailwind CSS統合
フレームワークはTailwind CSSを統合し、アトミックCSSクラス名を提供します：
less
// Tailwind設定拡張
tailwind.config.jsで定義：
- 色拡張：primary、success、warningなど
- アニメーション設定：fade、slideなどの遷移効果
- 影システム：sm、md、lgなどの影レベル
- レスポンシブブレークポイント：sm、md、lg、xl、2xl3. レスポンシブデザイン
モバイルファーストのレスポンシブ戦略を採用：
less
// ブレークポイント定義
@screen-sm: 640px;
@screen-md: 768px;
@screen-lg: 1024px;
@screen-xl: 1280px;
@screen-2xl: 1536px;
// レスポンシブユーティリティクラス
.responsive-grid {
display: grid;
grid-template-columns: 1fr;
@media (min-width: @screen-md) {
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: @screen-lg) {
grid-template-columns: repeat(3, 1fr);
}
}ビジネスモジュールスタイル開発例（製品モジュール）
1. ページレイアウト構造
製品管理ページはモジュール化されたレイアウト設計を採用：
vue
<template>
<div class="product-container query-container">
<!-- フィルター条件エリア -->
<el-card class="filter-container">
<!-- フィルターフォーム内容 -->
</el-card>
<!-- データ表示エリア -->
<el-card class="table-container">
<!-- デスクトップテーブルビュー -->
<div v-if="!isMobile" class="desktop-view">
<!-- テーブルコンポーネント -->
</div>
<!-- モバイルカードビュー -->
<div v-else class="mobile-view">
<!-- カードレイアウト -->
</div>
</el-card>
</div>
</template>2. レスポンシブ適応実装
製品ページは完全なレスポンシブ適応を実装：
デスクトップレイアウト：
- Element Plusのテーブルコンポーネントを使用してデータを表示
- 固定列幅とヘッダー配置の最適化
- ページネーションコンポーネントを下部に表示
モバイル適応：
- カードレイアウトでテーブルを置き換え
- フィルター条件を折りたたみ可能
- タッチフレンドリーな操作ボタン
- プルアップでさらに読み込みメカニズム
3. スタイルクラス名規則
製品モジュールはBEM命名規則を採用：
less
// コンテナクラス名
.product-container {
// ページコンテナスタイル
}
.query-container {
// クエリーエリアスタイル
}
.filter-container {
// フィルター条件コンテナ
}
.table-container {
// テーブルコンテナスタイル
}
// モバイル固有スタイル
.mobile-view {
.mobile-cards-container {
// カードコンテナ
}
.mobile-card {
// 単一カード
.card-header {
/* カードヘッダー */
}
.card-content {
/* カード内容 */
}
.card-actions {
/* 操作エリア */
}
}
}4. 動的スタイル処理
製品ページはデバイスタイプに基づいてスタイルを動的に調整：
vue
<template>
<el-form
:inline="!isMobile"
:label-position="isMobile ? 'top' : 'left'"
:label-width="isMobile ? '80px' : '100px'"
>
<el-input
:style="{ width: isMobile ? '100%' : '160px' }"
:size="isMobile ? 'small' : 'default'"
/>
</el-form>
</template>スタイルカスタマイズガイド
1. テーマ色カスタマイズ
CSS変数を変更してテーマ色をカスタマイズ：
less
// variables.module.lessで変更
:root {
--color-primary: #your-primary-color;
--color-success: #your-success-color;
// ...他の色変数
}2. コンポーネントスタイルオーバーライド
CSSセレクターを通じてElement Plusコンポーネントスタイルをオーバーライド：
less
// テーブルスタイルのオーバーライド
.el-table {
.el-table__header {
th {
background-color: var(--bg-color-secondary);
}
}
}3. レスポンシブブレークポイントカスタマイズ
Tailwind設定でレスポンシブブレークポイントを変更：
javascript
// tailwind.config.js
module.exports = {
theme: {
screens: {
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
},
}ベストプラクティス
1. スタイル組織原則
- モジュール化: 機能モジュールごとにスタイルファイルを整理
- 再利用性: 共通スタイルをユーティリティクラスとして抽出
- 保守性: CSS変数とプリプロセッサを使用
- パフォーマンス最適化: 深いネストセレクターを避ける
2. レスポンシブデザイン推奨事項
- モバイルファーストのデザイン戦略
- 相対単位（rem、em）を使用
- 適切なブレークポイント閾値を設定
- マルチデバイス互換性をテスト
3. テーマ切り替え実装
フレームワークはdata-theme属性の変更による明暗テーマ切り替えをサポート：
javascript
// テーマ切り替え
document.documentElement.setAttribute('data-theme', 'dark')よくある質問
1. スタイルオーバーライドが効かない
スタイルファイルの読み込み順序が正しいことを確認し、カスタムスタイルはフレームワークスタイルの後に読み込まれるようにします。
2. モバイル適応の問題
フレームワークが提供するレスポンシブユーティリティクラスとブレークポイントシステムを使用し、ハードコーディングされた寸法を避けます。
3. テーマ切り替えの異常
CSS変数定義が完全であることを確認し、明暗両方のテーマ変数に対応する値があることを確認します。
まとめ
VJSP Vue3フレームワークのスタイルシステムは、モダンなCSS技術とベストプラクティスを組み合わせた完全なソリューションを提供します。CSS変数、Tailwind CSS、モジュール化された組織を通じて、開発者は効率的にスタイルカスタマイズとビジネス開発を行うことができます。