BOOK Studio947
狩野祐東・狩野さやか著書

ブラウザの開発ツールからCSSセレクタをコピーする

ブラウザの開発ツールから、HTML要素を選択するCSSセレクタをコピーすることができます。

操作方法は動画をご覧ください。

動画ではChromeを使用していますが、すべての主要なPC向けブラウザに同様の機能が搭載されています。Safariの場合は選択したい要素を右クリック→「コピー」→「セレクタのパス」を選びます。Firefoxの場合は右クリックして「コピー」→「CSS セレクター」を選びます。

コピーされるのはかなり……ベタなセレクタで、Webデザインなどに使うのはちょっと難しいかもしれませんが、Pythonやその他プログラミング言語でページをスクレイピングするときにはかなり役に立ちます。ぜひ使ってみてください。

狩野 祐東

Web/アプリケーションUIデザイナー、エンジニア。執筆家。 アメリカ・サンフランシスコに留学、UIデザイン理論を学ぶ。Webサイトやアプリケーションのデザイン・開発、関連技術書籍の執筆を数多く手がける。株式会社Studio947代表。