Google Chrome

【簡単】CSSセレクタを調べる方法【Google Chrome用】

2020年3月8日

CSSファイルを編集している際に、要素の指定がうまくいかないことがあります。
検索してもセレクタは人によって違うので、コピペでOK!というわけにもいかず…

要素の色の指定やサイズ、幅の調整、レイアウトなどたくさんやることはあるのに、その前にもたもた時間がかかる!

そこで今回は、Google Chromeを用いて簡単に要素指定の為のCSSセレクタを調べる方法を紹介します。

調べ方

まず、調べたい要素が表示されているページを開きます。

ページ内の調べたい要素の上で右クリックをします。
すると、サブメニューが開くので[検証]を選択します。

デベロッパーツールが開いたら、[Elements]タブに表示されているソースコードが一部青くなっているかと思います。

この青いゾーンの上でまた右クリックをすると、サブメニューが開くので[Copy]→[Copy selector]を選択します。

これをテキストエディタに貼り付けると、希望の箇所のCSSセレクタが取得できます。

ブログランキング・にほんブログ村へ

-Google Chrome

Copyright© こげろぐ , 2021 All Rights Reserved.