2019年2月3日ツイートシェアB!はてブポケットChromeのデベロッパーツールの使い方を紹介します。現役コーダーのわたしが普段から確認しているポイントに絞って紹介していきますので、同じような職種の方は特に参考にしていただけると嬉しいです。デベロッパーツールはあくまでも表示されているブラウザ上でシミュレーション的に動くものです。変更を加えたところで実際のファイルには影響ないのでご安心ください。おわりデベロッパーツールの開き方デベロッパーツールの開き方です。5パターンほどありますが、自分が使いやすいものを選べばいいかと思います。ショートカットキーに関してはWindowsのキーですみません・・・。Macの方はCommandやOptionなどで置き換えてください。Iをよく使っています。以下のどちらかを使うのが一般的な使い方かと思います。F12の方が多くのブラウザで開発ツールを開くという挙動をするので、覚えておくといいかもしれません。IF12デベロッパーツールを開くだけでなく、閉じるときも上記のキーで対応できます。Cこれで開くと、右上の矢印アイコン()が選択された状態になります。Gif動画デベロッパーツールをメニューから開くあまり使わないと思いますが、メニューから開くことも可能です。基本的な操作方法デベロッパーツールを開いたら、「Elements」タブを開いてください。メインで使うタブになります。右上の矢印アイコン()をクリックして確認したい要素をブラウザの画面から選びます。Gif動画このようにして確認した要素をクリックして選択してください。選択した要素に対して次で紹介するような値の追加や修正を加えて表示を確認していくといった使い方になります。HTMLは左側、CSSは右側で表示されます。ちなみにデベロッパーツールの表示場所は、右上の3点バー(?)みたいなアイコンから変更できます。ノートパソコンの自分は下部の表示がしっくりきますが、モニターの大きさによって表示場所を変更すると見やすくなるかもしれません。リンクデベロッパーツールでやりたいことデベロッパーツールでどういったことをやりたいかについて紹介します。わたしは大雑把にコーディングしたらデベロッパーツール上で微調整を加えて、確定した状態でコードに反映するといった流れで作っています。要素に対してどういうCSSが当たっているか?要素に対してどういうCSSが確認する頻度は高いです。他人のサイトの現状を把握する必要のあるWebサイトの修正案件では頻繁に見ていました。「見出しを変更したい」であったり、「ボタンのデザインを変えたい」みたいな案件です。HTMLで確認したい要素を選択すると、右側の「Styles」のタブに当たっているCSSが表示されます。#e44d26;が適応されているんだな」ということが分かるわけです。されているCSSが分かったら好きな値に変更したり、新しくCSSプロパティを追加したり、削除したり、といったことが可能です。Gif動画プロパティを新たに追加するには何もない空白の箇所をマウスでクリックすることで追加できるようになります。Gif動画プロパティの適応を外すには左側のチェックを外すだけです。要素の大きさ余白の確認CSSの確認用のタブを「Computed」にすると、選択されている要素の高さ、横幅、padding、border、marginを視覚的に確認することができます。横幅・・・212.219px高さ・・・100pxpadding・・・32px(上下左右)border・・・0(上下左右)margin・・・0(上下左右)ということが視覚的に分かります。一般的な要素だけでなく、疑似要素や擬似クラスも確認したくなると思います。それぞれ、ちょっと分かりにくいので場所だけ覚えておくといいかもしれません。疑似要素::beforeや::afterは、HTML側で選択できるようになっています。::beforeがある場合は開きタグの直後、::afterがある場合は閉じタグの直前にあります。擬似クラス主には:hoverを確認するために使っています。CSS側の「:hov」タブを開いて:hoverにチェック入れると、設定されている要素であれば当たっているCSSが表示されます。Gif動画HTMLの文字の変更、追加HTML内の文字の増減によって表示が崩れないか、、みたいな事も確認したりします。すべての要素で確認するわけではないですが、文字の増減が起こりそうな箇所は見ておくといいかもしれません。Gif動画テキスト部分をダブルクリックすると簡単に文字を掴むことができます。HTMLタグの変更HTMLタグも簡単に変更できます。変更したいタグの部分をダブルクリックして片方だけ変更すれば対になっている方も自動で変更されます。Gif動画h3とh4を変更しても要素に引っ張られない作りになっていないか、などの確認。HTMLを丸ごと修正HTMLタグやテキストだけでなく、1つのHTMLで作られた要素を丸ごと修正したい場合です。HTML」で修正することができます。選択したHTML要素を編集できるテキストボックスが表示されるので、ここにゴリゴリHTMLを書いていきましょう。チェック機能として使うデベロッパーツールHTMLやCSSの確認や修正のみならず、サイトをチェック(テスト)する目的にも使えます。「Console」タブには、JavaScriptで何かしらの出力や、エラーがあった時のメッセージが表示されます。エラーメッセージがあったら、確認して修正するようにしましょう。JavaScriptはエラー以降の処理が動かなくなるので、サイト上で何かしらの不具合が起こる可能性が高いです・・・。「Network」タブでは、どういう外部ファイルが読み込まれていて、それぞれの読み込みにどれくらいの時間がかかっているか、また、読み込めているかどうか(404でないかどうか)の確認もできます。確実に確認すべきは、404で読み込めていないファイルがないかどうかという点ですね。404のファイルがあれば確認して、必要に応じて削除するなりファイルをアップし直すなりしないといけません。シミュレーションでレスポンシブ確認デベロッパーツールでレスポンシブの確認ができます。ウインドウ幅を自在に変更できるといったものです。ここでiPhone5の画面幅320pxで表示崩れがないか、iPadの画面幅768pxで表示崩れがないか、みたいなことを確認するわけですね。左上にあるスマホのアイコン()をクリックすることで開くことができます。ショートカットキーでも開くことができます。モバイルの「M」って覚えると頭に定着しやすいかもしれません。M左上から任意のデバイスを選択することで幅を変えることができます。個人的に確認しておくべきだと思う幅は、以下のような感じです。シミュレーションを仕事で使わない人は無視してください...)iPhone5(320px)iPhone6(375px)iPad(768px)PC(デザインカンプの幅)iPadとPCのインナー幅の間(一番崩れやすい...)ちなみに「Edit...」から任意の幅も登録できたりする親切設計です。@haniwa008Chromeのデベロッパーツールの使い方でした!デベロッパーツールがなければコーディングの仕事ができないってくらい頻繁に使うツールです。他人のサイトの現状の把握にも使えるし、自分のサイトのコーディングチェックにも使えます。デベロッパーツールの一番の学習方法は実際に触ってみることです。この記事を読みながら実際にご自身のブラウザで動作を確認していただけると嬉しく思います。リンクこのページが役に立ったらいいね!お願いします運営の励みになります...。同じカテゴリーの一覧を見る次の記事ファビコンのためのHTMLタグとicoファイルを作成できるサイト前の記事WordPress案件でクライアントから必要な2つの情報はにわまんWordPressが好きなフリーのWebコーダー。300件以上のWordPressカスタマイズを対応してきました。