こんにちは! ヨス(プロフィールはこちら)です。
わたしの大好きなGoogle Chromeには、「検証」という非常に便利なWEB開発者向けの機能があります。
この機能は他人のサイトや自分のサイトの裏側を見るだけでなく、いろんな使い方があるんです!
今回はわたしが使っている「検証」の小技をまとめました。
Googleクロームの「検証」とは?
では、そもそもGoogle Chromeの「検証」がどういうものかについて説明しますね。
ひとことで言うと、WEBサイトの裏側がどうなっているのかを「検証できる」もの。
CSSの数値を変更することで、たとえば「font-size
を、90%150%に変更したらデザイン的にどうだろう?」を自分のブラウザ上だけで変えられるというわけ。
![コードを変更して検証できるよ](https://yossense.com/images/article/2020/smartphone-view-07.jpg)
上の画像のように、数値を直接いじれます。
こちらのように色もいじれますよ。
![色を変更して検証する](https://yossense.com/images/article/2020/smartphone-view-15.jpg)
あたりまえですが、自分の見ているブラウザ上で一時的に変更になるだけです。
![](https://yossense.com/images/article/yos-01.png)
現物を変更できたら改ざんしまくりですからね(笑)。
そのためブラウザの「更新」をしたり、べつのページに行くと元に戻ります。
「検証」のやり方は超かんたんです。
Google Chromeを使ってWEBサイトを見て、気になるところでマウスの右クリックをして「検証」を選ぶだけ。
![「検証」を選ぶ](https://yossense.com/images/article/2020/smartphone-view-01.jpg)
「検証」は、パソコン版のGoogle Chromeでしかできません。
クロームの「検証」を利用した技あれこれ
ということで本題です。そのGoogle Chromeの「検証」を利用した技をいろいろと紹介しますね。
他サイトのコードを調べる
まずは基本中の基本の方法ですが、誰かのサイトのコードを調べるという方法。
ほら、他人のサイトを見ていてこんなふうに思うこと、ありますよね?
![](https://yossense.com/images/article/yos-05.png)
このデザインいいなぁ! どうやって表示しているんだろう?
そこでGoogle Chromeの「検証」です。
![ほかのサイトのコードを調べる](https://yossense.com/images/article/2020/smartphone-view-09.jpg)
他人のサイトであろうと、HTMLだけでなく、CSSもすべてスケスケになります。
ちなみに上の画像は、アナザーディメンション。わたしとチーさんはコードをお互いにパクり合う仲です(笑)。
自分のサイトのバグを検証する
じつは、Google Chromeの「検証」は他人のサイトを検証するためにあるのではありません。
むしろ、自分のサイトのエラー(バグ)を直すときにその効力が発揮されます!
「float
」がおかしかったり、「text-align
」がおかしかったりするときに、「どの<div>
のCSSコードに原因があるか?」などを検証して、バグを修正できます。
とくに<div>
で入れ子を使いすぎている場合、どの<div>
に原因があるのかわからなくなりますよね。そんなときは大活躍です。
ほんとに、WEB制作しているなら「検証」抜きにはありえません……。
![](https://yossense.com/images/article/yos-03.png)
10数年前に「Firebug(同じ機能のツール)」を知ったときの感動よ……。
デザインを検証する
そして、もう1つ忘れてはいけないのは、自分のサイトのデザインを検証するときです。
たとえば、「見出しの色を青から黄色に変更したらどうだろう?」と思ったり、「文字の大きさをもう少し大きくしてみてはどうだろう?」と思いますよね。
![色を変更して検証する](https://yossense.com/images/article/2020/smartphone-view-15.jpg)
でも、実際にCSSファイルを直してアップロードして、「わぁ! やっぱり元のほうがよかった!」になってCSSファイルをアップロードし直すなんてめんどうです。
それが、Google Chromeの「検証」を使えば、「仮想空間」として自由にいじれます。
![コードを変更して検証できるよ](https://yossense.com/images/article/2020/smartphone-view-07.jpg)
ちなみに、いろんな色を検証したいときは、とりあえずコードをいっぱい書いておいて、チェックボックスの「ON」と「OFF」を切り替えて検証するのがオススメです。
こんな感じですね。
![色の検証](https://yossense.com/images/article/2020/smartphone-view-14.jpg)
この「チェックボックス」が超便利ですよー。
Google Chromeの「検証」でいろいろとコードをいじって、「そのまま本番のCSSファイルに適応させたいな」というときは簡単にコピペできますよ。
やり方は下記です。
「適応されているCSSファイル」をクリック
CSSが表示されているウインドウに「現在のページに適応されているCSSファイル」が表示されています。
ちょうどこちらのように。
![「CSSファイル」が表示されている](https://yossense.com/images/article/2020/smartphone-view-17.jpg)
で、これをクリックしますよ。
本番のCSSファイルにコピペする
すると、現在のGoogle Chrome上でのそのCSSファイルが開きます。
![](https://yossense.com/images/article/yos-01.png)
つまり、色などをいじりまくったCSSファイルですね!
ちょうどこんな画面です。
![いじったCSSをコピペする](https://yossense.com/images/article/2020/smartphone-view-18.jpg)
ここにあるCSSは、Google Chromeの仮想空間で今いじったコードが反映されています。
それをCtrl+A(MacならCommand+A)で全選択して、本番のCSSファイルにコピペしてやればオッケー!
色のコードを取得する
ネット上で使われている色のコードを取得するときにもGoogle Chromeの「検証」は使えます。
![色のコードを取得する](https://yossense.com/images/article/2020/smartphone-view-16.jpg)
上の画像のように、どこかの「色が塗られている要素」で「検証」して、パレットで色を変更してそのコードをコピーするんです。
公式サイトのテーマカラーを正式に取得するときなんか便利ですよ。
ちなみに、ブラウザで見ている画像のなかの色のコードも取得できちゃいます!
![画像内の色コードも取得できる](https://yossense.com/images/article/2020/smartphone-view-19.jpg)
Google Chromeの拡張機能にも色コードを取れるものがありますが、拡張機能はムリして増やさないようにしています。
![](https://yossense.com/images/article/yos-02.png)
以前、色コードを取得する拡張機能に不正があったことがあるので……。
ちなみに、わたしが厳選して使っている拡張機能は下記です。
ほかの端末での表示を確認する
Google Chromeの「検証」は、なんとほかの端末での表示も確認できます。
そのやり方を紹介しますね。
スマホとタブレットのようなアイコンをクリック
表示されたウインドウの左上にある「スマホとタブレットのようなアイコン」をクリックしましょう。
![「スマホとタブレットのようなアイコン」をクリック](https://yossense.com/images/article/2020/smartphone-view-02.jpg)
スマホ表示になりました
スマホ表示になりました……が、毎回表示がおかしくなるので、ブラウザの「更新」をしましょう。
すると表示がピッタリと収まります。
![スマホ表示になる](https://yossense.com/images/article/2020/smartphone-view-04.jpg)
端末のサイズを変える
表示端末のサイズを変えたい場合、表示するサイズを変更できます。
たとえば、「iPad」のサイズとか、「iPad Pro」のサイズとか、小さい「iPhone SE」のサイズとかでも見られます。
下の画像のこの部分をクリックするとメニューが出て変更できますよ。
![端末のサイズも変更可能です](https://yossense.com/images/article/2020/smartphone-view-05.jpg)
端末を横向き表示にも可能
さらに、その端末を横向きにしたときの表示も可能です。
こちらのようなマークがあるので、それをクリックすればオッケーです。
![端末の横向き表示も](https://yossense.com/images/article/2020/smartphone-view-06.jpg)
![](https://yossense.com/images/article/yos-01.png)
ほかのブラウザでの表示もここで見られたら最強なんですけどね!
スクリーンショット撮影のために
サイトでスクリーンショットを表示することもありますよね。
たとえば、なにかのWEBサービスへの登録手順とか。
そういったスクリーンショットを撮るときに個人情報を一時的に違う表示にする場合でも「検証」は使えます。
たとえば、こちらはWordPressで自分のIDの表示を変更しています。
![IDの表示を変更している](https://yossense.com/images/article/2020/smartphone-view-08.jpg)
ほかにもEメールアドレスとか、バレないほうがいい表示は一時的に変更して撮影しましょう。
こんな感じで、名前を「ロベルト本郷」にして撮影したいときもバッチリ!!
![名前を「ロベルト本郷」に](https://yossense.com/images/article/2020/smartphone-view-12.jpg)
行数などを数えるとき
サイト上にあるデータの行数を数えたいときにも「検証」は使えます。
たとえば、こちらのような表の行数、何行あるのか数えるのはけっこう面倒ですよね。
![行数を数えるのはめんどう](https://yossense.com/images/article/2020/smartphone-view-10.jpg)
そこで、「検証」です。やり方は下記をどうぞ。
その要素をコピー
数えたい要素(<table>
とか<ul>
とか)をコピーします。
![要素をコピー](https://yossense.com/images/article/2020/smartphone-view-11.jpg)
ちゃんとクリップボードにコピーされますよ。
メモ帳で数える
それをメモ帳に貼り付けて、「検索」しましょう。
<table>
なら、<tr>
を、<ul>
なら<li>
を検索すればオッケー。
![「検索」する](https://yossense.com/images/article/2020/smartphone-view-13.jpg)
たいていのメモ帳アプリなら、検索した文字列がいくつ存在しているのかを数えてくれます。
![](https://yossense.com/images/article/yos-01.png)
わたしはWindowsならTeraPad、MacならCotEditorを使っていますよ。
さて今回はGoogle Chromeの「検証」の使い方についてまとめました。
こういう通常の使い方だけではない使い方をいろいろと考えるのが楽しいんですよね。
ぜひ使いまくってください。Google Chromeを使っていない人はブラウザを変更するのをオススメです。