WordPress チュートリアル

簡単にウェブサイトやブログのソースコードを見る&編集する方法【デペロッパーツール】

Web制作やWordPressカスタマイズする際に、重宝するのがデペロッパーツールです。

エラーの際のコード確認や、製作中の細かな数値の調整の際にも大活躍なツールになり無くてはならない存在です。

うまく使いこなせるようになれば、作業効率は格段にアップできますよ!

ここでは、デペロッパーツールについて説明しています。

ソースコードの確認特定するツール

ソースコードの確認し特定するツールとして、ブラウザのGoogle Chromeの標準機能であるデペロッパーツールを利用します。

標準機能ですから、無料です。ガンガン使っていきましょうね!

WebブラウザシェアランキングTOP10(日本国内・世界)

https://webrage.jp/techblog/pc_browser_share/

こちらの記事を見てみると世界的に利用されているブラウザは、「Google Chrome」なんだそうです。

私もMacを使っているもののメインのブラウザはGoogle Chromeを利用しています。

拡張機能など充実して、ブラウザ自体軽く、またWindows PCで作業しなくてはいけなくなってもGoogleアカウントで同期することでメールやドライブにアクセスできるなど便利です。

Safarifirefoxでも同様の機能や拡張機能がありますが、シェアの高さからGoogle Chromeを用いることにします。

複数ブラウザがあっても困りませんので、開発用のつもりでインストールしても良いと思います。

Google Chromeのインストールは下記リンクよりできます。

https://www.google.co.jp/chrome/

 

デペロッパーツールを利用するメリットとは

デペロッパーツールはとても高機能ですが、コーダーやプログラマーじゃなくても標準に備わっている機能ですからどんな人でも利用できます。

それは、自分のサイトやブログはもちろんのこと他のサイトやブログでもデペロッパーツールを利用することができます。

自分のサイトやブログのソースコード

自分のサイトやブログのソースコードの場合、自分で作っているわけですから、Dreamweaverやテキストエディタなどでコードは見れています。

とはいえ、コーディングしたものを実際にブラウザでどう表示されるか何度も確認しても、表示がズレていたりうまく動かないなどある場合、エディタに戻って直して見てまたブラウザで確認してと繰り返す手間があります。

またそれで、すぐ意図する表示に出来れば良いのですが、うまくいかないことも多々あります。

そのような時には、デペロッパーツールでソースを編集してみれば、ブラウザ上で直接どう表示するか確認することができます。

幅や高さの計算が苦手でも、1pxごと数値を変更していきMAXの値を確認することもできます。

テキストエディタで仮の数値を入力しておいて、デペロッパーツールで本数値を探るといった使い方だって可能です。

そうして得たコードを、またエディタに落とし込むことで、早くそして正確にコーディングすることができます。

他のサイトやブログのソースコード

他のサイトやブログのソースコードを見ることで、自分のコーディングやサイトデザインについて勉強になりますし参考にすることができます。

静的なサイトなら1ページ丸ごとコピーしてテキストエディタで編集してみることだってできますから、CSSを自分で考えて全く同じに作って再現してみるような練習もできるんです。

一部の見出しだけでも本文のCSSデザインをどうやって指定しているかでも見れますから、自分のサイトやブログのために参考にしてカスタマイズすることもできます。

また、他のサイトやブログであっても、デペロッパーツール上でソースやCSSの編集をしてみることが可能です。

ここの数値を増減すると表示がどうなるかなど積極的にいじって見ることで、自分のコーディングスキルの経験値にできるでしょう。

もちろん、自分のブラウザ上のみでの編集操作なので、大元のサーバー上のデータを編集しているわけではないので安心してください。

デペロッパーツールを利用するメリットのまとめ

このようにデペロッパーツールの使い方を工夫することで得られるメリットがたくさんあります。

自他問わずたくさんのサイトやブログを見てみることで、技術的に軽度で済むブロガーにももちろん勉強になりますし、ウェブデザイナーやプログラマーを志し勉強している人にも大いに貢献してくれます。

そして、ウェブ系に身を置いている以上は切っても切り離せないツールで頼りになる相棒です。

テキストエディタや統合開発環境と並びデペロッパーツールも沢山触って使えるようにしておきましょう。

 

