デバッグモード - CSSセレクターを見つける
デバッグモードは、Navi+ライブラリに組み込まれた軽量ツールセットで、Navi+メニューをより効果的に操作するのに役立ちます。
1. CSSセレクターを見つける
デバッグモードを有効にするには、次のURL形式を使用します：
yourdomain.com#navidebug-on
あなたのウェブサイトはNavi+デバッグモードに切り替わります。ウェブサイトのさまざまな領域にマウスをホバーさせて、それに対応するCSSセレクターを表示します。カーソルを移動させて、目的のターゲットエリアを正確に特定してください。
効率的に作業するために、以下のキーボードショートカットに注意してください。
ショートカット 1. CSSセレクターのコピー
- MacOSでは⌘+C、WindowsではCtrl+Cを押して、選択したCSSセレクターをコピーします。
その後、次のために公開メニュー設定に貼り付けることができます：
- メガメニュー / グリッドメニュー：ターゲットCSSセレクターの前、後、または置き換えるためにメニューを挿入する
- スライドメニュー：ターゲットCSSセレクターがクリックまたはタップされたときにスライドメニューをトリガーする
ショートカット 2. セレクターレベル間のナビゲーション
- 親レベルのセレクターに移動するには、 * [↑/←]を押すか、Backspaceを押します
- 子レベルのセレクターに移動するには、 * [↓/→]を押します
重要なヒント： ほとんどの場合、完璧なCSSセレクターをすぐに見つけることはできません。経験に基づくと、次のようにする方が簡単です：
- 子レベルのセレクターを選択することから始める
- その後、1〜2の親レベルに移動する（ウェブサイトに視覚的なハイライトが表示されます）
- ⌘+C（Ctrl+C）を使用してセレクターをコピーする
- メニュー構成に貼り付けてテストする
時には、メニューイベントをCSSセレクターに挿入、置き換え、またはバインドする際に、望ましいユーザーエクスペリエンスを達成するためにこのプロセスを何度も繰り返す必要があるかもしれません。
1.1. デスクトップでCSSセレクターを見つける
1.2. モバイルでCSSセレクターを見つける
モバイルでCSSセレクターを見つけるには、ブラウザでモバイル（レスポンシブ）モードを有効にします。
次に、ページの任意の場所を右クリックし、次を選択します：
- Chrome: インスペクト
- Safari: 要素を検査
- Firefox: インスペクト
- Edge: インスペクト / 要素を検査
