開発者ツールの使い方について
前回から大分時間が空いちゃいましたね。年末はあれこれしてると時間が経つのがあっという間ですね！今まで下記のチャートに沿ってHTMLとCSSを勉強してきたわけですが、今日は次のステップである「開発者ツール」についてまとめていきたいと思います。
開発者ツールでできること
Googole Chromeには「開発者ツール」と呼ばれるものがあります。chromeをブラウザ用途だけて使っている場合はあまり馴染みがない言葉ですね！私もそうです。そんなchromeの開発者ツールとやらを使うと何ができるかというと
- ページのHTML（ソース）が見れる
- ページのCSS設定がどうなっているかが見れる
- CSSの設定やソースをその場で変更し、変更結果ページがどう表示されるのかをその場ですぐ確認できる
- コピーができるため、変更後のソースをそのままコピーした使ったり、ソースを参考にしながらサイト作りができる
といった使い方ができるようです！他にもJavaの設定変更や追加、ネットワークがどうなってるか、etcetc...とできることがいっぱいあるようなのですが、私のような初心者は一先ずHTMLとCSSを簡単に確認でき、変更検証出来て、コピーも簡単！って覚えておけばよさそうですね。
開発者ツールの出し方
ツールの出し方はいたって簡単で、chromeで気になるページを開き、ページ内で右クリック
ページのソースだけ見たい場合は「ページのソースを表示」、ソース含めてCSSやそのほかの設定などもろもろ確認したい場合は「検証」をクリックします。
すると見慣れないコードだらけのウィンドウがchrome内に開きますが、ようはそれが「開発者ツール」と呼ばれるもののようです。
開発者ツールの使い方
このままでは何が何だかさっぱりなので、ツールの見方と主な使い方をみていきます。まずはツールを自分の見やすい配置にします。
右上にある点々をクリックすると、開発者ツールを別ウィンドウでだすか、ページの右側に出すか、左側に出すかなどが選べます。ここは好みで選べばいいんじゃないかなと思いますが、動画では別窓がおすすめされていたので私はとりあえずその設定しておきました。
次にタブがいっぱいで意味がわからないので、主要タブだけでも把握していきます。
- ①Elements … ここにでるのがページのHTML（ソース）です。たまにこじんまりしてることがありますが、 内容が格納されているだけですので、▼をクリックして展開すると中身が全部見れるようになります。
- ②Style … ここがCSSの記述になります。各セレクタ名の右にある文はCSSのファイル名と記載されている行になります。
- ③要素の選択 … ページのここの部分気になるな。どうやって書かれてるんだろう？って思ったら③の選択ツールをクリックしてから、ページ内の気になる場所をクリックすると、開発者ツールでその部分をハイライトしてくれます。いちいちどこに書かれているか自分で探す手間が省ける便利ツール。
- ④画面検証 … パソコンでは今こう見えてるけど、別のデバイスではどう見えてるんだろう？って確認・検証したい場合にクリックするところ。
私のような初心者さんが使う場所は主にこの4つです。このページのここはどんなCSSなんだろう？って思ったら検証ツール開いて、クリックして、開発ツールでふむふむなるほど！ってやればOKみたいです。
各ツールの補足。
要素の選択についてのですが、例えば画面の「ああああ」って場所を選択した場合。HTML画面ではその場所がハイライトされ、Styleタブでは「ここのCSSはこう書かれてるよ！」と教えてくれます。
セレクタ右側に書いてある「style.css」が私がつけた外部CSSの「フィアル名」で、4というのはその外部CSSファイルの4行目に書かれているよ！と丁寧に教えてくれます。自分で修正する場合、どこだっけなーって探さなくて済むので楽ですね！その下の「user agent stylesheet」ですが、これはブラウザごとに定義されたデフォルトのCSS設定のこと。つまり私が用意したCSSではないことを示しています。
画面の検証方法
④の画面検証ですが、ボタンを押すとページの表示が少し切り替わります。上部にある▼を押すと、「ipadで見た場合」「iphone 5で見た場合」「iphone Xで見た場合」など、他デバイスで見た場合そのページがどう見えるか？？という検証ができるようになっています。一番右にあるボタンを押せば画面を回転させた場合の表示も確認することができます。
開発者ツールでできること
さて、主なツールの場所などを確認できたので次はツールの大まかな使い方を見ていきます。先ほども使った画像で見ていきましょう。
まず気になる場所の確認方法は前述の通りですが、更に詳しく見ていきます。
まず今回「h1」セレクタには背景色に青、文字色黒、テキストに白い影をつけているのがわかりますね。開発者ツールのメリットである「CSSを変更した場合どうなるか？」を見てみたい場合。
例えば青色を変えたい場合、青い■をクリックするだけでカラーチャートが現れ、好きな色をクリックするだけで簡単にその色に変えることができます。開発者ツール内の記載を書き換えて食えるだけでなく、それを即時にページにも反映してくれます。文字色、影色も同様に変えることができます。要は色のついた■があれば、そこをクリックするだけで簡単に別色に変えた場合の表示を確認することができるわけですね！
ではここに新しく何かプロパティを追加したい場合は？それも簡単で、追加したいセレクタ内で適当にクリックするだけで新しい行を追加してくれます。あとはそこにプロパティと値をいれてあげるだけで画面に反映させてくれます。
プロパティを消したい場合はプロパティ左側にあるチェックボックスのチェックを外すだけで簡単に非表示することもできます。
勿論これらは全て一時的なものなので、元の状態に戻したい場合はページをリロードするだけでOKです！リロードする際は、変更後の設定を保存する必要がある場合はコピペで保存することを忘れずにしましょう。
CSSに黄色い三角の看板マークが付いている場合
プロパティの左側に黄色い三角に！が描かれたものが表示されている場合、その記述がエラーを起こしていることになります。綴りが違っていたり、値が間違っていたりしている可能性あり。黄色い三角マークが出ている場合そのCSSはうまく適応されていないことになりますので、見付けたら必ず修正しておきましょう。
CSSの記述に打ち消し線がある場合
CSSの記述を見ていると、プロパティと値の部分に打ち消し線がはいっていることがあります。これは下の方に書かれているCSSが適応されているため、上の方に書かれてるこの部分のCSSは適応されてないよ！という意味です。CSSは「より下に書いた記述のほうが優先される」という性質があるのでそのせいですね。
これもCSSがうまく適応されていないサインですが、エラーというわけではないので直すかは人によると思います。外部CSSをいくつも参照してると被ったりページによっては設定が重複してしまうこともあるかもしれませんしね。
開発者ツールを使えば、他サイトのデザインなどの確認だけでなく、編集と確認を同時並行できることがわかりました。他にもいろいろできるみたいですが全部一気に覚えるのはきつそうなので、一先ず今日まとめたことだけでも覚えておこうかと思います！詳細な使い方などは参照サイトを見ていただいたほうが分かりやすいのでそちらも是非どうぞ～！