Google Chromeのデペロッパーツールでソースコードを特定しよう

デペロッパーツールの利用はとても簡単なので安心して大丈夫です。

ブラウザのGoogle Chromeを早速起動してみよう。

私のパソコンはMacなのでMacを基本として解説してきます。

ブラウザのメニューから選択

ブラウザを起動したら、メニューからデペロッパーツールを起動していきます。

デペロッパーツールは、メニューの「表示」→「開発/管理」→「デペロッパーツール」と進むと起動できます。

起動したら、ブラウザの下部にデペロッパーツールが表示されます。

簡単にデペロッパーツールを起動するショートカットキー

慣れてきたら、デペロッパーツール必要な時にすぐ起動できるようにショートカットキーも確認しておきましょう。

デペロッパーツールのメニュの右隣にショートカットキーが次のように表示されています。

⌥ ⌘ I

記号の意味は、次の通りです。

オプション
コマンド

オプション、コマンド、(アルファベットの)アイと覚えておきましょう。

キーボードがWindows用のもので代用している場合、代用キーが次の通り案内されています。

Windows パソコン用のキーボードをお使いの場合は、「option」キーは「Alt」キー、「command」キーは Windows ロゴキーで代用してください。

https://support.apple.com/ja-jp/HT201236

デペロッパーツールでソースコードを見てみる

デペロッパーツールの画面は、メニュー、左にソース、右にCSSに別れています。

この解説では、メニューを変えることはありませんので、このままで大丈夫です。

私のブログはWordPressで作っているので、一見して複雑に見えるかもしれませんが、一番上から読んでいけば通常のウェブサイトの構造と一緒であることがわかります。

<!DOCTYPE html>から始まり、<html>があり、次に<head>があり、<body>があります。

htmlの理解が広がれば、これはhtml5で記述されているな、とかこれはWordPressだなとかわかるようになります。

自分のサイトやブログ、他のサービスなどのぞいてみましょう。いろんな特徴に気づけますよ!

ソースコードを特定する2つのコツ

ソースコードを特定するには、2つのコツがあります。

どちらの方法でも特定は可能ですが、併用して行うことで素早く特定することができます。

セレクトアイコンをクリックしてウェブサイト上のソースコードを調べたいところをマウスオーバーする

デペロッパーツールの画面の左上に、四角に矢印が乗っているアイコンがあります。

マウスオーバーすると説明文が次のように表示されます。

「select an element in the page to inspect it (ページ内の要素を選択して検査する)」

つまり、セレクトツールを起動して、ページ内の要素をマウスオーバー(選択)すると、ソース上で選択した要素を表示してハイライトするよ、ということです。

それでは、セレクトツールを起動して、ブログの見出しの部分にマウスオーバーしてみます。

上記画像のように、ブログの見出し部分にマウスオーバーすると、ハイライトされるとともに、タグの種類、クラスまたはID名、サイズなどが表示されます。

また、デペロッパーツールのソース画面において、マウスオーバーされている要素がネストが展開され、さらにハイライトされて表示されています。

このように、知りたい要素の上にマウスオーバーするだけで、簡単に特定することができました。

ただ、このままですとマウスを動かすだけで他の要素が選択され続けてしまいますので、選択を完了したいと思います。

ブログ本文の要素の選択をして、完了固定して見ましょう。

下記画像のように、マウスオーバーして、選択したら、クリックします。

すると、デペロッパーツールのソース画面で、選択した要素が濃くハイライトされ、選択ツールが解除されました。

これで、マウスを動かしても他の要素に移る心配なく、要素の編集などの作業が可能となりました。

ソースコードのタグを選択してウェブサイト上のどのソースコードかハイライトさせる

デペロッパーツールのソース画面で、ソースを読みながらネスト展開し、記述を確認しながら特定の要素のブラウザ上の表示をハイライトすることができます。

上記画像のように、ウェブサイトやブログのHTMLの構造で、ブラウザで表示されている部分は「body」タグ内に収まっていますので、bodyタグの左横のグレーの三角マークをクリックして、ネストの展開をしていきます。

大体は、IDやクラス名でタグで構造のどこの部分かは、自分で作成していたりHTMLに理解があれば、どんどん読み進められると思います。

