目的のidやclass等を探し出すポイント
・コンソール画面でしか確認できないidやclassの属性値を見つけるコツが知りたい。
・コードが長すぎて、目的の場所を探し出せない。
ココがポイント
結論：
- Chromeの場合
目的の部分にカーソルを合わせて右クリック→検証 - FFの場合
目的の部分にカーソルを合わせて右クリック→要素を調査
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
自作のCSSやJavaScriptを書いていると、どうしても「idやclassの値が知りたい」と思う機会にたびたび出くわしているのではないでしょうか？
WordPressでは自動でidやclassが指定されるので、コンソール画面から確認する機会が多いと思います。
そこで、今回はコンソール画面から簡単に目的の場所の値を特定するコツをご紹介できればと思い記事を作成しました。
それでは、説明して参ります。
目次
CSSでWebページのレイアウトを調整するには、まず場所の指定が必要になってきます。これを「セレクタ」といいます。
Webページ上で大まかなククリだけを「セレクタ」にすると、意図してない部分のスタイルまで変更されてしまいます。コンソール画面で目的の値を特定することは非常に重要になってきます。
「セレクタ」を選ぶ優先順位は、「id＞class＞専用のタブ」とした方が良いでしょう。優先順位が高いものほど、一つのWebページ上で使われている場所が限定されたものになります。
意図しない部分の変更を避けるため、この順番で「セレクタ」を決めてください。
2.セレクタとなる値のHTMLの表示とCSSでの書き方
| 属性 | HTML：コンソール画面の表示例 | CSS：セレクタに入力するCSSコードの例 |
| id属性 | id="smartphone" | #smartphone |
| class属性 | class="smartphone" | .smartphone |
| 専用タグ | <a> | a |
ルールは簡単なのですぐに書けるようになるでしょう。「id → #（シャープ）」「class → .（ドット）」
同じタグ<>の中の値書くときは左から順番に間を空けずに記述。別のタグ<>の場合は、セレクタとセレクタの間に「半角スペース」をいれます。
3.それぞれの値をコンソール画面で探すポイント
まず、コードを確認したいWebページを開きます。
ページのどこでも良いので、Windowsではマウスの右クリック、MacintoshではContrl＋クリック
開かれたメニューの中の一番下にある「検証（I）」を選択して、コンソール画面を開きます。
このコンソール画面から目的のククリまで▶をおして、展開してきます。
目的の場所のコードを選択していると、表示画面側にも色がつき見分けることができます。
ココがポイント
上から順番に大きなククリの状態でみていき、表示画面で色のつく位置を確認。
表示画面で目的のパーツが囲まれたら、▶をおして小さいククリで確認。
この手順で目的のブロックまで展開していきます。
タブ内を確認して、それぞれの値をメモします。スクショに残すのが手早くできます。
4.目的の場所でコンソール画面を開き親要素の属性値を確認する
ブラウザの機能を使って、目的のコードを確認する方法があります。目的の部分にカーソルを合わせて右クリックをして「検証」を選択します。すると、カーソルを合わせた要素のコードからコンソール画面が開くので、今度は▼をおして展開している状態を閉じ親要素のidやclass属性値を確認すればOKです。
まとめ
お疲れ様でした。
今回は、CSSやJavaScriptなどを自作する上で必要になるコンソール画面でのコード確認について、その確認の「コツ」をご紹介させていただきました。
ご一読いただきありがとうございました。
