Wordpress

目的のidやclass等を探し出すポイント解説【WordPress】

  1. HOME >
  2. Wordpress >

目的のidやclass等を探し出すポイント解説【WordPress】

コツ

目的のidやclass等を探し出すポイント

・コンソール画面でしか確認できないidやclassの属性値を見つけるコツが知りたい。
・コードが長すぎて、目的の場所を探し出せない。

ココがポイント

結論:

  • Chromeの場合
    目的の部分にカーソルを合わせて右クリック→検証
  • FFの場合
    目的の部分にカーソルを合わせて右クリック→要素を調査

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

自作のCSSやJavaScriptを書いていると、どうしても「idやclassの値が知りたい」と思う機会にたびたび出くわしているのではないでしょうか?

WordPressでは自動でidやclassが指定されるので、コンソール画面から確認する機会が多いと思います。

そこで、今回はコンソール画面から簡単に目的の場所の値を特定するコツをご紹介できればと思い記事を作成しました。

それでは、説明して参ります。

 

1.idやclass、専用のタグ(「nav」や「aside」など)を特定するメリット

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)」を選択して、コンソール画面を開きます。

このコンソール画面から目的のククリまで▶をおして、展開してきます。

 

目的の場所を選択すると色がつく

目的の場所のコードを選択していると、表示画面側にも色がつき見分けることができます。

ココがポイント

コード展開手順

上から順番に大きなククリの状態でみていき、表示画面で色のつく位置を確認
表示画面で目的のパーツが囲まれたら、▶をおして小さいククリで確認
この手順で目的のブロックまで展開していきます。

 

スライドメニューの目次を変更コードid

タブ内を確認して、それぞれの値をメモします。スクショに残すのが手早くできます。

 

4.目的の場所でコンソール画面を開き親要素の属性値を確認する

ブラウザの機能を使って、目的のコードを確認する方法があります。目的の部分にカーソルを合わせて右クリックをして「検証」を選択します。すると、カーソルを合わせた要素のコードからコンソール画面が開くので、今度は▼をおして展開している状態を閉じ親要素のidやclass属性値を確認すればOKです。

 

まとめ

お疲れ様でした。

今回は、CSSやJavaScriptなどを自作する上で必要になるコンソール画面でのコード確認について、その確認の「コツ」をご紹介させていただきました。

ご一読いただきありがとうございました。

 

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.