ブログのタイトル部分をソース画面から特定してみます。

bodyタグ部分から、どんどんタグを展開していきます。

大体のHTML文書構造や、HTML5のタグなど先に知っていると、タグ名任意のID名など混在していますが、body→wrapper→content→main→article→post→見出しのように進めば表示したい要素まで進めると思います。

そして、上記画像のように、タグ名と要素内のコンテンツから特定したい部分だと思うところを発見しました。

クリックして確定してみます。すると、無事ブログのタイトル部分を特定することができした。

デペロッパーツールでソースを編集してみる

デペロッパーツールであれば、ソースやCSSをコピーしてローカルで編集しようとしなくても、そのままブラウザ上で値を編集して即時に表示の確認をすることができます。

開発でも勉強でも、強力な機能ですから、たくさん触って身につけましょう。

CSSの値を変更してみよう

デペロッパーツールで、CSSの値を追加編集することで、どのように変更表示されていくかみていきましょう。

下記画像の通り、Pタグの「ブログの作り方を初心者のためにわかりやすく解説しているページです。」の文を選択します。

デペロッパーツールの右側の窓で適用されているCSSの要素と値が確認することができます。

選択しているPタグには、element.style{}となっていて、直接指定されている値は何もないことがわかります。

選択しているPタグにCSSを指定していきます。

element.style{}上でクリックします。すると、{}の間が展開し入力モードにできます。

CSSの指定の仕方の、:;がセットで表示されていますので、要素と値を入力すれば良いです。

フォントのサイズを指定する

選択しているPタグのフォントサイズを変更してみます。

CSSでは、要素名がfont-sizeなので、fと入力してみます。

すると、予測変換で、先頭の文字がFである要素名の一覧がリストで表示されます。

あとは、リストで選んでも構いませんし、候補を絞るために入力を進めてもよいですし、要素名を全て自分で記述してもよいです。

要素を決めると、入力箇所が値に移動して、値の候補リストがまた一覧で表示されます。

値を入力して、ブラウザで表示を確認してみましょう。

element.style{}にfont-sizeの2emを指定しました。

デペロッパーツールの左側ソース画面では、Pタグに直接スタイルが指定されていることがわかります。

選択しているPタグのみに先ほど指定したCSSが反映されていることがわかります。

そして、ブラウザ上では、指定したPタグの文のサイズが、2em分大きく表示されています。

フォントの色を指定する

続いて、同じ選択してるPタグの色の指定する要素を追加してみたいと思います。

先ほどサイズの値を指定したあとに、入力モードが下の列に移っていますので、そのまま記述します。

文字の色を指定する要素のcolorを入力して、赤の値を入力します。

下記画像のように、ブラウザ上で文章が赤く表示することが確認できました。

Pタグにボーダーを指定する

Pタグに指定できる要素であれば、追加で指定することができます。

続いて、ボーダーで装飾してみます。

border-bottomで、下記画像のように細い実線を表示させてみました。

Pタグにマージンを指定する

選択しているのはPタグですから、マージンやパディングも指定できます。

下記画像のように、マージンボトムの値を追加して、余白を広げてみました。

CSSの記述ルールを見て確かめる

デペロッパーツールでは、CSSが適用されているか無効になっているか見てわかるようになっています。

先ほどまでCSSを追加していたPタグに、続けてフォントのカラーを指定してみます。

color:black;を追加して、ブラウザ上の表示を確認すると、フォントの色が黒に変更されたことがわかります。

デペロッパーツールのCSS画面を見ると、color:black;は残っていますが、color:red;は取り消し線が表示され無効となっていることがわかります。

color:black;の下に、color:blue;を指定してみます。

ブラウザでは文字が青色に変わり、color:red;とcolor:black;が取り消し線で無効となっていることがわかります。

このことから、CSSは後述したスタイルが優先されることが理解できると思います。

スタイルシートの読み込み順や、要素の記述順番などで自分の意図しない表示になる場合は、デペロッパーツールで確認して無駄な記述を削除したり、特定の要素またはIDやクラスに他のスタイルシートで実は指定していたなどトラブルの原因を探ってみると良いでしょう。

ソースを編集してみよう

次にソースを編集することでどのように表示が変更することができるか確認します。

