wafoo-css リファレンス

CSS変数リファレンス

ユーティリティクラス

スペーシング

テキスト

表示

アクセシビリティ

Gridレイアウト

全コンポーネント一覧

レイアウト

1. コンテナ ( .wf-container ) - コンテンツ幅制限
2. グリッド ( .wf-grid ) - CSS Grid レイアウト

ナビゲーション

3. ナビバー ( .wf-navbar ) - ナビゲーションバー
4. ハンバーガーメニュー ( .wf-hamburger ) - モバイルメニュー
5. ヘッダー ( .wf-header ) - 暖簾風デザインのヘッダー
6. ブレッドクラム ( .wf-breadcrumb ) - パンくずリスト
7. ステップ ( .wf-steps ) - 進捗ステップ
8. タブ ( .wf-tablist , .wf-tab ) - タブナビゲーション

コンテンツ

9. カード ( .wf-card ) - コンテンツカード
10. 和紙カード ( .wf-card-washi ) - 和紙風カード
11. アコーディオン ( .wf-accordion ) - 折りたたみコンテンツ
12. 判子（スタンプ） ( .wf-stamp ) - 和風スタンプ

フォーム

13. 入力フィールド ( .wf-input ) - テキスト入力
14. テキストエリア ( .wf-textarea ) - 複数行入力
15. セレクト ( .wf-select ) - ドロップダウン選択
16. チェックボックス ( .wf-checkbox ) - チェックボックス
17. ラジオボタン ( .wf-radio ) - ラジオボタン
18. スイッチ ( .wf-switch ) - トグルスイッチ
19. ラベル ( .wf-label ) - フォームラベル

ボタン・インタラクション

20. ボタン ( .wf-btn ) - ボタン各種
21. バッジ ( .wf-badge ) - バッジ・ラベル

フィードバック

22. アラート ( .wf-alert ) - アラートメッセージ
23. トースト ( .wf-toast ) - トースト通知
24. モーダル ( .wf-modal ) - モーダルダイアログ
25. オフキャンバス ( .wf-offcanvas ) - サイドパネル
26. ツールチップ ( .wf-tooltip ) - ツールチップ
27. ポップオーバー ( .wf-popover ) - ポップオーバー

データ表示

28. テーブル ( .wf-table ) - データテーブル
29. リストグループ ( .wf-list-group , .wf-list-item ) - リスト表示
30. スケジュール ( .wf-schedule ) - スケジュール表示
31. カレンダー ( .wf-calendar ) - カレンダー表示

その他

32. ドロップダウン ( .wf-dropdown ) - ドロップダウンメニュー
33. ディバイダー ( .wf-divider ) - 区切り線
34. スピナー ( .wf-spinner ) - ローディングスピナー

追加コンポーネント詳細

コードブロック

アバター

プログレスバー

ページネーション

ドロップダウン

オフキャンバス

バッジ

評価

星評価コンポーネント。整数評価と0.5刻みの半星評価に対応。

基本的な使用例

<!-- 4つ星評価 -->
<div class="wf-rating">
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star" aria-hidden="true">◆</span>
  <span class="wf-rating__value" aria-label="評価: 5つ星中4">4.0</span>
</div>

<!-- 半星評価 -->
<div class="wf-rating">
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-filled" aria-hidden="true">◆</span>
  <span class="wf-rating__star is-half" aria-hidden="true">◆</span>
  <span class="wf-rating__star" aria-hidden="true">◆</span>
  <span class="wf-rating__value">3.5</span>
</div>

<!-- サイズバリエーション -->
<div class="wf-rating wf-rating-sm">...</div>  <!-- 小 -->
<div class="wf-rating">...</div>           <!-- 標準 -->
<div class="wf-rating wf-rating-lg">...</div>  <!-- 大 -->

インタラクティブ評価（JavaScript必要）

整数評価（1-5）の実装例:

<div class="wf-rating is-interactive" role="radiogroup" aria-label="評価を選択">
  <input type="radio" name="rating" value="1" class="wf-rating__input">
  <span class="wf-rating__star" role="radio" aria-checked="false"
        aria-label="1つ星" tabindex="0" data-value="1">◆</span>

  <input type="radio" name="rating" value="2" class="wf-rating__input">
  <span class="wf-rating__star" role="radio" aria-checked="false"
        aria-label="2つ星" tabindex="-1" data-value="2">◆</span>
  <!-- ...5つ星まで繰り返し... -->

  <span class="wf-rating__value">未評価</span>
</div>

半星評価（0.5-5.0）の実装例:

