要素の検査：任意のWebページを一時的に編集する方法
公開: 2021-09-14ブラウザに隠れている強力なツールがあります： InspectElement 。
任意のWebページを右クリックし、[検査]をクリックすると、そのサイトの内部が表示されます。ソースコード、デザインを形成する画像とCSS、使用するフォントとアイコン、アニメーションを強化するJavascriptコードなどです。 。 サイトの読み込みにかかる時間、ダウンロードに使用した帯域幅、テキストの正確な色を確認できます。
または、これを使用して、ページ上で必要なものを変更することもできます。
Inspect Elementは、Webを目立たせる原因を学習し、サイトで何が壊れているかを把握し、色とフォントの変更がどのように見えるかをモックアップし、スクリーンショットで個人的な詳細をPhotoshopで削除する必要がないようにするのに最適な方法です。 それはあなたがあなたのブラウザが持っているとは知らなかった超大国です。
Google Chrome Inspect Elementを使用して、コードを1行も記述したことがない開発者でもマーケティング担当者でも、作業を支援する方法を学びましょう。 携帯電話でこれを読んでいる場合は、ラップトップに切り替えてGoogle Chromeを開き、コードを微調整する準備をしてください。
Mozilla FirefoxやAppleのSafariを含むほとんどのWebブラウザには、要素の検査ツールが含まれていますが、MicrosoftのInternetExplorerおよびEdgeブラウザには同様の開発者ツールのセットが含まれています。 このチュートリアルでは、GoogleChromeのInspectElementツールに焦点を当てていますが、ほとんどの機能は他のブラウザでも同じように機能します。
待ってください、なぜInspect Elementを使用する必要があるのですか？
好奇心からWebサイトのコードを覗いたことがない場合は、なぜInspectElementの使用方法を学ぶ必要があるのか疑問に思うかもしれません。
デザイナー：サイトのデザインがモバイルでどのように表示されるかをプレビューしたいですか？ または、サインアップボタンで異なる緑の色合いがどのように見えるかを確認したいですか？ Inspect Elementを使用すると、両方を数秒で実行できます。
マーケティング担当者：競合他社がサイトヘッダーで使用しているキーワードに興味がありますか、またはサイトの読み込みがGoogleのPageSpeedテストに対して遅すぎるかどうかを確認したいですか？ InspectElementは両方を表示できます。
ライター：スクリーンショットであなたの名前とメールアドレスをぼかすのにうんざりしていませんか？ Inspect Elementを使用すると、Webページ上の任意のテキストを1秒で変更できます。
サポートエージェント：サイトで修正する必要があるものを開発者に伝えるためのより良い方法が必要ですか？ Inspect Elementを使用すると、簡単な例の変更を行って、話している内容を表示できます。
これらのユースケースや他の数十のユースケースでは、InspectElementは手元に置いておくのに便利なツールです。 余分な機能の数が含まお使いのブラウザで開発者ツールのそれの一部、：コードを実行するには、コンソール、ソースの表示ページサイトの背後にあるだけで、生のコードを参照するには、すべてのファイルのリストとソース]ページがAにロードされましたウェブサイトなど。 これらすべてを自分で調べることができますが、今のところ、メインの[要素]タブを使用して自分でWebページを微調整する方法を見てみましょう。
InspectElementの使用を開始する方法
Google Chrome InspectElementにアクセスする方法はいくつかあります。 編集を試みたいWebサイトを開いて（このチュートリアルに従うには、Zapier.comを開きます）、次の3つの方法のいずれかで要素の検査ツールを開きます。
Webページの任意の場所を右クリックすると、ポップアップするメニューの一番下に「検査」と表示されます。 それをクリックします。
Google Chromeツールバーの右端にあるハンバーガーメニュー（3つのドットが積み重なったアイコン）をクリックし、[その他のツール]をクリックして、[開発者ツール]を選択します。 または、ファイルメニューで、[表示] —> [開発者] —> [開発者ツール]をクリックします。
キーボードショートカットを好みますか？ Macの場合は
CMD+Option+Iを、PCの場合はF12Option押して、何もクリックせずに要素の検査を開きます。
デフォルトでは、開発者ツールはブラウザの最下部にあるペインで開き、[要素]タブが表示されます。これは、私たちが探していた有名な要素の検査ツールです。
画面の下部にある要素の検査を操作するスペースがあまりないため、要素の検査ペインの右上にある「X」（クリックして閉じる）の近くにある3つの縦のドットをクリックします。ペイン）。 これで、ペインをブラウザの右側に移動する（右ドックビュー）か、完全に別のウィンドウでペインを開く（ドッキング解除ビュー）オプションが表示されます。
このチュートリアルでは、ブラウザウィンドウの右側にペインをドッキングして、作業スペースを増やしましょう。 左側の境界線にカーソルを合わせると、開発ツールパネルを広くしたり狭くしたりできます。 一度カーソルが表示されたら、ペインを左にドラッグして拡大するか、右にドラッグして縮小します。
Inspect Elementを使用しているので、指先でさまざまな便利なツールを使用して、任意のサイトを希望どおりに表示することができます。 このチュートリアルでは、[要素]、[エミュレーション]、および[検索]タブに焦点を当てます。
検索
[検索]タブでは、特定のコンテンツまたはHTML要素をWebページで検索できます。 少し隠されています。3つのドットをクリックしてから、[すべてのファイルを検索]をクリックして表示する必要があります。 そうすれば、Webページ内のすべてのファイルを検索して必要なものを探すことができます。
要素
「要素の検査」は、このチュートリアルで最も詳しく説明するツールであり、ほとんどのブラウザーで開発ツールを起動したときに最初に開くツールです。 または、他の場所を探索している場合は、開発ツールの[要素]タブをクリックして戻ります。
[探索]タブでは、Webサイトを構築したすべてのHTML、JavaScript、およびCSSを確認できます。 これは、Webサイトのソースを表示するのとほとんど同じですが、重要な違いが1つあります。それは、任意のコードを変更でき、開いているサイトで変更をリアルタイムで確認できることです。 コピーから書体に何でも変更してから、新しいデザインのスクリーンショットを撮るか、変更を保存できます（ [表示]> [開発者]> [ソースの表示]に移動してページをHTMLファイルとして保存するか、コードの変更をテキストエディターにコピーします）。 ただし、ページを再読み込みすると、すべての変更は永久に失われます。
エミュレーション
携帯電話をポケットから取り出さずに携帯電話でウェブページをプレビューしたいと思ったことはありませんか？ [エミュレーション]タブでは、一般的なデバイス用のプリセットや、画面の解像度とアスペクト比を設定するオプションを使用して、他のデバイスと同じようにWebページを表示できます。 エミュレートされたインターネット速度を設定して、ダイヤルアップでサイトが読み込まれる速度を確認することもできます。
また、少し隠されています。InspectElementを開き、電話のアイコンボタンをクリックして開始する必要があります。 次に、他の人がWebページをどのように体験するかを理解するための完璧なツールが得られます。
仕事に取り掛かる時が来ました。 最初に検索を使用してWebページ上のものを検索し、次にElementsを使用してサイトのテキストなどを編集し、最後にエミュレーションを使用して特定の場所から電話でサイトがどのように表示されるかを確認します。
Inspect ElementSearchを使用してサイト上のあらゆるものを検索する
あなたのお気に入りのサイトに何が入るのか疑問に思いますか？ 検索は、サイトのソースコード全体を読むことを除けば、そのための最良のツールです。 デフォルトの要素ビューを開き、 CTRL + FまたはCMD + Fを押してソースコードを検索することもできますが、完全な検索ツールを使用すると、ページ上のすべてのファイルを検索でき、CSSおよびJavaScriptファイル内のテキストを検索できます。記事に必要なアイコン画像を見つけます。
開始するには、ChromeでZapier.comをまだ開いていない場合は開き、Inspect Elementを開き、開発ツールペインの右上隅（閉じている「X」の近く）にある3つの縦のドットをクリックして、「すべてのファイルを検索してください。」 [検索]タブは、[開発ツール]ペインの下半分に表示されます。
Inspect Elementを開く方法を覚えていますか？ 右クリックして[ InspectInspect Element]をクリックするか、Macの場合はCommand + Option + i、PCの場合はF12を押します。
あなたがこのウェブページ上で検索する-つまり、検索フィールドでは、anything-何も入力することができ、それがこのペインに表示されます。 これをどのように使用できるか見てみましょう。
検索フィールドにmeta nameを入力し、 Enterキーを押すと、このページのコードに「メタ名」が出現するたびにすぐに表示されます。 これで、このページのメタデータ、SEOキーワード、そのターゲティング、およびGoogleが検索用にインデックスを作成できるように構成されているかどうかを確認できます。 これは、競合他社が何をターゲットにしているのかを確認し、サイトで何も混乱させていないことを確認する簡単な方法です。
別のクエリを試してみましょう。 meta name削除し、代わりに検索フィールドにh2と入力して、「Enter」 h2を押します。 ZapierのJavaScriptファイルの上部に「h2」が出現するたびに表示されますが、下部にスクロールすると、このページにすべての「h2」ヘッダーが表示されます。
色で検索できるので、デザイナーにとっても効果的なツールです。 検索フィールドに#ff4a00し、 #ff4a00を押します（すべての結果を表示するには、[大文字と小文字を区別しない]の横のチェックボックスを#ff4a00してください）。 これで、このサイトのCSSファイルとHTMLファイルに、Zapierのオレンジ色である＃ff4a00の色が毎回表示されるはずです。 次に、「color：＃ff4a00;」という行をクリックするだけです。 サイトのHTMLのその行にジャンプして、自分で微調整します（次のセクションで説明します）。
これは、サイトがブランドのスタイルガイドに従っていることをデザイナーが確認するための便利な方法です。 「検索」ツールを使用すると、デザイナーはWebページのCSSを簡単にチェックして、間違った要素に色が適用されていないか、Webページで間違ったフォントファミリが使用されているか、またはまだ使用しているかどうかを確認できます。あなたのサイトのどこかに古い色。
「検索」ツールは、間違いを見つけた場所や変更が必要なものを正確に表示できるため、開発者とのコミュニケーションを改善するのに最適な方法でもあります。 問題が存在する行番号を伝えるだけで、はるかに迅速に修正を取得できます。
または、Chromeのデベロッパーツールのコア部分であるElementsを使用して自分でウェブページを変更することもできます。
要素で何かを変える
フロントエンド開発者は、毎日Inspect Elementツールを使用して、Webページの外観を変更し、新しいアイデアを試します。あなたもそうすることができます。 Inspect Elementsを使用すると、サイトのCSSファイルとHTMLファイルに一時的な編集を追加することで、Webページの外観とコンテンツを微調整できます。
ページを閉じるか再読み込みすると、変更は失われます。 コンピューターでの変更のみが表示され、実際のWebサイト自体は編集されません。 そうすれば、自由に実験して何でも変更できます。次に、最適な変更をコピーして保存し、後で再び使用できるようにします。
それで何ができるか見てみましょう。
[開発ツール]ペインの[要素]タブをクリックします。さらにスペースが必要な場合は、[Esc]キーをタップして、前に開いていた検索ボックスを閉じます。 このページのHTMLが表示されます。これで、ソーセージの作り方がわかりました。
開発者ペインの左上隅に、正方形の上にマウスのアイコンが表示されます。 それをクリックすると、ページ上の変更したい要素を選択できます。 それでは、いくつか変更しましょう！
Webページのテキストを変更する
サイトのテキストを変更したいと思ったことはありませんか。おそらく、ホームページで新しいタグラインがどのように表示されるかを確認したり、Gmailのスクリーンショットからメールアドレスを削除したりしたいと思ったことはありませんか。 今、あなたはそうすることができます。
「正方形の上にあるマウス」アイコンをクリックしてから、ページ上の任意のテキスト（おそらく、Zapierホームページのタグライン）をクリックします。 開発ツールペインに、次のような青いハイライトのあるテキスト行が表示されます。
開発ツールペインで青色で強調表示されている[アプリの接続]テキストをダブルクリックすると、編集可能なテキストフィールドに変わります。
このテキストフィールドに好きなものを入力して（「Auriは天才です」は問題なく動作するはずです）、Enterキーを押します。 出来上がり！ Webページのテキストを変更しました。
ページを更新すると、すべてが通常に戻ります。
楽しい？ このページでさらにいくつか変更してみましょう。
開発ツールペインはページとともに再ロードされますが、閉じましょう。 ページの右上隅にある「X」を押します。
いいね。 次に、編集するテキストのすぐ上で、それを開いて戻します。 変更するページの部分を右クリックしてから、右クリックメニューの下部に表示される[要素の検査]または[要素の検査]リンクをクリックするだけです。
開発ツールペインが開くと、その文が自動的に強調表示されます。 かなりきちんとしていますね重要なのはささいなことです。
Zapierサイトでタグラインを選択したので、外観を変更しましょう。
要素の色とフォントを変更する
開発ツールペインのこの文の右側に、スタイル、計算済み、およびイベントリスナーの3つの追加タブがあるサブペインが表示されます。 それぞれ、この文がページ上でどのように見えるかを変更できます。 「スタイル」タブから始めましょう。
[スタイル]タブでいくつかの項目に取り消し線が引かれていることに気付くかもしれません。 つまり、これらのスタイルは、選択した要素に対してアクティブではないため、これらの値を変更しても効果はありません。 私たちの目的のためにこれらを無視することができます。
何かを変えてみましょう。 Inspect Elementの上部にある矢印アイコンをもう一度クリックし、ページの[SignUp]ボタンのすぐ下にあるテキストを選択します。 [スタイル]タブで[text-align]を見つけます（これを見つけるには少しスクロールする必要がある場合があります）。
現在は「center」に設定されていますが、「center」をダブルクリックして「 left 」と入力leftます。 これにより、テキストがページ上で左揃えになります。
それでは、色をいじってみましょう。 今回は、要素の検査でマウスアイコンを使用してボタンを選択し、[スタイル]タブで次の行を見つけます。
そして、「＃ff4a00」をダブルクリックします。 #4199ad （ #4199ad忘れないでください）、「Enter」を押します。
ボタンの色をオレンジからブルーに変更しました！ それでは、本当にクールなものを試してみましょう。
要素の状態を変更する
誰かがボタンやリンクにカーソルを合わせたりクリックしたりすると、ボタンやリンクがどのように表示されるかを知りたいですか？ Chrome Inspect Elementは、forceelement状態ツールを使用してそれを表示することもできます。 訪問者が要素にカーソルを合わせたり（ホバー状態）、要素を選択したり（フォーカス状態）、そのリンクをクリックしたり（訪問状態）すると、要素がどのように表示されるかを確認できます。
これを試してみましょう。 Zapierホームページでサインアップボタンを選択していることを確認してください。 次に、[要素]タブでそのコードを右クリックし、そのメニューで[ :active: ]を選択します。
これにより、ボタンが灰色に変わります。ボタンをクリックすると、Zapierのサイトに表示されます。
ここで、background-colorの値を#FF4A00に変更すると、ボタンの色がすぐに変わるはずです。
実験してみてください:hover:色を変更してから、右クリックメニューの:hover:チェックを外し、マウスをボタンの上にドラッグして、新しいボタンの色を確認します。
画像を変更する
Inspect Elementを使用すると、Webページ上の画像を簡単に変更することもできます。 Zapierサイトのスーパーヒーローの背景をNASAからの太陽フレアのこの劇的な写真と交換しましょう。
まず、このリンクをコピーして画像に貼り付けます。
https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg
次に、Zapierホームページの背景にあるInspect Elementを開き、コードでsignup-hero行を選択していることを確認します。 [スタイル]ペインで背景のURLリンクをダブルクリックし、上にコピーしたリンクを貼り付けます。
「Enter」を押して、すぐに違いを確認してください。
注：写真をGIFまたはビデオに変更することもできます。必要なのはファイルへのリンクだけで、ファイルを追加できます。
テキストの編集は便利で、画像の交換は楽しいです。色やスタイルを変更すると、サイトに加えたい変更をすばやくモックアップするのに役立つ場合があります。 しかし、その新しいタグラインとボタンのデザインはモバイルでどのように見えるでしょうか？
そこで、エミュレーションが登場します。これまでに確認したすべてのことをさらに適用できるのです。 方法を見てみましょう。
エミュレーションを備えた任意のデバイスでサイトをテストする
今日はすべてが敏感でなければなりません。 Webサイトは、もはやコンピューターだけで表示されるのではなく、電話、タブレット、テレビ、またはその他のあらゆる種類の画面で表示される可能性がこれまでになく高まっています。 新しいコンテンツやデザインを作成するときは、このことを常に念頭に置いておく必要があります。
エミュレーションは、さまざまなデバイス、ブラウザ、さらには場所を超えてWebサイトがユーザーにどのように表示されるかを概算するための優れたツールです。 これは、さまざまなデバイスやブラウザーでの実際のテストに代わるものではありませんが、すばらしいスタートです。
開発ツールペインでは、左上隅に小さな電話アイコンが表示されます。 クリックして。 これにより、ページが小さな電話スタイルのページに変わり、上部にメニューが表示されてサイズが変更されます。
小さなブラウザのサイズを変更して、タブレット、電話、またはさらに小さな画面でブラウジングした場合の外観を確認します。 または、のようなデフォルトのデバイス・サイズを選択するために上部にあるメニューをクリックしてiPad ProやiPhone 8 Plus控え-GO、後者を選択します。
Webページの画面はiPhone8 Plusのサイズに縮小され、グリッドの右上にある数字の横にある+アイコンをクリックすると、少しズームインできます。これは、誰かがズームインした場合のサイトの外観です。モバイル。
Webページエミュレーションの右端を右にドラッグして、ビューを拡大します。 何が起こるかわかりますか？ iPhone 8Plusの表示は終了しました。 グリッドに沿って画面をドラッグすると、画面サイズの変更に応じてWebページがどのように変化するかを確認できますが、ビューには以前に選択したデバイスモデルが反映されなくなります。
モデルのドロップダウンリストでこれをもう一度選択して、iPhone 8Plusのビューに戻りましょう。 ドロップダウンリストの横には、「ポートレート」という単語があります。 ご想像のとおり、これにより横向きと横向きを切り替えることができます。
これで、iPhone 8Plusで読んだ場合にこの投稿がどのように表示されるかを確認できます。 このWebページと画面解像度がどのように変化するかを確認するために、他のデバイスを自由に試してみてください。 これまでに説明した他のすべての開発ツールも、デバイスビューに反応します。 たとえば、Zapierのタグラインのテキストをもう一度選択します。
iPhone 8 Plusビューでは、このテキストは2emであるのに対し、コンピューターのデフォルトビューでは3emであることがわかります。
「em」は、周囲のテキストに対するテキストのサイズを自動的に変更できるフォントサイズの単位です。 たとえば、ブラウザに大きなカスタムフォント設定を持つユーザーがいるとします。 段落のフォントサイズを14pxに設定すると、そのユーザーにとってフォントは常に14pxになります。 ただし、段落のフォントサイズを1emに設定すると、ユーザーのブラウザはこの単位を使用して、テキストをユーザーの大きな設定に合わせて拡大縮小します。 携帯電話やタブレットは、テキストをうまくズームするためにこれを行います。
それでは、Apple iPadビューに切り替えて、上の「デバイス間でのテスト」ヘッダーを選択しましょう。 今回のフォントサイズは3emです。 タブレットの画面が大きいため、フォントサイズはデバイスの表示に基づいて変更され、コンピューターで使用されるデフォルトのサイズに戻りました。
モバイルデバイスセンサーをエミュレートする
マウスがWebページに小さな円として表示されるようになったことにお気づきかもしれません。 これにより、モバイルデバイスを使用しているかのようにページを操作できます。 ページを下にドラッグしているときにクリックすると、ブラウザの通常のようにテキストが強調表示されません。タッチスクリーンデバイスの場合と同じように画面が下にドラッグされます。 このビューを使用すると、Webページ上のタッチゾーンの大きさを確認できます。 これは、どのボタン、アイコン、リンク、またはその他の要素に指で簡単に触れることができるかを確認できることを意味します。
ブラウザを電話のように動作させることもできます。 「Esc」キーを押して、要素の検査で検索ペインを再度開きます。今度は、左側の3ドットメニューをクリックして、オプションのメニューを表示します。 センサーを選択して、ジオロケーション、オリエンテーション、タッチの3つの新しいツールを入手します。
タッチを使用すると、通常のマウスカーソルよりも指のように機能するデフォルトのサークルセレクターをオンまたはオフにできます。 オリエンテーションを使用すると、携帯電話を動かして物を動かすことができるオンラインゲームなどの動きに敏感なWebサイトを操作できます。 また、ジオロケーションを使用すると、別の場所にいるふりをすることができます。
カリフォルニア州マウンテンビューにあるGoogleの本社からこのサイトを見てみましょう。
[ジオロケーション座標をエミュレートする]の横のチェックボックスをオンにして、値37をLat =テキストフィールドに入力し、 122をLon =テキストフィールドに入力します。 キーボードのEnterキーを押します。
何も変わりませんよね？
これは、このページには現在地に応じて変化するコンテンツがないためです。 ただし、現在地を使用してローカライズされたコンテンツを表示するGroupon.comようなサイトで座標を変更すると、異なる結果が得られます。 別の場所にあるGoogle.comすると、別の国での休暇用に新しいGoogleロゴが表示されるか、少なくとも別の言語で結果が表示されます。
エミュレーションは、ユーザーの立場に立って、ユーザーがWebページに何を表示しているかを検討するための優れた方法であり、国際的なWebを探索するための楽しい方法です。
モバイルネットワークをエミュレートする
また、さまざまなネットワークでサイトを閲覧するのがどのようなものかを確認することもできます。おそらく、ユーザーが低速の3Gネットワークを使用している場合でもサイトが読み込まれるかどうかを確認できます。
試してみるには、Inspect Elementの検索タブの左側にある3つの円のボタンをもう一度クリックし、[ネットワーク条件]を選択します。 そこでは、高速または低速の3Gから選択するか、オフラインでインターネットなしでページがどのように機能するかを確認できます。 または、[追加... ]をクリックして、独自のテストを含めます（おそらく、ダイヤルアップインターネットをテストするために56Kbpsを追加します）。 ここで、ページをリロードすると、低速の接続でサイトがロードされるのにかかる時間と、ロード中のサイトの外観がわかります。 これは、遅い接続でより速くロードするようにサイトを改善する必要がある理由を示しています。
ユーザーエージェントを変更することもできます。「ユーザーエージェント」の横にある「自動的に選択」のチェックを外し、「Internet Explorer 7」を選択して、サイトが古いブラウザのレンダリングを変更するかどうかを確認します。 これは、Internet Explorerなどの別のブラウザーでのみ機能すると主張している場合でも、Webページをロードするための便利なハックでもあります。
課題
いくつかの課題で終わりましょう。 あなたが学んだことを見せてください！
CNN.comのヘッドラインを変更し、トレンド記事のヘッドラインのスクリーンショットをツイートしてください。
「ソースの表示」を使用してお気に入りのWebサイトを複製し、HTMLをいじって独自のWebサイトにします。
Webサイトがモバイルデバイスでどのようにレンダリングされるかを確認し、自分で修正することで何が改善できるかを開発者に示してください。
Zapierチームのマーケティングチームは、Inspect Elementを使用して、アプリレビューのスクリーンショットから個人情報を微調整し、設計チームはそれを使用して変更をモックアップし、さまざまな画面でどのように表示されるかを確認します。
Inspect Elementをどのように使用しますか？ 以下のコメントであなたの話を聞いてみたいです！
新しいハッキングスキルを楽しんでいますか？ コーディングなしでウェブサイトを構築する方法に関するガイドと、コーディングなしで優れたグラフィックスを作成する方法に関するコンパニオンガイドでさらに詳しく説明します。
このチュートリアルは、もともと2015年1月5日に公開されましたが、2017年6月6日と2018年1月25日に更新され、最新バージョンのGoogleChromeの手順と手順で再公開されました。