dev-top2

サイトの中身が丸分かり!超便利なクロームデベロッパーツールの使い方

いつも「みなラボ」にアクセスいただいてありがとうございます!(´∀`*)ノシ

↑みなラボのページに「いいね!」はコチラから↑(>∀<)ノ☆ 


こんにちは!や~べ~です。

梅雨に入ったとはいえ、雨があまり降らず、関東なんかではダムの貯水率が下がってきて取水制限が掛かるとか掛からないとか。。。

個人的には雨の日よりも晴れてる日の方が好きなので良いんですが、水不足になってしまうと困りますよね~。

今年は節水することになるのかなぁ。。。

 
前置きはこのくらいにして、

今回は、Googleクロームで表示しているWebサイトの中身が丸分かりになる「デベロッパーツール」の使い方を記事にしていきたいと思います。

WordPressをはじめとしたサイト構築に携わる方はもうすでにご存じかと思いますが、サイト構築初心者の方や、ただ単純にWebサイトの構造を少し覗いてみたいという方など向けて情報を発信していきたいと思います。

このGoogleクロームの「デベロッパーツール」を使うと、Webの知識がほとんどなくても簡単にWebサイトの構造を覗いたり、コードを操作して疑似的な編集をすることができます。

※ブラウザ上での編集のみ可能です。サイトの更新はサーバーにアクセスしなければ出来ません。

表示されているコンテンツのテキストや画像をクリックするだけで、対応するHTMLやCSSがハイライトされ、容易に操作することができます。

Webサイトのコード部分は、基本的にアルファベットの羅列なので、見たい部分のコードを探すのにかなり苦労します。

「デベロッパーツール」を使えば、表示されているコンテンツをクリックするだけで、該当するコードに辿りつけるので、サイトの不具合を見つけて修正するといった作業の効率が格段に上がると思います。

また、有名サイトのコードを参考にして、自分のサイト構築に役立てることもできると思います。

 
では、簡単な操作方法を説明していきたいと思います。

 

スポンサーリンク

1.クロームデベロッパーツールの使い方「起動」

まずは、GoogleクロームでWebサイトを開きましょう!

今回は、当サイト「みなラボ」を例に話を進めます。

 
Webサイトを開いたら、右上のメニューボタン→プルダウンメニューの「その他のツール」と進むと、一番下に「デベロッパーツール」とあるので、そこをクリックします。

dev1-c

 
これでだけで「デベロッパーツール」を使い始めることができます!

すごく簡単ですね。

 
「デベロッパーツール」を起動すると、ウインドウが三つに分かれます。

デフォルトでは左に通常のWebサイトのコンテンツが表示され、右上にHTML、右下にCSSが表示されます。

ウインドウの幅などは、仕切られているスライドバー付近をドラッグすれば、自由に変更できるので、使い易いようにアレンジして使って下さい。

dev2-k

dev3

 
今回は中央のバーを少し左にドラッグして、コンテンツの部分を少し狭くし、コンテンツ部分とコード部分が半分くらいになるようにして使用していきます。

 

スポンサーリンク

2.クロームデベロッパーツールの使い方「HTML操作」

 
簡単にHTMLを操作するには、まずHTMLウインドウの左上にある矢印(赤丸で囲った部分)をクリックします。

dev4-k

 
すると、コンテンツの部分からHTMLをハイライトできるモードなります。

(一度コンテンツを選択し、操作を終了すると、通常モードになるので、再度ハイライトさせる時には、もう一度この赤丸部分をクリックする必要があります。)

 
この状態で、左のウインドウの見たい場所(今回は「こんな使い方が・・・」のテキスト)にマウスを持って行くと、右上のHTMLウインドウの対応するコードが灰色にハイライトされます。

dev5-k

 
そのままの状態でクリックすると、灰色にハイライトされた部分が青でハイライトされ、編集可能になります。

dev6

 
ここで青色にハイライトされた部分をダブルクリックするとテキストを変更できるようになります。

dev7

 
ためしに「書き換えてみます!」と入力します。

dev8

 
エンターで変更が適用され、左のコンテンツの表示が変更されていることが確認できます。

dev9-k

 
同様に、コンテンツの画像を選択すると、格納されているパスやサイズなどを即座に確認することができます。

dev10-k

 
さらにWebサイトのデザインなどを操作したいときは、CSSのプロパティを操作すると、色や形などの変更を試すことができます。

CSSは少し上級なので、試してみたい方は↓のサイトを参考に行ってみて下さい。

デベロッパーツールについてさらに詳しく解説されています!!

参考サイト:ハイファイブクリエイト

 

スポンサーリンク

まとめ

簡単にWebサイトを操作できるツール「デベロッパーツール」の使い方を説明させて頂きましたが、いかがでしたでしょうか?

クリックで感覚的に、Webサイトのコードをあれこれ操作できるので、ほんとに簡単で便利だと思います。

よくGoogleのサーチコンソールなどに不具合が表示されることがあると思うのですが、そういった時の原因を探る作業にも使えると思います。

クロームをインストールしさえすれば、すぐに使える機能だと思いますので、みなさんもぜひ使ってみてはいかがでしょうか?

 
↓ランキング参加してます!よろしければ、クリックで応援して下さいっ!
ブログランキング・にほんブログ村へ
にほんブログ村

 
↓こちらもお願いしますっ!

人気ブログランキングへ
 

この記事を読んでいる人はこちらの記事も読んでいます。(※広告も含む。)

 

 

最後までお読みいただいて、ありがとうございます。

もしこの記事を気に入っていただけたなら、SNSで共有していただけると、とても嬉しいです!どうぞ、よろしくお願いいたします!m(_ _)m

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで『みなラボ』をフォローしよう!

Feedly、RSS、Push7はこちら!!

follow us in feedly

まだデータがありません。

まだデータがありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です