29_モーダル・アコーディオンパターン | Web Template Library

29 / Modal & Accordion Patterns

モーダル・アコーディオンパターン

CSS :target + details/summary を使ったJS不要のモーダル・ドロワー・アコーディオンリファレンス。

#5 確認ダイアログ

⚠

本当に削除しますか？

この操作は取り消せません。関連するすべてのデータが完全に削除されます。

キャンセル

#6 成功モーダル

✓

登録完了！

アカウントが正常に作成されました。確認メールを送信しましたのでご確認ください。

ダッシュボードへ

#7 画像ライトボックス

3 / 12

✕

🖼 画像プレビュー

← 前へ

次へ →

#8 マルチステップウィザード

新規プロジェクト作成

✕

ステップ 2/3

プロジェクト名

説明

#9 ネストアコーディオン

サービスについて

料金プランは？

Free/Pro/Businessの3プランをご用意。

無料トライアルは？

14日間の無料トライアルがあります。

技術仕様について

対応ブラウザは？

Chrome, Safari, Firefox, Edgeの最新版に対応。

APIは提供していますか？

REST APIとGraphQL APIを提供しています。

サポートについて

サポート時間は？

平日9:00-18:00（Business以上は24/365）。

チャットサポートは？

Pro以上のプランでご利用いただけます。

#10 コラプシブルカード

📊

売上レポート

▼

月間売上: ¥1,234,567（前月比+12.5%）

注文数: 847件

👥

ユーザーレポート

▶

📈

トラフィック

▶

#11 通知センター

通知 3

すべて既読にする

💬

新着メッセージ

田中さんから返信があります

2分前

✓

タスク完了

レポート作成が完了しました

15分前

📋

システム更新

v2.1にアップデートされました

1時間前

#12 ドロワー（サイドパネル）

フィルター

✕

カテゴリ

デザイン

開発

マーケティング

価格帯

¥0 — ¥60,000

フィルターを適用

#13 ツールチップ風

要素にホバーすると説明が表示されるパターン。

上に表示

右に表示

下に表示

#14 ボトムシート

共有

✉

メール

💬

LINE

🐦

X

🔗

リンク

キャンセル

#15 コマンドパレット

📊

ダッシュボードを開く

Ctrl+D

📝

新規投稿を作成

Ctrl+N

⚙

設定を開く

Ctrl+,

👤

プロフィール編集

❓

ヘルプセンター

F1

#16 クッキーバナーモーダル

🍪

Cookieの使用について

当サイトではサービス改善のためCookieを使用しています。詳細はプライバシーポリシーをご確認ください。

#17 フルスクリーンメニュー

MENU

✕

お問い合わせ

Twitter

Instagram

LinkedIn

#18 FAQ検索型アコーディオン

よくあるご質問

返品・交換は可能ですか？

商品到着後7日以内であれば返品・交換を承ります。未使用・未開封の商品に限ります。

送料はいくらですか？

5,000円以上のご購入で送料無料です。それ以下の場合は全国一律660円です。

支払い方法は？

クレジットカード（Visa/Master/AMEX）、銀行振込、コンビニ決済に対応しています。

#19 共有シート（モバイル風）

共有する

L

LINE

T

Twitter

F

Facebook

📧

メール

https://example.com/share/abc123

← サンプル一覧