今回は、WEB制作会社やプログラマー、コーダーなどWEB制作に関わる人らが必ず使っているウェブブラウザのデベロッパーツールの基礎的な使い方を簡単に紹介します。
またデベロッパーツールはHTMLやCSSの勉強にも非常に役立つツールなので、プログラミング初心者の方や勉強中の方は、必ず今後の役に立っていきますので使い方を覚えておくと良いでしょう。
デベロッパーツールの開き方
デベロッパーツールの開き方は、Google ChromeやSafariなどのWEBブラウザアプリでWEBを開き、右クリックをして下記の『検証（要素の詳細を表示）』をクリックすると、プログラミングコードの様なもの（HTML文書とCSS）が表示されます。
これがデベロッパーツールです。
WEBブラウザで『ページのソースを表示』というのもあり、それを開くとHTML文書がズラっと出てきます。一見似ていますがこれはページのソースのみを一括で確認するためのページですのでデベロッパーツールとはまた違います。
デベロッパーツールの見方
デベロッパーツールではそのページのHTML文書、要素ごとのstyle（CSS）を全て見ることができ、また簡易的に編集をすることが出来ます。さらには『console』で読み込み時のエラー、『source』でファイルの参照元などもこのツールで全て確認することが出来ます。
下記の中央部分が『HTML文書』で右側が『CSS』です。また選択されている要素のmarginやpaddingなどの『値』も見ることが出来ます。
またデベロッパーツールの上部のコントロールパネルの一番左側の矢印マークは『選択モード』と言い、マウスオーバーした部分のHTML文書をハイライトしてくれます。その横のスマホマークではスマホやタブレットでの表示が確認でき、そのモードのままツールを使うことが出来ます。
デベロッパーツールの使い方
次にデベロッパーツールの使い方を簡単に紹介いたします。
まずデベロッパーツールでは、現在のページのHTMLコードとCSSを弄ることが出来ます。いじったコードはページを更新するまで一時的に画面上に反映されるので好きな様に表示を変えることが出来ます。
ツールでは、下記の様に先程まで『portfolio』となっていた文書を書き換えることが可能です。
また文字列のみならず、下記の『Edit as HTML』で要素内を丸々編集できるので、その要素のレイアウトすらも変えることが出来ます。
下記では『Edit as HTML』で元々tdタグだった要素をh2タグに変更したのでh2のスタイルが適応され、表示が変更されました。
そして、右側にあるパネルはstyle（CSS）の指定です。このCSSも基本的には全て書き換えることが可能です。
下記では、元々の背景カラーは『Backround-colour:#fff（白）』で、中央寄せ『text-again:center』でしたが、背景を『#111（黒）』に変え『text-again:left（左寄せ）』に書き換えた結果です。
またCSSプロパティ（赤文字部分）の左側にあるチェックボックスを外すと、その指示を無くすことが出来ます。このon,offで簡単にスタイルの違いを確認できます。
さらに、marginやwidthなどで値が指定されている場合、その値をクリックしてPCの十字キーで値を操作できます。
また新たなプロパティの追加も可能です。下記では『border-radius』のプロパティを追加して写真を丸くスタイルを変更した表示です。
デベロッパーツールでは、この様に要素ごとにHTMLを改修したり、CSSの指定を変更したりすることができるので、実務では試験的な書き換えをして異常が無いか確認してみるといった使い方がほとんどです。
他にもエラー検証に役立つものや、タイムツリーなど様々な機能があります。ここで全ては説明できませんが気になる方は下記の様なデベロッパーツールの公式ドキュメントを見つけて調べてみてください。
デベロッパーツールを使っての勉強
最後に、デベロッパーツールで勉強する方法を紹介いたします。
まずHTMLやCSSをあまり触ったことの無い初心者さんはこのデベロッパーツールで誰かのサイトのコードを色々といじってみると良いでしょう。デベロッパーツールはリアルタイムで表示が変わるので、HTMLとCSSがどの様な仕組みでどの様に変わっていくのかが非常に分かり易くおすすめでです。
次に、デベロッパーツールでHTMLとCSSを書き換えて異常がなかった場合、そのコードを丸々コピーしときましょう。後に自身の静的サイトでも作ってみてそのコードを使ってみましょう。そこでまた異常が出たら、また別の要素をデベロッパーツールで編集して持ってきて利用してみましょう。
この様に他サイトを自分なりに改良し、自分のサイトに持ってきて、それをノウハウにしていきます。この勉強方法、コーティング業界ではよく使われているやり方なので非常に勉強になると思います。
またデベロッパーツールでの勉強も含めて初心者がHTMLを独学で学ぶ方法についても紹介していますので合わせてどうぞ
以上が「デベロッパーツールの基礎的な使い方【HTML/CSS編】」でした。
今回紹介したデベロッパーツールは本当にあらゆる技術を学べる最高ツールだと思います。
将来、コーダーやプログラマーなどWEB制作に関わった仕事をしたいと思っている方は勉強のため是非活用してみて下さい。
