東京・オンラインでも開催する初心者向けのHTML・CSSを使ったホームページ制作の1日集中講座(セミナー)です。 HTML・CSSの入門講座なら、神田ITスクール!

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

  • HOME »
  • Chromeデベロッパーツールの使い方

Chromeデベロッパーツール(以下ツール)とは??

Google Chrome搭載の、開発者向けの機能です。

以下のような様々なことを行うことができます。

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

こちらでは、特にHTML5・CSS3で開発・勉強する際に是非利用していただきたい機能を紹介致します。

「HTML・CSSの確認と編集」でのメリット

具体的には、

  • サーバーアップロードなしで、HTML・CSSのデザインの確認ができる
  • フォントサイズやpaddingなど、px単位でサイズ感の確認ができる
  • CSSプロパティ・値の自動補完
  • カラーコードをカラーピッカーで指定ができる
  • 様々なデバイスサイズに合わせた形で、表示を確認できる。

使い方の説明

  1. ツールの開き方
  2. 表示画面の見方
  3. エレメンツパネルの使い方
  4. デバイスモードの使い方

ツールの開き方

①HTMLもしくはCSSを編集したい箇所を右クリック

ショートカットキー
windows:【F12】or【Ctrl+Shift+I】
mac:【Command + Option + I】

②【検証】をクリックで起動

表示画面

要素選択ボタン
編集したい箇所のHTMLを素早く指定する
デバイスモードボタン
レスポンシブサイトを作成する際に、端末サイズを切り替え確認できる
エレメンツパネル
HTML、CSSを確認編集する画面
styles編集
CSSのstyleを指定できる
表示切り替え
ツール画面の表示を縦・横・切り離し表示に切り替えられる

要素の選択

まずは、編集したい箇所を指定していきます。

①要素選択(左上)のボタンをクリック

ショートカットキー
 windows:【Ctrl+Shift+C】 mac:【Command+Shift+C】

②ブラウザ画面の該当箇所にカーソルを当て、クリック!

③HTMLで選択した箇所はパンくずリストとして下のバーで確認できます。

エレメンツパネルの使い方

エレメンツパネルではHTMLの編集とCSSの編集ができます。

HTMLの編集

HTMLのテキストやclassやID、属性などを編集することができます。
こちらではテキストを変更する流れを見ていきます。

①該当箇所を右クリック→Edit as HTMLを選択(編集画面に変わる)

②内容の編集

テキストを変更していきます。


変更後

③変更を確定する

windows:【Ctrl+Enter】 mac:【Command+Enter】 もしくはマウスでダブルクリック

CSSの編集

以下ではCSS編集ではどんなことができるのかを見ていきます。

①該当箇所(HTML)の確認

②右側のパネル(Styles)で該当箇所を確認

③空白部分をクリック

④プロパティの入力

自動的にプロパティの候補が現れるので選択

tabキーで値の入力へ

⑤値の入力(数値は方向キーで微調整可能)

入力できる候補も確認できます。今回は20pxと手動入力



カラーピッカーの利用(カラーコードを調べる手間がなくなる!)

①colorやbackground-colorなどの色の正方形を選択

②カラーピッカーパネルが開く

③色を選ぶ

④Enterボタンで確定

before

文字サイズ、色の変更前

after

変更後

ボックスモデルの確認ができる

ボックスモデルの上下左右、padding、marginがのそれぞれの値をビジュアルで確認しながら修正ができる

①styleパネルの一番下まで進むと確認できます

②h4addingとmarginを追加

③表示の変化はこのように起きています。

④ボックスモデルを再度確認すると、marginとpaddingの部分に指定したピクセル数が表示されている

プロパティのON・OFFができる

①右側のStylesパネルを確認

②入力プロパティの左端のチェックを外す

デバイスモードの使い方

デバイスモードとは?

PC、タブレット、モバイル画面での表示を確認することができる機能
レスポンシブサイトを作成する際に、便利に利用できます。

①まずは準備(表示切り替え)

②デバイスモードボタンをクリック

クリック後:スマホ用の表示が確認できます

③デバイスの切り替え

Responsiveを選択するとデバイスのサイズにない場合自由に画面サイズをを変更することができる

右端の部分を自由にドラッグ

最後に

変更した内容は、そのままでは反映されませんので、必ずソースにコピー&ペーストするようにしてください。
その後サーバーへアップロードして初めて反映されます。

デベロッパーツールはあくまで、開発者の確認用に使用するものです。

セミナー一覧

神田ITスクールの就職・転職

HTMLとCSS入門書

法人向けプログラミング研修

Java、PHPの社員研修|新人研修

ホームページ制作・保守

ホームページ制作・保守

他のHTML及びCSSの講座・スクールの紹介

セミナー講師

セミナー講師

主席インストラクター&管理人

ワードプレスセミナーも人気!

ワードプレスセミナーも人気!

より手軽にホームページ制作をしてみたい方にはワードプレスセミナーもおすすめです。
ワードプレスセミナーはこちら

1日集中HTML・CSSセミナーは、プログラミング教育で8年間の実績のある神田ITスクールが運営しています。
初心者、未経験者へわかりやすく教えるのには自信がありますので、ぜひご参加ください。
神田ITスクールのサイトはこちら

ホームページ制作・保守

ホームページ制作・保守
PAGETOP
Copyright © 2015 FusionOne Co.,Ltd. All rights reserved.