30
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

HRBrainAdvent Calendar 2023

Day 17

一瞬でHTMLの構造を把握出来るChromeの拡張機能を紹介

Last updated at Posted at 2023-12-17

はじめに

こんにちは、RAOです。

WEBアプリケーション開発を行っている際

「この画面ってHTMLの構造どうなっているんだろう」
「なんかアイコンの位置ズレてる気がする、、」

って事よくあると思います。

こんなシーンに役立つChromeの拡張機能を紹介したいと思います。

本記事はHRBrain Advent Calendar 2023の17日目の記事です。

UI Build Assistant

こちらが今回ご紹介するChrome拡張機能です。

それでは早速使ってみましょう。
今回はZennを例にします。(特に意味は無いです)

image.png

拡張機能をONにすると以下のようになります。少しびっくりしますがこれが正常です。
どうなっているか開発者ツールを除いてみましょう。

image.png

ある要素を適当に選択してみると以下のスタイルが!importantで上書きされていますね。
見る限りbackground-coloroutlineが設定されており、HTML要素が縁取られ輪郭がわかりやすくなっていますね。
2枚目の写真は1枚目の子要素なのですがbackground-colorが少し濃くなっており、重なりも分かりやすくなっていることが見て取れますね。

image.png

image.png

活用シーン

自分が活用しているシーンを紹介します。

以下の画像はZennの右上部分を拡大したものです。そして開発者ツールであるCSSを削除しています。

ぱっと見違和感がありますね。拡張機能をONにしてみます。

image.png

アイコンやボタン類はまとめて一つの要素に囲まれており、虫眼鏡アイコンは親要素の中で上に位置していることが分かります。
ここから「親要素にalign-items: center;が抜けているのでは?」という仮説を立てる事ができます。

image.png

実際にスタイルを見てみるとチェックが外れています。(自作自演)

image.png

このように

子要素が親要素のどこに位置しているのか?
どのようなHTMLの構造になっているのか?

を瞬時に把握することが出来ます。
開発者ツールの要素を選択して検査やコード上から遡ることは出来ますが、こちらの方がより直感的ですね。

終わりに

今回はHTMLの構造を把握できるChromeの拡張機能をご紹介しました。
この拡張機能のお陰で、HTMLの構造確認→開発者ツールでCSSをイジる→コードに転記のサイクルを高速で回すことが出来るようになりました。紹介したシーン以外にも色々活用シーンがあると思います。

株式会社HRBrainでは新しいメンバーを募集しています。

30
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?