プログラミング初心者必見!Chromeデベロッパーツール便利機能まとめ


プログラミング初心者必見!Chromeデベロッパーツール便利機能まとめ

ブログやwebサイトのデザイン等を修正する際、ブラウザと管理ページやテキストエディタを行ったり来たりするのは面倒ではありませんか?直したつもりが上手く反映されない・・・なんてことは、誰もが経験することだと思います。そんな悩みを解決するデベロッパーツールという便利ツールをご存知でしょうか?

Google Chromeに付いているデベロッパーツールを使えば、ページ1つで直接HTMLやCSSを調整することができるので超効率的!そこで本日は、デベロッパーツールの便利機能をご紹介します。中級者以上の方は、当たり前のように知っていることだとは思いますが、中には知らない方も多いと思いますで、是非参考にしてみてください。

目次
  1. デバロッパーツールとは
  2. デベロッパーツール起動方法
  3. HTMLソースが実際のサイト上でどうなっているかが一目でわかる!
  4. ブラウザからソースコード上の要素を探す!
  5. ブラウザ上で変化を見ながらCSSを修正できる!
  6. スタイルの削除
  7. 値の変更
  8. スタイルシートの追加
  9. まとめ

デバロッパーツールとは

デベロッパーツールとはGoogle Chromeに標準でついている機能で、開発者向けに以下のような様々な機能が搭載されています。

  • HTML・CSSの確認と編集
  • ネットワークの監視
  • JavaScriptのデバッグ
  • JavaScriptのパフォーマンスチェック
  • Cookie, localStorageの確認・編集
  • レンダリングを含めたパフォーマンスチェック
  • YSlowのようなパフォーマンスチェックツール
  • JavaScriptのコマンドラインツール

今回は、その中でも基本的な機能であるHTMLとCSSの確認と編集について説明していきたいと思います。webデザイナーやブログ制作をお仕事にしている方も、覚えると効率的に作業できるようになりますので、是非覚えておきましょう。

デベロッパーツール起動方法

まずデバロッパーツールの起動方法ですが、修正したいサイトブラウザ上で右クリックをして「要素の検証」を選択します。そうすると、下記のようにデベロッパーツールが起動され、そのページのソースコードが表示されます。

スクリーンショット 2014-07-09 12.33.17スクリーンショット 2014-07-09 12.28.22

上の画像の右側がHTMLソース、左側がスタイルシートです。Chromeのデベロッパーツールは、英語表記のため、最初はとっつきにくく感じるかもしれません。しかし、HTMLとCSSの修正のほとんどは、一番右にある「Element」パネルで行えますので、今回は「Element」パネルを中心にご紹介していきます。それではさっそくデベロッパーツールでどんなことができるのかを見ていきましょう!

HTMLソースが実際のサイト上でどうなっているかが一目でわかる!

スクリーンショット 2014-07-07 18.17.38

上の画像のようにHTML要素にカーソルを合わせるとブラウザ上の対応してる部分がハイライトされます。このようにデベロッパーツールを使えば、HTMLソースの要素が実際のサイト上でどのように働いているかが一目瞭然なので調整をする際に非常に楽になります。特にmarginやpaddingなどの範囲が色付きで表示されるので、ボックスの大きさや位置を変更するためにどこをいじればいいのかも簡単に判断できます。

ブラウザからソースコード上の要素を探す!

スクリーンショット 2014-07-09 16.15.18

デベロッパーツール右上の虫眼鏡マークをクリックした状態でブラウザにカーソルを持っていくと、カーソルの部分のボックスが色付きで表示され、そこからソース上の要素を参照することができます。このようにデベロッパーツールを使うことで、一発で修正すべき箇所を見つけることができるのです!

ブラウザ上で変化を見ながらCSSを修正できる!

スクリーンショット 2014-07-07 20.04.54

デベロッパーツールを使えば、HTML要素を参照できるだけでなく、ブラウザ上でスタイルシートをカスタマイズできます。つまり、リアルタイムに変化を見ながらデザインを修正することができるのです。また、これらの変更は、保存されることはないので、安心して編集することができます。そのため、実際に変更を適用したい際は、編集した内容をテキストエディタにコピペするのを忘れないように注意してください。それではスタイルシートの修正方法を見てみましょう。

スタイルの削除

スクリーンショット 2014-07-07 20.01.15

まずはスタイルの削除方法を説明します。スタイルを削除したい場合は、CSSプロパティの左側にあるチェックマークを外すことで、そのプロパティを無効にすることができます。このように背景色を設定していたスタイルシートが削除されたことで、ブラウザ上でもその変化を確かめることができます。

値の変更

スクリーンショット 2014-07-09 13.03.16

CSSプロパティか数字をクリックして編集することで、値を変更することができます。変更した結果をリアルタイムで見れるので、フォントサイズや余白などの微妙な調整が必要な箇所を修正する際に非常に便利です。

スタイルシートの追加

スクリーンショット 2014-07-09 13.04.18

新しいスタイルシートは、CSSプロパティの左側の余白をクリックすると追加できます。文字を入力すると、予測変換が発動するようになっています。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか。デベロッパーツールをうまく使えば、これまでの作業を格段に効率化することができると思いますので、是非この記事を参考にして理解を深めていただければと思います。


関連記事

CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp