AREA
静かな湖
最初に訪れることができる穏やかな釣りエリア。希少な魚との出会いも待っています。
解放コスト：無料
ボタン
発光グラデーション、アウトライン、ゴースト、小型・大型・アイコン専用を用意。
カラーバリエーション
.fb-btn-*<button class="fb-btn fb-btn-primary">保存する</button> <button class="fb-btn fb-btn-amber">注目アクション</button> <button class="fb-btn fb-btn-danger">削除する</button>
アウトライン / ゴースト
outline / ghost控えめな操作、キャンセル、補助アクションに適しています。
サイズとアイコン
sm / default / lg横幅いっぱい / 無効状態
block / disabled入力欄・フォーム
検索欄、アイコン付きテキスト入力、セレクト、複数行入力、入力グループ。
検索ボックス
.fb-searchページ全体の検索や一覧フィルターに利用できます。デモとして下の候補リストを絞り込みます。
レイク・レジェンド
OG / 静かな湖
ポセイドン
神 / 広大な海
ネッシー
ミシック / 静かな湖
基本入力 / アイコン付き
.fb-inputサイズ・状態
sm / lg / error入力内容に誤りがあります。
セレクトボックス
.fb-selectテキストエリア
.fb-textarea入力グループ
.fb-input-groupコイン枚
単位や接尾辞、送信アクションを入力欄と一体化できます。
選択コントロール
チェックボックス、ラジオボタン、トグルスイッチ、スライダー。
チェックボックス
.fb-checkラジオボタン
.fb-radioトグルスイッチ
.fb-switchスライダー
.fb-range65%
0%50%100%
バッジ・通知・進捗
レアリティやステータス、注意事項、数値指標、プログレスバー。
バッジ・ステータスタグ
.fb-badge-*通常レア神OG要確認完了ミシックオンライン未読 3
通知・アラート
.fb-alertお知らせ設定が保存されました。ページを更新すると変更が反映されます。
注意この操作は元に戻せない場合があります。
成功処理が正常に完了しました。
エラー入力内容を確認して、もう一度お試しください。
進捗バー
.fb-progressデータ読込74%
経験値42%
ローディング状況、経験値、容量の表示などに使えます。
メトリクスカード
.fb-metric現在の閲覧者
1,284
前日比 +12.8%
登録アイテム
2,048
データベース集計
最高難易度
98.7K
Difficulty Score
カード・リスト
ガラス調のコンテンツカード、強調カード、一覧行のパターン。
SPECIAL
特別コンテンツ
限定情報や重要なコンテンツを目立たせるためのゴールドアクセント付きカードです。
特別な項目
リストアイテム
.fb-list-itemアカウント設定
ユーザー名、プロフィール、ログイン情報を管理します。
通知
システム通知や更新情報を確認できます。
セキュリティ
アカウントの安全性とアクセス権限を確認します。
タブ・テーブル
アクティブ状態がひと目で分かるタブ切り替えと、暗色テーブル。
タブ切り替え（操作できます）
.fb-tabs / .fb-tab概要ページのコンテンツです。カードや集計値、説明文などを表示できます。
アイテムページのコンテンツです。検索結果、ランキング、アイテム一覧などを配置できます。
設定ページのコンテンツです。フォーム項目やトグルスイッチなどを組み合わせてください。
データテーブル
.fb-table| ITEM | RARITY | SCORE | STATUS |
|---|---|---|---|
| レイク・レジェンド | OG | 9,850,000 | 取得可能 |
| ポセイドン | 神 | 1,250,000 | 取得可能 |
| ネッシー | ミシック | 248,000 | 未発見 |
モーダル・Toast通知
確認ポップアップと、画面の隅に出る軽量通知。実際に開いて試せます。
モーダルダイアログ
.fb-modal画面中央に表示する確認画面です。背景をクリック、Escキーでも閉じられます。
Toast通知
.fb-toast保存成功、注意、エラーなどを一時的に通知します。