Mozilla Firefoxで[アイテムを調べる]オプションを使用する方法

コンテンツ

• ステージ
• パート1要素の検査
• パート2 HTMLコードを編集する

Firefoxの「アイテムを調べる」デベロッパーツールキットを使用すると、Webページに表示されるもののHTMLコードを正確に見つけることができます。これらのツールを使用すると、HTMLコードと添付のCSSスタイルシートは完全に編集可能になります。必要な変更を加えてテストし、ページを更新してWebページの元の外観に戻します。

ステージ

パート1要素の検査

1. 
   

   
   Firefoxを更新します（オプション）。 古いバージョンのFirefoxを使用している場合、ここで説明したすべての機能にアクセスできない場合があります。使用しているFirefoxのバージョンを確認して、最新のアップデートのダウンロードを自動的に起動します。
   • Firefox 9以前のバージョンには、アイテムの調査ツールがありません。

2. 
   

   
   選択したWebページの任意の要素を右クリックします。 画像、e、壁紙、またはその他のアイテムを右クリックできます。 2つのボタンがないマウスを使用している場合は、押しながら左クリックします Ctrlキー.

3. 
   

   
   ドロップダウンメニューで、[アイテムのレビュー]をクリックします。 ウィンドウの下部にツールバーが表示されます。このツールバーの下にもパネルが表示され、ページのHTMLコードが表示されます。

4. 
   

   
   
   
   ツールバーとパネルを特定します。 [アイテムの調査]を選択すると、ウィンドウの下部にいくつかのパネルが開きます。それらの名前と用途の詳細な説明を以下に示します。
   • 一番上の行は「ツールボックス」ツールバーです。そこにはいくつかの開発者ツールがありますが、左側のInspector's Longletにもっと興味があります。このガイドの期間中は、選択したままにしてください（青色のハイライト付き）。
   • このツールバーの下には、「ブレッドクラム」と呼ばれるHTML要素の単一行があり、選択した要素に対応するパス全体が表示されます。
   • この行の下のパネルには、ページの「タグビュー」とも呼ばれるHTMLツリーが表示されます。選択したアイテムのHTMLコードが強調表示され、このパネルの中央に配置されます。
   • 右側のパネルには、このページの対応するCSSスタイルシートが表示されます。

5. 
   

   
   別のアイテムを選択してください。 ツールバーが開いたら、別のアイテムを簡単に選択できます。以下に3つの方法を示します。
   • HTMLコードの行にカーソルを合わせて、対応する要素を強調表示します（Firefox 34以降が必要です）。この要素を選択するには、HTMLコードをクリックします。
   • ツールバーの左側にある「アイテムを選択」機能をクリックします。アイコンは四角形の上にカーソルがあります。ページ上にカーソルを移動してアイテムを強調表示し、クリックしてアイテムを選択します。

6. 
   

   
   コードを参照します。 HTMLパネルの任意の場所をクリックします。キーボードの左右の矢印を使用してコード内を移動します（これにはFirefox 39以降が必要です）。これは、手動で選択するには小さすぎるアイテムに役立ちます。
   • 灰色のHTMLコードは、ページに表示されていない要素に対応しています。その中には、コメント、いくつかのタグがあります CSSによって非表示にされたアイテムは設定を表示します。
   • コードの段落行の左側にある矢印を選択して、コンテンツを表示するかどうかを選択します。すべてのコード行を表示するには、AltキーまたはOptionキーを押しながらクリックします。

7. 
   

   
   
   
   アイテムを探します。 パンくずリストの右端にある検索バー（虫眼鏡アイコン）を見つけます。クリックして展開し、探しているHTMLコードの部分を入力します。入力すると、クエリに一致するアイテムのリストを含む小さなウィンドウが表示されます。アイテムをクリックして選択し、HTMLパネルにコードを表示します。

パート2 HTMLコードを編集する

1. 
   

   
   最初からやり直す場合は、ページを更新します。 Web開発ツールが初めての場合は、永続的な変更を加えることができないことに注意してください。変更は画面に表示され、ページを閉じるか、ループに入っている場合にのみ表示されます。何が起こるかわからなくても、実験をためらわないでください。

2. 
   

   
   HTMLコードをダブルクリックして、eを編集します。 HTMLコードの行をダブルクリックします。新しいeを入力し、Enterを押して変更を保存します。

3. 
   

   
   機能をクリックすると、さらにオプションが表示されます。 Breadcrumbsツールバーは、完全なHTMLツリーと一番上のツールバーの間にあることに注意してください。この行の項目のいずれかを押して、拡張メニューを開きます。これらのオプションの完全なガイドは次のとおりです。
   • 「HTMLとして編集」は、各行を個別に削除するのではなく、HTMLツリーに含まれるタグとそのすべてを編集可能にします。
   • 「HTMLの内側にコピー」はタグのすべてのコンテンツをコピーし、「HTMLの外側にコピー」もタグをコピーします（
     若しくは ).
   • [貼り付け...]を使用すると、タグの前や最初の女の子タグの後など、貼り付け先のオプションがいくつか表示されます。
   • ：hover 、: active、および：focusは、ユーザーが操作したときにアイテムの外観を変更します。正確な効果は、CSSスタイルシート（右ペインで編集可能）によって決まります。

4. 
   

   
   クリックして移動します。 コード要素の配置を変更するには、破線が表示されるまでHTMLコードをクリックします。ツリーを上下に移動し、点線が正しい場所にあるときにクリックをドロップします。
   • これにはFirefox 39以降のバージョンが必要です。

5. 
   

   
   開発ツールバーを閉じます。 これらの風変わりなウィンドウをすべて閉じるには、CSSパネルの上にあるツールバーの右端にあるXをタップします。