<div class="wf-rating is-interactive" id="half-rating" role="radiogroup">
  <input type="radio" name="rating-half" value="0.5" class="wf-rating__input">
  <input type="radio" name="rating-half" value="1" class="wf-rating__input">
  <span class="wf-rating__star" role="radio" aria-label="1つ星"
        tabindex="0" data-index="1">◆</span>

  <input type="radio" name="rating-half" value="1.5" class="wf-rating__input">
  <input type="radio" name="rating-half" value="2" class="wf-rating__input">
  <span class="wf-rating__star" role="radio" aria-label="2つ星"
        tabindex="-1" data-index="2">◆</span>
  <!-- ...5つ星まで繰り返し... -->

  <span class="wf-rating__value">未評価</span>
</div>

<script>
// 星の左半分クリック = 0.5、右半分クリック = 1.0
document.querySelectorAll('#half-rating .wf-rating__star').forEach(star => {
  star.addEventListener('click', function(e) {
    const rect = this.getBoundingClientRect();
    const clickX = e.clientX - rect.left;
    const starIndex = parseInt(this.dataset.index);
    const isLeftHalf = clickX < rect.width / 2;
    const value = isLeftHalf ? starIndex - 0.5 : starIndex;
    // 評価値を更新する処理...
  });
});
</script>

詳細な実装例は examples/rating.html を参照してください。

テーマ

wafoo-cssには10種類の和風カラーテーマが用意されています。

使用方法：

<body class="theme-sakura">
  <!-- コンテンツ -->
</body>

アクセシビリティ＆JavaScript初期化

自動初期化（推奨）

wafoo.jsを読み込むと、 data-wf-* 属性を持つ要素が自動的に初期化されます：

使用例

ツールチップ

<button data-wf-tooltip="tip-1">ホバーしてください</button>
<div id="tip-1" class="wf-tooltip" hidden>ツールチップの内容</div>

モーダル

<button data-wf-modal="modal-1">開く</button>
<div id="modal-1" class="wf-modal-overlay" hidden>
  <div class="wf-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">タイトル</h2>
    <p>内容</p>
    <button class="wf-modal__close">閉じる</button>
  </div>
</div>

タブ（ARIAパターン）

<div class="wf-tablist" role="tablist" data-wf-tabs>
  <button class="wf-tab" role="tab" aria-selected="true" aria-controls="panel-1">タブ1</button>
  <button class="wf-tab" role="tab" aria-selected="false" aria-controls="panel-2">タブ2</button>
</div>
<div id="panel-1" class="wf-tabpanel" role="tabpanel">内容1</div>
<div id="panel-2" class="wf-tabpanel" role="tabpanel" hidden>内容2</div>

動作デモ

以下のタブをクリックして切り替えてください（テスト用）。

手動初期化（高度な使用）

動的に生成された要素には、WFUIオブジェクトを直接使用できます：

// ツールチップ
WFUI.tooltip(triggerElement, tooltipElement);

// モーダル
WFUI.modal(triggerButton, overlayElement);

// タブ
WFUI.tabs(containerElement);

// カレンダー
WFUI.calendar(containerElement, { selectedDate: '2025-11-10' });

// スケジュール
WFUI.schedule(containerElement, { mode: 'daily', timeInterval: 60 });

使用上の注意

スケジュールコンポーネント

日付選択後に表示される要素（時間レンジ選択、時間刻み選択など）は、初期状態で display: none または hidden 属性を設定してください。日付が選択されるまでこれらの要素を非表示にすることで、より良いユーザー体験を提供できます。

<!-- 日付選択後に表示される要素 -->
<div id="schedule-time-interval-wrapper" style="display: none;">
  <!-- 時間レンジや時間刻みの選択UI -->
</div>

<script>
// 日付選択時に表示制御
function updateScheduleVisibility() {
  const hasDate = dateInput && dateInput.value;
  const wrapper = document.getElementById('schedule-time-interval-wrapper');
  if (wrapper) {
    wrapper.style.display = hasDate ? 'block' : 'none';
  }
}
</script>

デモページでのフォーム使用

デモページやサンプルでフォームコンポーネントを使用する際は、ページ遷移を防ぐため onsubmit イベントで preventDefault() を呼び出してください。実際のアプリケーションでは、適切なフォーム送信処理を実装してください。

<form onsubmit="event.preventDefault(); return false;">
  <!-- フォーム要素 -->
  <button type="submit" class="wf-btn wf-btn-primary">送信</button>
</form>

キーボード対応

• Esc : モーダル/ポップオーバー/ツールチップを閉じる
• Tab : フォーカストラップ（モーダル/オフキャンバス内）
• 矢印キー : タブ、ドロップダウン、カレンダーのナビゲーション
• Enter/Space : ボタンの実行、選択の確定
• Home/End : タブの最初/最後へ移動

スクリーンリーダー対応

• ソート可能テーブル： aria-live リージョンで並び替えを通知
• タブ： aria-selected で現在のタブを示す
• モーダル：背景に aria-hidden="true" を自動設定
• フォーカス管理：開閉時に前のフォーカス位置を保存・復元