デベロッパー ツール 使い方。 新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方

【初心者必見】まずはこれだけ!デベロッパーツールの使い方【chrome】

デベロッパー ツール 使い方

ホームページの作成・管理に役に立つ「chromeデベロッパーツールの使い方」をご紹介します。 Google Chrome デベロッパーツールは、Google の提供するブラウザ「Google Chrome」で利用でき、Webサイト制作時に役立つ豊富な機能が搭載されています。 Webサイトの要素に適用されている HTMLやCSS を確認したり、JavaScript のエラーを確認したりできます。 Webサイト管理時には欠かせないものになりつつあります。 chromeデベロッパーツールは、Google Chromeに搭載されています。 以下のような様々なことを行うことができます。 HTML・CSSの確認と編集• ネットワークの監視• JavaScriptのデバッグ• JavaScriptのパフォーマンスチェック• Cookie, localStorageの確認・編集• レンダリングを含めたパフォーマンスチェック• YSlowのようなパフォーマンスチェックツール• JavaScriptのコマンドラインツール.

次の

Google Chromeデベロッパーツールとは?使い方や簡易的な解析テクニックについてご紹介します!

デベロッパー ツール 使い方

HTMLやCSS、JavaScriptを使ってWeb制作・開発をするときに、なくてはならないのが デベロッパー(検証)ツール。 実際に自分が書いたCSSがどういう状態で適用されているのかを確認するときなどに非常に便利で、もはや Web制作・開発にはなくてはならないツールになっています。 今回、Arrownでも、 Google Chromeのデベロッパーツールについて、基本的かつ有効な使い方をまとめてみたいと思います! ちなみに、FirefoxやSafariでも同様のツールがありますが、Chromeのデベロッパーツールが非常にかしこく優秀なので、今回は Google Chromeのデベロッパーツールに絞って、話を進めていきたいと思います! 目次• Google Chromeデベロッパーツールで出来ること Google Chromeデベロッパーツールでは、 閲覧している・制作や開発をしているWebサイトのHTMLやCSSをのぞきみることができます。 デベロッパーツールを開いてみると色々な情報を確認することができるので、ぜひ一度確認してみてくださいね! HTMLやCSSだけでなく、細かい情報をいろいろ見ることもできます。 Google Chromeデベロッパーツールの基本的な画面構成 まずはGoogle Chromeデベロッパーツールの基本的な画面構成を説明していきます! HTMLが表示されるエリア デベロッパーツールを開いた左側は、HTMLを表示するエリアになっています。 今表示されているWebサイトのHTMLを、ここで全て確認することができるようになっています。 デベロッパーツール内で 色が反転しているHTMLの箇所に該当する部分が、ブラウザ上で色が反転されて表示されるようになります。 少し文字が小さいかもしれませんが、上記の画像では、Yahoo Japanのページのh1タグは、Google Chrome上で青く表示されている部分が範囲になっている、ということを意味しています。 CSSが表示されるエリア そして、今選択されているHTMLに適用されているCSSを確認できるのが、上記画像でいう右側のエリアです。 1つのHTMLに対して、複数箇所からCSSが適用されているケースもありますので、その場合は 優先順位の高いCSSが上に書かれるようになります。 ブラウザ上に表示される色つきのボックス デベロッパーツールを使ってHTMLを指定すると、 指定したHTML箇所に該当する部分が、ブラウザ上で色つきのボックスとなって表示されます。 そのボックスの意味・見方などをここでは説明します! 見方としてはシンプルで、選択したHTML箇所のボックスの 青の部分がwidthとheight、緑の部分がpadding、赤の部分がmarginに該当します。 それぞれが具体的にどれくらいのmarginなのか、paddingなのか、細かい数値レベルで確認したい場合は、CSSを確認出来るエリアの中にある Computedタブをクリックすると出てくるボックスのところに書いてあります! Google Chromeのデベロッパーツールで出来ること(HTML編) では、具体的にGoogle Chromeのデベロッパーツールで出来ることを、今回はHTMLとCSSに絞って説明していきます! HTMLそのものや属性値・テキストの中身を編集可能! Google Chromeのデベロッパーツールを使うと、 HTMLやテキストの中身を編集することができます。 たとえば、たまたま僕がYahoo JapanのWebサイトを開いていたら、上の方にある「サッカー日本代表 本田圭佑のユニなど出品 」というリンクつきテキストがあったので、このテキストを編集してみることにしました。 デベロッパーツールの該当箇所を選択した上で、 Windowsの方であれば「F2キー」、Macの方であれば「fnキー+F2キー」を押していただくと、選択しているHTMLをテキスト含めてまるっと編集出来るようになります。 ちなみに、aタグでいうhrefだったり、imgタグでいうsrcだったり、あとはidやclassだったり、HTMLタグにひょこっとくっついている各値を「 属性」というのですが、デベロッパーツールで 色が反転されている・選択されているHTMLがある状態でEnterキーを押すと、属性値のみを編集できる状態になります! 特にclassなどは、JavaScriptも絡んでくると、classを足したり消したりして検証することもよくあるので、そんな時はすごく便利ですね! formタグなど、基本的に属性値が複数あるような場合は、 Enterキーを押して属性編集モードにした上でTabキーを押していくと、編集対象の属性を移動することが可能です。 要素の検索 あらかじめデベロッパーツールで編集したい要素が決まっている場合など、対象要素を直接編集することができます。 デベロッパーツールの elementsタブが開いた状態でCtr(Macの方は Command)+Fキーを押すと、デベロッパーツールの下の方に検索窓が出てきます。 そこでタグ名だったり、class名だったりで検索をかけると、該当のHTMLタグの箇所が、一発でデベロッパーツール上に表示される形になります! 使いようによっては、非常に便利な機能です! ちなみに上記の画像の例では、h1タグを検索して表示した事例をgifアニメにしています! 要素の展開・たたむ・非表示 複雑な入れ子構造になっているHTMLの場合は、 altキーを押しながら(Windowsの場合はCtrキー同時押しも必要)親要素をクリックすることで、子要素を一気に全て展開することができます。 開くも閉じるも、altを押しながらクリックすると便利だよと覚えておきましょう! また、要素上でhキーを押すと、当該HTML要素を非表示にすることもできます。 スマホコーディングをする時など、これ意外と使えます! Google Chromeのデベロッパーツールで出来ること(CSS編) 続いては、Google Chromeのデベロッパーツールで出来ること・CSS編です! CSSの値を確認・編集・解除 特定のHTMLに対して適用されているCSSを確認出来る場所については上述しましたが、適用されているCSSを試しに解除したり、値を変えてみたり、新しいCSSを自分で追加したりすることができます。 CSSの値確認・追加・編集・解除など、一通り行うことが可能です。 HTML・CSSの範疇でデベロッパーツールを使う目的の一番の理由は、CSSの確認・編集になるのではないかと思います! CSSで相対的な単位を指定した時に実際にそれが何pxとして適用されているのかを確認する 特にfont-sizeなどをCSSで指定する時、最近では単位を相対的なもので指定することが多くなっています。 そんな時の確認方法をご紹介します! CSSを確認できるエリアのところに「 computed」というタブがあるので、computedタブをクリックします。 その中で、 CSSで相対的な単位を使用した箇所が実際に何pxで適用されているのかを確認することができます! CSSが適用される優先順位を確認 HTMLやCSSを書いていると、 同じHTMLに対して複数箇所からCSSが適用されるということは日常茶飯事のようにあります。 そんな時は、CSS適用の優先順位に従って、CSSが適用されるようになります。 CSSの適用優先順位が高いものほど、CSSパネルでは上に記述されるようになっています。 CSSファイルや画像のリンク切れを確認する CSSファイルや画像のリンク切れもチェックすることができます。 デベロッパーツールの Consoleタブを開くと、もし画像やCSSファイル・JavaScriptファイルでリンク切れを起こしている場合は、赤い警告メッセージが表示されています。 「あれ?CSSがうまく読み込めていない」「画像が表示されていない」ということがあれば、ここも一度チェックしてみましょう! スマートフォンやiPadなどのタブレットでページを表示した時にどういう見栄えになるのかを確認する 最近では、Webサイトの制作・開発においては、スマートフォンやiPadなどのタブレットでの表示もきちんと確認することは必須事項です。 ただ、スマートフォンやタブレットの機種は無数のようにあるので、全機種で実機確認したくても仕切れないのが正直なところですよね。 そんな時に、デベロッパーツールの機能を使うと、擬似的にではありますが、スマートフォンやタブレットでどういう風に表示されるのかを確認することができます! Chromeのモバイルプレビュー機能とここでは呼びますが、デベロッパーツールを選択した状態で、「 Ctr(Macの場合はCommand)+Shift+M」キーを押すると、モバイルプレビュー機能を呼び出し、 スマホなどでどういう見た目になるのか表示させることができます。 ちなみにYahooなどのように、スマホサイトとPCサイトのURLが異なっている場合は、 モバイルプレビュー機能を使った上で再度ページを読み込みし直しすることで、スマホでWebサイトを閲覧した時の見た目を表示することができるようになります! モバイルプレビュー機能画面では、具体的にどのスマホやタブレットの機種で閲覧した時の状態を再現するのか、選択可能です。 縦向き・横向きのときの見た目を選択することもできます。 モバイルプレビュー機能で使用するスマホやタブレットの機種は、追加・変更・削除することが可能です。 デベロッパーツールをひらいた状態でF1キー(Macの方はF1+Fnキー)を押していただくと、Setting(設定)画面を表示することができるので、ここで左サイドバーにある「Device」という項目を選ぶと、モバイルプレビュー機能を追加・選択・削除することができます。

