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つ表示されます。

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

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

まとめ

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

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

絶対に収入を得たい初心者のための稼ぐブログの作り方|収入を伸ばす運営方法

ブログの作り方を初心者のためにわかりやすく解説しているページです。 手順通りに行なっていけば、ブログ収入の仕組み、ブログの作成の準備段階、ブログの作り方、記事の書き方、そして運営方法までわかるようにま ...

続きを見る

稼ぐブログの作り方

初心者のために「完全無料」で公開中!!

詳しくはコチラ

人気記事

  1. phpをDreamweaverを使ってローカル環境で動かす方法
  2. 【簡単10分】ECS LIVA ZのメモリとSSDの増設方法と手順【分解写真付き】
  3. 【超簡単】ECS LIVA Zの増設したSSDにOSを移行して起動ドライブにする方法【さらに高速化】
  4. 25歳を過ぎたら手遅れ?そんなことない!人生を後悔しないための具体的な3つのやり直し方
  5. ECS LIVA Z Celeron N3350小型デスクトップpcの実機レビュー増設後の使用感
  6. 勉強したい社会人は孤独を強みに変えよう
  7. 簡単にウェブサイトやブログのソースコードを見る方法【デペロッパーツール】
  8. 社会人の孤独な一人暮らしを成長する機会にする考え方
  9. 25歳で「手遅れ」と感じたら始める人間関係整理術。失敗に影響しない幸せを手に入れろ!
  10. 意味ない勉強にとらわれるな!社会人は価値のある勉強をしよう
  • この記事を書いた人
  • 最新記事
ユキズ(@yuki_PHZ)

ユキズ(@yuki_PHZ)

自分や家族の生活のため、よりよい暮らしや豊かさを求める人たちのためにナイスな情報を提供しています!

妻と2歳児と0歳児の可愛い娘の4人暮らし。お昼の仕事と育児家事の合間を縫ってブログを更新しています。

好きなものはアウトドアとオートバイ。免許:普通自動車、大型自動二輪、大型特殊。保有資格:自動車整備士、宅地建物取引士、そしてWebクリエイター能力認定試験エキスパートを正答率100%で一発合格!過去に独学でiPhoneアプリ製作リリース経験有り。ブログ記事執筆に重点を置いたためWeb系スキルが錆つきかけてるけど、全体的に1人でなんでもやれます。

特技:ドローン操縦、バク転。趣味:TOEIC。営業経験有り、個人向け商品で年間で約2億5千万円売り上げた実績があります。

他、写真撮影、動画撮影やりますので、読者の皆さんに役立てそうな情報やスキルは全部提供していきます!

よく読まれている記事

1

ブログの作り方を初心者のためにわかりやすく解説しているページです。 手順通りに行なっていけば、ブログ収入の仕組み、ブログの作成の準備段階、ブログの作り方、記事の書き方、そして運営方法までわかるようにま ...

2

副業をする上で、「何を」副業とするかは大事なポイントです。 できればキツくない方が、できれば割りのいい方がと思う気持ちはもちろん理解できます。 ただ、ここでは、ちょっと視点を高くして「なぜ副業するのか ...

3

副業したい女性に今人気になっているのが「ブログ」を使って収入を得る方法です。 ブログでお金を稼ぐことは実は出来るんです。 ここでは、ブログを使った副業について説明していきます。 ブログで稼ぐって怪しく ...

4

この方法は抽象的ではく具体的に提示する案になります。 本当に苦しく、孤独感や絶望感を感じていて、藁にもすがりたいと感じているあなたに対してのプランです。 このいずれの方法も当ブログ著者の経験を、良かっ ...

-WordPress
-

Copyright© バレない在宅副業ならブログ収入だ!!ナイスな副業の始め方-NICESKILL- , 2019 All Rights Reserved.