webページのレイアウトデザインを進行中に各要素やID、classの利用箇所を確認したいときがあります。特にテンプレートから複数ページを作成する際は、IDの重複やclassの他のページとの整合性が気になります。そうしたとき、このサンプルを進行中のページの片隅に記述して利用しています。

【使い方】セレクトのプルダウンから、事前に設定したセレクターを選ぶと、デフォルトのチェック用スタイル「border:1px solid red」とともにinput欄に入ります。スタイルを変更したければ、ここで書き換え、「チェック」ボタンをクリックすると、その内容が反映され、どの部分にセレクターが使われているか確認できます。チェック用スタイルを消すには、【null】を選び、「チェック」ボタンをクリック。