よーた（@yotaszk）です。WordPressなどを使っていると、テーマファイル（CSS、PHPなど）をいじることも多くなると思います。恥ずかしながら僕もブログを始めたときは「CSSってなに？」っていう状態でした。
やっていればそのうち体が覚えるのですが、始めたては大変で「Google Chrome デベロッパーツール」に大変お世話になりました。本当にこれがなかったら今、CSSとか絶対書けてなかったですから。
僕も未だに完全に使いこなせていませんが、この記事では初心者向けにGoogle Chromeデベロッパーツールの最低限知っておきたい機能と使い方を紹介します。準備はOK？？ではいってみよう！
導入編
デベロッパーツールの開き方
デベロッパーツールの開き方から。Macであればcommand＋option＋Iのショートカットキーも覚えておくとスマートですが、まとめるとこんな感じ。
- どこかてテキトーなウェブページを開く
- ウェブページ上で右クリックをしてメニューを開く
- メニューの一番下にある「検証」をクリック
スクリーンショートカットのようなものが下にでてくれば成功！（初期設定では右側かも）。これが「デベロッパーツール」です。
デベロッパーツールのエリア
デベロッパーツールは主に2つのエリアかあ成り立っていて、左側（オレンジ枠）の方に「HTML」、右側（ブルー枠）の方に「CSS」が見れる形になっています。
- オレンジ枠︰HTMLが表示されるエリア。表示が変な人は「Elements」になっているか確認を
- ブルー枠︰CSSが表示されるエリア︰同じく「Styles」になっているかか確認を
実用編
ワンタッチで編集したいところまで移動
導入編が終わったので早速実用編に。それぞれ変更したい場所までワンタッチで移動する方法です。まず上の画像の通り左端にある矢印が突き抜けたようなボタンをクリックしてみてください。
そのままマウスを動かして変更したい場所まで移動し、ワンクリックすると、HTML・CSSのエリアともに選択したところの表示に変わります。
既存のCSSを書き換えてみる
僕が例として、このブログのトップページでやってみた部分はロゴです。HTML・CSSのエリアともにロゴになっているので、右側のCSSエリアをいじって、ロゴの文字サイズ（font-size:28px; → font-size:100px;）を巨大にします。上の画像みたいになりました。
今回は「font-size」が元々指定してあったのでいいですが、もしも新たにプロパティ（例えばbackground-colorとか）を追加したい場合はオレンジ枠のどこかをクリックすれば追加できます。
完全に新しいCSSを追加する
上記の場合、HTMLのclassやidについてCSSが指定されていますが、指定されていなければ表示されません。CSSを書くために編集したいところまで移動して、新たにルールを「＋」ボタンから作成してやる必要があります。それが終わればさっきと同じ。
プロパティを一時的に無効にしてみる
CSSをいじってると、これ追加したけどいらないなと思うこともでてきます。そんなときはプロパティの横にあるチェックボックスのチェックを外すことで一時的に無効化できます。もし、また使いたければチェックすれば有効化できます。
スマホ版の表示に切り替える
「モバイルファースト」と叫ばれる時代なので、スマホ表示に切り替えたいときも当然でてきます。そのときにはスマホのボタン（オレンジ枠）をクリックしてからページをリロードすれば表示が切り替わります。
上のメニューでは、ピンク枠で表示したい機種の変更やサイズなども確認できるので「レスポンシブデザイン」のサイトではめちゃめちゃ役立ちます。
まとめ
ということで、Google Chromeデベロッパーツールの最低限知っておきたい機能と使い方をまとめした。いつか書こうとずっと思ったいたのですが書くタイミングがなく、たまたま見かけた部長ナビ（＠nabi_1080）さんのツイートがキッカケでバーっと書いちゃいました。
下手な記事ですが、こんな感じで大丈夫そうですかね？部長さん（笑）
Chromeのデベロッパーツールを使って、ブログのphp/cssファイルを変えずにどう変わるか試すやり方を誰か初心者向けに分かりやすく解説してくれないかなぁ・・・。全然わからないから、毎回その度にForkLiftでファイル変えて、少しずつアップしながら見てます。ググったけど・・・
— 部長ナビ (@nabi_1080) 2016年9月11日
【追記】部長さんにブログで紹介して頂きました。「高校生がこの記事を書けるのかって思いました」って記事内で褒めてくださってますが、僕からすると「教員やりながらモリモリ更新してるのすごいな」と思いながらいつも拝見しています。
ぜひぜひ参考までに。
▼あわわせて読みたい
