Mozilla FirefoxでInspect要素を使用する方法

ページ名：Mozilla FirefoxでInspect要素を使用する方法

FirefoxのInspect Elementデベロッパーツールを使えば、Webページに表示されているあらゆるもののHTMLコードをピンポイントで確認できます。これらのツールを開けば、HTMLと付随するCSSスタイルシートは完全に編集可能です。好きな変更を試し、ページを更新すると、意図したウェブページの外観に戻ります。

パート1

要素の検査

  1. ウェブページの要素を右クリックします。画像、テキスト、背景、その他の要素を右クリックできます。2ボタンマウスがない場合は、Controlキーを押しながら左クリックします。
  2. ドロップダウンメニューから「要素の検査」をクリックします。ウィンドウの下部にツールバーが表示されます。ツールバーの下には、ページのHTMLコードを表示するペインも表示されます。
  3. ツールバーとペインを確認する要素の検査」をクリックすると、ウィンドウの下部にいくつかのペインが開きます。ここでは、それらの用途と名前を説明します：
    • 最上段はツールボックスツールバーです。これにはいくつかの開発ツールがありますが、ここでは左側のInspectorに注目します。このガイド全体では、これを選択（青くハイライト）しておいてください。
    • ツールバーの下には、HTML要素のBreadcrumbsの行が1つあり、選択した要素に関連するフルパスが表示されます。
    • この行の下のペインには、ページのHTMLツリーまたは「マークアップ・ビュー」が表示されます。このペインでは、選択した要素のHTMLがハイライトされ、中央に表示されます。
    • 右側のペインには、このページのCSSスタイルシートが表示されます。
  4. 別の要素を選択します。ツールバーを開いたら、別の要素を選択するのは簡単です。ここでは3つの方法を紹介します：
    • HTMLの行にカーソルを合わせると、対応する要素がハイライトされます（Firefox 34+が必要です）。 HTMLをクリックして、その要素を選択します。
    • ツールバーの左端にある要素選択ツールをクリックする。ページ上でカーソルを動かして要素をハイライトし、クリックして要素を選択する。
  5. コード内を移動する。HTMLペインの任意の場所をクリックします。キーボードの左右の矢印を使用してコードを移動します（Firefox 39以上が必要です）。 これは、手で選択するには小さすぎる要素に便利です。
    • 灰色のHTMLは、ページ上に表示されない要素に関するものです。これには、コメント、<head>などの特定のノード、CSSのdisplayプロパティで非表示になっている要素が含まれます。
    • コンテナの左側にある矢印をクリックすると、コンテナの内容が展開または非表示になります。すべての内容を展開するには、Altまたはoptionを押しながらクリックします。
  6. 要素を検索します。パンくず列の右端にある検索バー（虫眼鏡アイコン）を探します。これをクリックして展開し、探しているHTMLコードを入力します。入力すると、一致する要素のリストがポップアップで表示されます。クリックしてその要素を選択し、HTMLペインをそのコードまでスクロールします。
パート2

HTMLを編集する

  1. いつでもやり直すには、ページを更新してください。ウェブデベロッパーツールを初めて使う場合は、永久的な変更は行われないことを理解してください。編集した内容は画面上に表示されるだけで、ページを閉じるか更新するまで表示されません。何が起こるかわからなくても、ためらわずに試してみてください。
  2. HTMLをダブルクリックしてテキストを編集する。HTMLの行をダブルクリックします。新しいテキストを入力し、Enterキーを押して変更を保存します。
  3. パンくずをクリックしたままにすると、さらにオプションが表示されます。パンくずツールバーは、完全なHTMLツリーと上部ツールバーの間に挟まれていることを覚えておいてください。この列の要素をクリックしたままにすると、豊富なメニューが表示されます。以下はこれらのオプションの不完全なガイドです：
    • "HTMLとして編集 "は、各行を個別に編集する代わりに、ノードとそのすべての内容をHTMLツリーで編集可能にします。
    • "Copy Inner HTML "はノードのすべての内容をコピーし、"Copy Outer HTML "はノードもコピーします（<div>や<body>など）。
    • "貼り付け →" は、このノードの前やノードの最初の子の後など、貼り付ける場所のいくつかのオプションにつながります。
    • :hover、:active、:focus は、ユーザが要素と相互作用したときに、要素の外観を変更します。正確な効果は、CSSスタイルシート（右側のペインから編集可能）によって決定されます。
  4. ドラッグ＆ドロップ。コード内の要素を並べ替えるには、破線が表示されるまでHTMLをクリックしたままにします。ツリーの上下に移動させ、破線が希望の場所に来たら放します。
    • これにはFirefox 39以降が必要です。
  5. 開発者ツールバーを閉じる。これらの派手なウィンドウをすべて閉じるには、ツールバーの右端、CSSペインの上にあるXを押してください。
この記事は、CC BY-NC-SAの下で公開された「 How to Use Inspect Element in Mozilla Firefox 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン： このページをSNSに投稿するのに便利です。

コメント

返信元（返信をやめる）

※ 悪質なユーザーの書き込みは制限します。
最新を表示する
NGIDの確認

NG表示方式

NGID一覧