テキストを変更する

デペロッパーツールの左側のソース画面で、今まで選択していたPタグ内のテキストをダブルクリックします。

入力モードになりますので、「ブログの作り方を初心者のためにわかりやすく解説しているページです。」を「ブログの作り方を無料で完全公開しています!」に書き換えます。

下記画像のように、ブラウザ上でも表示が変更されたことが確認できました。

HTMLタグを変更する

今まで選択していたPタグの、Pの部分をダブルクリックして、spanに書き換えます。

Pタグをspanタグに変更することができました。

 

続いて入力モードになっていますので、半角スペースを入力して、クラスを設定してみます。

class="test"と入力して決定します。

下記画像のようにクラスを指定することができました。

スタイルを先に指定しているIDやクラスであれば、すぐ反映するの表示を確認できますが、次のように新規のIDやクラスを指定することができます。


デペロッパーツールの右側の
CSS画面の右上の「.cls」をクリックします。

すると、下記画像のように、先ほどspanタグに追加したクラスが表示され、かつ入力モードになります。

これで、またスタイルを指定することができ、ブラウザ表示の確認をすることができます。

編集して得た値はテキストエディタにコピペしよう

今までの追加編集の値などはデペロッパーツール上のものです。

自身の意図する表示について確認したら、忘れずに、テキストエディタなどの元のソースにコピペや入力してしっかり保存しましょう。

初心者には、このようなサイクルでサイト作りしていくと、早く正確に開発していくことができるでしょう。

  1. テキストエディタでソースやCSSを入力する。
  2. ブラウザで表示を確認する。
  3. デペロッパーツールで値を編集する。
  4. テキストエディタに値を入力、コピペする。

どんなサイトでもソースコードを見ることができる

デペロッパーツールは、自分のサイトやブログだけしか使えないわけではなく、ブラウザで閲覧できす全てのWebページで利用することができます。

つまり、様々なサイトでデペロッパーツールを利用して、HTMLの構造やCSSの指定の仕方など確認して、参考にすることができます。

読み込みが早いサイト、よくみるサイト、デザインが素晴らしいサイト、好きなサイトなど色々デペロッパーツールでみてみてたくさん勉強してみましょう。

では、早速Amazonのトップページでデペロッパーツールを使ってみます。

すると、わお!

ソース内にコメントアウトされて、アヒル(?鳴き声は猫?)が居ました。

もしかしたら、いろんなサイトの中に、面白いコメントがあるかもしれないので、探しみるのも楽しいかもしれませんね!

MEOW!!

キャッシュのクリアも簡単にできる

ウェブサイトの作成中によくあるトラブルが、ブラウザで表示を確認して更新しても表示が全く変わらないというものです。

この場合は、テキストエディタでしっかり保存することと、ブラウザの古いデータが残っているのでキャッシュの消去する操作が必要です。

キャッシュを消去するために、いちいちブラウザの設定から履歴やキャッシュの消去をするのはスマートではありません。

そのような場合にも、デペロッパーツールの出番です。

デペロッパーツールを起動したら、ブラウザの更新アイコンの上で右クリックします。

すると、通常では無かったメニューが3つ表示されます。

そのうちの、「キャッシュの消去とハードの再読み込み」をクリックします。

たったこれだけで、キャッシュの消去とハードの再読み込みが行われ、ソースの変更後の表示の確認がすることができます。

さいごに

以上、簡単にウェブサイトやブログのソースコードを見る&編集する方法【デペロッパーツール】でした。

デペロッパーツールでソースを特定する方法でサイトやブログの開発など今までより一層早くして正確に行えるようになります。

デペロッパーツールのごく一部の機能ですが、たくさん触って慣れるようにしましょう。

おすすめ
【体験談】デジタルハリウッドStudioのWebデザイナー専攻って実際どうなの?Webデザイナー・スキル・就職転職の気になるアレコレ

Webデザイナーを目指スキルを身に付けようとしたときに気になるスクールといえば、「デジタルハリウッドStudio」です。 かくいう僕もデジハリStudioの卒業生です。 なので、僕の体験談からデジタル ...

続きを見る

-WordPress, チュートリアル
-,

Copyright© NICESKILL , 2019 All Rights Reserved.