ブログ

コーディングに便利!サイトのページ構造をブロックごとに色分け表示できる技

全ブロックに色枠

こんにちは。画像も作るけどコーディングもする黒川です。
皆様、日々のコーディングは順調ですか?

熟練コーダーさんならサイトをひと目見ただけで構成要素が浮き上がって見えるらしいですが、そこまで極めていない私はchrome検証ツール「矢印」にいつも大活躍してもらっています。

Chromeの検証ツールで活躍する矢印
酷使されるChromeの矢印

検証ツールの矢印は気になる要素にマウスオーバーすると、枠と情報が表示されて、本当にありがたい機能です。頼り切っています。

検証ツールの矢印で気になるパーツを狙い撃ち

でも時々、一部じゃなくて全体に枠を付けたいこともあるんです。

とくに素敵なサイトに出会ってしまった時や、「どんな書き方をしていらっしゃるのかしら?」とソースを拝見する際など、ページ内のすべての要素を枠付きで表示できたらかなり便利です。

そして最近、理想的な方法をネットで拝見しましたのでシェアします。
情報が掲載されていたのは下記ページです。

https://dev.to/gajus/my-favorite-css-hack-32g3

全ブロックに色枠をつけるって?

先にイメージを出してしまいます。
素のページと、全ブロック色分け付きページです。

素のcooenサイトページ
素のcooenサイトページ
色分けブロックありのcooenページ
色分けブロックありのcooenページ

要素ごとに枠がついているので、要素を どのように 分解しマークアップしているのか、ひと目で分かりますね。入れ子になっている部分は色が濃くなるので、入れ子の深度もある程度見て取れるのが素晴らしいです。

では実際に、どのようにしてこの色枠を付けているのか説明します。

色分けブロックは検証ツールにcssを追記

Chromeの検証ツールでは、今見ているページのHTMLソースやCSSを、一時的に編集・改変することができます。この仕組を利用して、ページのHTMLソースに色分けブロック用のCSSを追加しましょう。

※以降はWindowsでの説明となります。

検証ツールを開く

色分けブロックでみてみたいページを開き、F12 キーをクリックします。
( MacではCommand + Option + I )

検証ツールを開きます

HTMLが書かれているエリアをチェックします

今回使用するのは、HTMLソースが書かれている部分です。
初めの方に記載されている<head>という文字を見つけましょう。
見つけたらそこにマウスを当てたまま、右クリックです

出てきたメニューの中から、「Edit as HTML」をクリックしましょう。

<head> を見つけて、右クリック

コード部分が自由に編集できるようになりました。
書き足したり、不要部分を削除したり好きなようにできます。

コードが自由に編集できるようになります。

色付きブロック用のCSSを追記します

自由に編集できるようになった箇所をスクロールなどして、
</head> と書いてある場所を見つけます。

</head> を見つける

それではその </head> の直前に以下のコードをコピペしてください。

<style>
 * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
   }
</style>
必要なCSSを追記

追記後、どこか適当な場所(ページ内など)をクリックすると、変更箇所が確定しページに反映されます。

※1点だけ注意です。

リロードすると、この追記したCSS設定は消え去ります。
その時はもう一度、同じ作業をして色枠を復活させてください。

コーディングがはかどります

ページ内の要素が、どう分割され、どれほどの余白を持って、どのように入れ子になっているかをひと目で把握できるのは、かなり便利です。
コーディング勉強中の初心者さんは、気になるページをみかけたらこれを試してみるだけで、分解と配置の感覚を掴めるのではないでしょうか。

更に慣れてくれば、入れ子の構造がだいたい把握でき、どのようにマークアップされているかも予測できるようになります。
業務に追われるコーダーさんも、実装中のページの全体把握にお役立ちではないでしょうか。

PAGE TOP