次の

Web開発の時に使うと便利なChromeやFirefoxのデベロッパーツールの使い方

デベロッパー ツール 使い方

起動方法• windows:キーボードの「F12」• 3945. 130をベースに記載しています。 バージョンが違う場合、若干の操作・見た目が違う可能性がありますのでご注意ください。 上記の方法で起動できない場合は、• ページ上で右クリック• 「検証」をクリック でも起動できます。 表示位置の変更 デベロッパーツールの表示位置が気に入らないときは変更しましょう。 デベロッパーツールの右上にあるメニューボタンを押す• 表示位置の変更ボタンで好きな表示位置を選ぶ HTMLを確認する まずhtmlコーディングにおいてよく使うのは、 htmlの要素の確認です。 使いどころ• 表示崩れの修正• htmlを仮に反映する• 他サイトのソースを覗き見 使い方が分かれば使いどころについても理解できますよ! では使い方を説明していきます。 画面内の要素からhtmlを確認 画面内の要素から、該当するhtmlの確認をする方法です。 デベロッパーツールの左上にある【矢印マーク】を押す• 画面内の調べたい要素をクリック• 該当するhtmlがデベロッパーツールで青くハイライトされる 画面内の要素にマウスカーソルを乗せるだけでソースもハイライトされますが、クリックすることで選択した個所を固定できます。 固定することで、該当箇所のhtmlソースを詳しく確認できますよ。 ソース内の矢印を押すとソースが展開されます。 htmlソースから画面内の要素を確認 逆にhtmlソース側からページ内の要素をハイライトすることもできます。 ソース内で調べたい箇所をクリック• 画面内の該当要素がハイライトされる htmlを仮に書き換える デベロッパーツール上でhtmlの書き換えもできます。 書き換えた内容は画面にも反映されます。 手元のhtmlファイルの修正・更新をしなくても、編集した結果がサクッと確認できて便利です。 デベロッパーツール上で編集した内容は、ページを更新すると消えてしまいます。 必要ならコピペしてソースを保存しておきましょう! 一部だけ書き換え 一部だけ書き換えたい場合にはこの方法を使います。 内容を書き換え、Enterを押します• 画面に反映されました! 広範囲な書き換え 要素の挿入など、広範囲に書き換える場合の方法です。 書き換えたい部分の上で右クリック• "Edit as HTML"をクリック• 内容を書き換え、デベロッパーツール上のどこかをクリック(htmlの挿入・削除もできます)• 画面に反映されました! CSSを確認する 次にCSSの見方です! 使いどころ cssは要素にマウスを置くだけではなく、画面内の要素、もしくはhtmlソースをクリックしないと表示されません。 デベロッパーツールの左上にある【矢印マーク】を押す• 画面内の調べたい要素をクリック• htmlソース内で調べたい箇所をクリック• 該当するcssがデベロッパーツールに表示される css部分の見方• 設定されているCSSの内容• どのCSSファイルの何行目に書かれているか 例)「style. css」というcssファイルの「17行目」 打ち消し線 デベロッパーツール上でCSSに打ち消し線が引かれていることがあります。 打ち消し線が引かれているCSSは適用されていません。 打ち消し線には2種類あります。 これはcssがエラーになっていることを示します。 この場合はpaddingではなく、スペルミスでpadingとなっていますね。 このようなcssのタグは存在しないので、エラーになっています。 警告マークが出ていたら、まずスペルミスがないか確認してみましょう! cssを仮に書き換える デベロッパーツール上でcssの書き換えもできます。 htmlと同じく、書き換えた内容は画面にも反映されます。 手元のcssファイルの修正・更新をしなくても、編集した結果がサクッと確認できて便利です。 デベロッパーツール上で編集した内容は、ページを更新すると消えてしまいます。 必要ならコピペしてソースを保存しておきましょう! 一部だけ書き換え 一部だけ書き換えたい場合にはこの方法を使います。 例として背景を茶色から青に変えてみます。 内容を書き換え、画面の上を押します• カラーコードなどの前に表示されている【色の四角】を押す• カラーピッカーが立ち上がります カラーピッカーを閉じたいときは、"Esc"キーを押すか、デベロッパーツールのどこかを押すと閉じます。 画面上から色を吸い取れます。 cssの追加 今設定されていないcssでも追加をすることができます。 同じclass名、タグが使われている箇所すべてに反映されます。 cssを追加したい部分の「余白」を押す• 入力できるフォームが表示される• (同じタグやclassが他の箇所に使われていようと、選択していないところには反映されません)• 追加した要素を画面上orHTMLから選択(クリック)• "element. 入力できるフォームが表示される• 追加したい内容を記述 cssの非適用 cssの上にカーソルを持っていくとチェックボックスが現れます。 このチェックボックスのオン・オフによって、cssの効果を適用・非適用できます。 下記の画像で、backgroundのチェックを外してみます。 左側の画面の背景色が茶色から白に変わりましたね。 backgroundのチェックを外したことで、背景色が非適用となりました。 デベロッパーツールを使えば、リアルタイムで表示を確認しながら、1px単位の調整ができます。 数値の調整• デベロッパーツールのcss部分を下にスクロールしていくと、下の画像のようなオレンジや緑の四角が現れます。 これを使えば、以下の項目が簡単に調べられます。 要素のサイズ• borderの太さ• paddingのサイズ• marginのサイズ 使い方は簡単。 デベロッパーツールの左上にある【矢印マーク】を押す• 画面内の調べたい要素をクリック• オレンジや緑のボックスまでcssをスクロール• ボックス上にmarginなどの数値が表示されています! 要素にマウスを重ねるだけでも、要素の大きさやmarginなどを調べることができます。 レスポンシブwebデザインに対応したサイトの制作では、デベロッパーツールをスマートフォンやタブレット表示にして確認しながら作ります。 デベロッパーツール左上の【スマホ・タブレットマーク】を押す• 切り替わりました! もう一度、【スマホ・タブレットマーク】を押すと解除されます。 表示されているサイズが小さいとき 倍率を確認しましょう。 好きなサイズを指定する• 端末リストの一番上にある"Responsive"を選択• 任意の数字を入れます• つまみでも調整できます 端末を新規登録• 端末リストの下の方にある"Edit"を選択• 機種リストが開きます• 今回説明した機能は本当によく使うので、ぜひ早いうちから慣れておきましょう! 他の人が作ったサイトでもデベロッパーツールを使えば中身を見たり、仮に編集したりすることができます。 他のサイトの実装方法をみるもの勉強になりますよ。

次の