From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../how_to/edit_css_filters/index.html | 36 ++ .../how_to/edit_css_shapes/index.html | 89 +++++ .../how_to/examine_and_edit_css/index.html | 244 +++++++++++++ .../how_to/examine_and_edit_html/index.html | 387 +++++++++++++++++++++ .../examine_and_edit_the_box_model/index.html | 41 +++ .../how_to/examine_event_listeners/index.html | 33 ++ .../how_to/examine_flexbox_layouts/index.html | 80 +++++ .../how_to/examine_grid_layouts/index.html | 135 +++++++ files/ja/tools/page_inspector/how_to/index.html | 13 + .../how_to/inspect_and_select_colors/index.html | 26 ++ .../how_to/open_the_inspector/index.html | 23 ++ .../reposition_elements_in_the_page/index.html | 22 ++ .../how_to/select_an_element/index.html | 36 ++ .../select_and_highlight_elements/index.html | 32 ++ .../how_to/use_the_inspector_api/index.html | 44 +++ .../index.html | 16 + .../how_to/view_background_images/index.html | 12 + .../page_inspector/how_to/view_fonts/index.html | 233 +++++++++++++ .../how_to/visualize_transforms/index.html | 12 + .../index.html | 24 ++ .../index.html | 118 +++++++ .../animations_examples/index.html | 86 +++++ .../how_to/work_with_animations/index.html | 180 ++++++++++ 23 files changed, 1922 insertions(+) create mode 100644 files/ja/tools/page_inspector/how_to/edit_css_filters/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/index.html create mode 100644 files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/ja/tools/page_inspector/how_to/open_the_inspector/index.html create mode 100644 files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html create mode 100644 files/ja/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html create mode 100644 files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html create mode 100644 files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html create mode 100644 files/ja/tools/page_inspector/how_to/view_background_images/index.html create mode 100644 files/ja/tools/page_inspector/how_to/view_fonts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/visualize_transforms/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/index.html (limited to 'files/ja/tools/page_inspector/how_to') diff --git a/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html b/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html new file mode 100644 index 0000000000..5f9a89304f --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_css_filters/index.html @@ -0,0 +1,36 @@ +--- +title: CSS フィルターを編集する +slug: Tools/Page_Inspector/How_to/Edit_CSS_filters +tags: + - CSS + - DevTools + - Filters + - Page Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_filters +--- +
{{ToolsSidebar}}

ルールビュー で、filter プロパティの隣に丸い灰色と白色のマークを表示します:

+ +

+ +

このマークをクリックすると、フィルターエディターが開きます:

+ +

+ +

フィルターを追加、削除、編集、およびドラッグしてフィルターの適用順序を変更できます:

+ +

{{EmbedYouTube("yws01SEPTvg")}}

+ +

フィルターのプリセットを保存する

+ +

Firefox 42 より、プリセットのリストにフィルターを追加することもできます:

+ +

+ +

現在のフィルターをプリセットのリストに保存します:

+ +

{{EmbedYouTube("bHcfLlZE8T8")}}

+ +

保存したフィルターを、新たな要素に対して適用できます:

+ +

{{EmbedYouTube("PK85L7ztQto")}}

diff --git a/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html new file mode 100644 index 0000000000..485ac68a01 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -0,0 +1,89 @@ +--- +title: CSS シェイプのパスを編集する +slug: Tools/Page_Inspector/How_to/Edit_CSS_shapes +tags: + - CSS + - DevTools + - Page Inspector + - Rules view + - Tools + - highlighter + - shapes +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes +--- +
{{ToolsSidebar}}
+ +

シェイプパスエディターは、CSS の {{cssxref("clip-path")}}、{{cssxref("shape-outside")}} プロパティと {{cssxref("<basic-shape>")}} 値を使用して作成したシェイプの確認や編集を支援するツールです。このガイドでは、ツールで使用可能なオプションを見ていきます。

+ +

シェイプパスエディターを起動および終了する

+ +

シェイプパスエディターは CSS ルールパネルからアクセスできます。パネルの開き方は インスペクターを開く のガイドで説明しています。要素を選択すると、shape-outside など有効な値のそばにシェイプのアイコンが表示されます。

+ +

+ +

アイコンをクリックすると、シェイプをハイライト表示するエディターが現れます。

+ +

+ +

アイコンを再度クリックするとエディターが閉じます。あるいは別の要素を選択すると、別のエディターが現れます。シェイプパスエディターは、ページの再読み込み後に維持されません。再読み込みすると、もう一度要素を選択しなければなりません。

+ +

エディターが表示する線を理解する

+ +

ページ上のシェイプを選択するとシェイプパスエディターが、作成されたパスの理解を支援する線を表示します。

+ + + +

+ +

基本シェイプを編集する

+ +

この機能は、編集する基本シェイプの種類に応じて異なるツールが提供されます。アイコンをクリックしてシェイプパスエディターを起動すると、この機能を使用できます。また、コンテキストメニュー (Ctrl または Cmd + クリック) から付加機能を使用できます。

+ +

circle()

+ +

shape-outside の値が circle() である場合は、円形の基本シェイプ を作成します。circle() 値の隣にあるシェイプアイコンをクリックすると、シェイプをハイライト表示して、円のサイズ変更と中心の移動を行う機能を提供します。マージンボックスを超えるように円を移動したりサイズを変更したりすると、マージンボックスによって輪郭が切り抜かれます。

+ +

+ +

シェイプの編集に応じて、ルールパネルで circle() の値が変化します。これらの値をコピーしてスタイルシートに貼り付けると、編集後のパスで新しいシェイプを作成できます。

+ +

ellipse()

+ +

shape-outside の値が ellipse() である場合は、楕円形の基本シェイプ を作成します。シェイプパスエディターは ellipse() 値でも、circle() とほぼ同様に機能します。楕円形はつぶれた円形ですので、シェイプのアイコンをクリックすると水平および垂直方向にサイズを変更する機能を提供します。

+ +

+ +

inset()

+ +

shape-outside の値が inset() である場合は、inset 型の基本シェイプ を作成します。これは、マージンボックスの中で内容物を切り抜くオフセット値によってシェイプを作成できます。

+ +

シェイプアイコンをクリックすると、矩形のそれぞれの辺を対象にしたシェイプパスエディターが起動しきます。辺をドラッグすると、オフセット値の top、right、bottom、left が更新されます。

+ +

+ +

polygon()

+ +

shape-outside の値が polygon() である場合は、多角形の基本シェイプ を作成します。これは基本シェイプでもっとも複雑な値であり、シェイプを編集する際にツールが多くの機能を提供します:

+ + + +

+ +

シェイプを移動および拡大縮小する

+ +

ハイライト表示したシェイプで付加機能を使用できます。シェイプのアイコンを Ctrl または Cmd + クリックすると、シェイプの拡大・縮小や移動が可能なハイライト表示に替わります。こちらも、マージンボックスの境界を超える部分は切り抜かれます。

+ +

+ +

多角形シェイプでは、軸にそって回転させる機能も提供します。

+ +

ブラウザーのサポート

+ +

シェイプパスエディターは現在、{{cssxref("clip-path")}} で生成したシェイプで機能します。Firefox 62 では {{cssxref("shape-outside")}} で生成したシェイプでも機能します。

diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..7390574960 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,244 @@ +--- +title: CSS の調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}
+ +

CSS ペイン で、ページの CSS の調査や編集を行えます。

+ +

CSS ルールの調査

+ +

ルールビュー では選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:

+ +

+ +

未サポートや無効なスタイルの隣に、警告アイコンを表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:

+ +

+ +

ルールの表示

+ +

ここでは各ルールを、セレクターのリストと property:value; の宣言という形式で、スタイルシートのように表示します。

+ +

+ + + +

Firefox 52 より display: grid 宣言がある要素で、グリッドのアイコン () が表示されます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します。詳しくは グリッドレイアウトを調査する をご覧ください。

+ +

ユーザーエージェントのスタイル (すなわち、ブラウザーのデフォルトの CSS ルール) を表示するには、開発ツールのオプション パネルで "ブラウザー CSS を表示" を有効化します (この設定は 計算済みビュー の [ブラウザー CSS] チェックボックスとは独立した設定ですので注意してください)。

+ +

ユーザーエージェントのスタイルは背景が異なり、ファイル名と行番号のリンクに接頭辞 (ユーザーエージェント) がつきます:

+ +

+ +

要素 {} ルール

+ +

ルール一覧の先頭にある 要素 {} ルールは、本物の CSS ルールではありません。これは、要素の {{htmlattrxref("style")}} 属性で割り当てられた CSS プロパティを表します。

+ +

Firefox 52 より標的のアイコン () も表示しており、これはページで現在選択している要素を強調表示するための便利な手段です。

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

ルールのフィルタリング

+ +

ルールビューの上部に "スタイルを絞り込み" と記載されたボックスがあります:

+ +

+ +

ここに入力すると以下のようになります:

+ + + +

+ +

検索ボックス末尾の "X" 印をクリックすると、フィルターを削除します。

+ +
+

ルールビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ + + +

デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、color だけでなく border-bottom-color や background-color を含む宣言も強調表示します:

+ +

+ +

`color` のように検索語をバッククォートで括ると、完全一致に限定して検索します:

+ +

+ +

ショートハンドプロパティを展開する

+ +

ショートハンドプロパティ のそばにある三角印をクリックすると、関連するロングハンドプロパティを表示するように展開できます。

+ +

疑似要素を表示する

+ +

選択した要素に以下の 疑似要素 が適用されている場合に、それらをルールビューで表示します:

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

選択した要素に適用している疑似要素がある場合は、選択した要素より前にそれらを表示します。ただし、展開しない状態で隠されています:

+ +

+ +

三角印をクリックすると、疑似要素を表示します:

+ +

+ +

:hover、:active、:focus を設定する

+ +

フィルターボックスの右側にボタンがあります:

+ +

+ +

ボタンをクリックすると 3 つのチェックボックスが現れます。これを使用して、選択した要素に {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} の各疑似クラスを設定できます:

+ +

+ +

この機能は、HTML ビューのポップアップメニュー から使用することもできます。

+ +

いずれかの疑似クラスを設定するとマークアップビューで、疑似クラスが適用されたすべてのノードの隣に橙色の印を表示します:

+ +

+ + + +

各ルールの右上に、ソースファイルの名前と行番号をリンクとして表示します。このリンクをクリックすると、ファイルを スタイルエディター で開きます。

+ +

ソースファイルの場所をコピーできます。リンクを右クリックして [URL をコピー] を選択してください。

+ +

インスペクターは CSS ソースマップを理解します。ソースマップをサポートする CSS プリプロセッサーを使用しており、また スタイルエディターの設定 でソースマップのサポートを有効にしている場合は、生成された CSS ではなく元のソースファイルへのリンクになります。CSS ソースマップのサポートについて、詳しくは スタイルエディターのドキュメント をご覧ください。

+ +

オーバーライドされた宣言

+ +

CSS 宣言がよりウェイトの大きい別の CSS ルールにオーバーライドされた場合、オーバーライドされた宣言に打ち消し線を表示します。

+ +

オーバーライドされた宣言の隣に拡大鏡のアイコンがあります。アイコンをクリックすると、カレントノードに適用されているプロパティで、同じプロパティを設定しようとしたものだけを表示するようにルールビューをフィルタリングします。これは、そのプロパティのカスケードの全体像です。

+ +

どのルールが宣言をオーバーライドしているかを、簡単に確認できます:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

計算済み CSS の調査

+ +

選択した要素向けに計算された CSS を確認するには、計算済みビュー に切り替えてください。ここでは選択した要素について、各 CSS プロパティの計算済みの値を表示します:

+ +

+ +

Tab を使用して、これらを選択できます。また Firefox 49 より、これらのプロパティについて詳しい情報を確認できます。プロパティを選択して F1 を押下すると、MDN のリファレンスページが開きます。

+ +

プロパティ名の隣にある三角印をクリックする (または選択中に Enter または Space を押下する) と、その値を設定したルールおよびそのルールが存在するソースファイルのファイル名と行番号を表示します:

+ +

+ +

デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見るには、[ブラウザー CSS] チェックボックスをクリックしてください。Tab を使用してファイル名/行番号に移動できます。そして Enter/Return を押下すると、関連するファイルを スタイルエディター で開きます。

+ +

検索ボックスに入力すると、その場で一覧を絞り込みます。例えばフォント関連の設定だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティのみ表示します。同様に、プロパティの値も検索できます。フォントを "Lucida Grande" に設定したルールを探すには、フォント名を検索ボックスに入力します。

+ +
+

計算済みビューで Ctrl / Cmd + F を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、Esc を押下すると入力内容を削除できます。

+
+ +

ルールの編集

+ +

ルールビューで宣言またはセレクターをクリックすると、ルールを編集して結果を直ちに確認できます。また、Tab を使用して別の既存プロパティや値を選択でき、Enter または Space を押下するとそれらを編集できます。新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。

+ +

プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。Tab を押下して現在の候補を受け入れるか、↑ および ↓ を押下してリスト内を移動します。デフォルトで選択される項目は、入力した文字から始まるプロパティでもっとも一般的なものです。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:

+ +

+ +

プロパティに対して無効な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンを表示します。

+ +

ルールビューで編集した内容が スタイルエディター に反映されます。逆も同様です。実施した変更点は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

+ +

CSS を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

+ +

+ +

CSS 変数のオートコンプリート

+ +

CSS で定義した変数に応じて、CSS 変数名 のオートコンプリートを行います。プロパティの値に var( と入力してダッシュ (-) を押下すると、CSS で宣言した変数をオートコンプリートのリストに表示します。Firefox 61 より、それぞれの変数にどの色の値が保存されているかを明確にするために色見本を表示します。

+ +

+ +

さらに、CSS 変数名にマウスポインターを載せると、変数に保存されている色の値をツールチップで表示します ({{bug(1431949)}})。

+ +

+ +

キーボードショートカットで編集する

+ +

編集中は、矢印キーや Page Up/Down キーを (ほかのキーと組み合わせて) 使用して数値のルールを増減できます:

+ + + +

+ +

ルールの追加

+ +

ルールビューでルールを追加できます。右クリックで表示されるコンテキストメニューで [新しいルールを追加] を選択してください。選択中のノードにマッチするセレクターの配下に、新たな CSS ルールを追加します。

+ +

+ +

また、同じことができるボタンもあります:

+ +

+ +

ルールをコピーする

+ +

ルールビューのコンテキストメニュー項目を使用して、ルールやルールの一部分をコピーできます:

+ + + +

+ +

関連情報

+ + diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..243421f8fe --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,387 @@ +--- +title: HTML の調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +tags: + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +
{{ToolsSidebar}}
+ +

HTML ペイン で、ページの HTML の調査や編集を行えます。

+ + + +

HTML パンくずリスト

+ +

HTML ペインの下部に、パンくずリストのツールバーがあります。これは選択した要素を含む枝の、ドキュメント内での階層構造を表します:

+ +

+ +

パンくずリストにマウスポインターを載せると、その要素をページ上でハイライト表示します。

+ +

パンくずリストの キーボードショートカット があります。

+ +
+

Firefox 48 より前のバージョンでは、パンくずリストのツールバーがマークアップペインの上にありました。

+
+ +

検索

+ +

Firefox 45 より、インスペクターの検索ボックスは、カレントドキュメントおよびすべてのフレーム内のマークアップから検索します。

+ +

検索ボックスをクリックして広げるか、Ctrl + F または Mac で Cmd + F を押下して、マークアップの検索を始めます。

+ +

検索ボックスに入力すると、検索文字列にマッチする class 属性や id 属性を表示するオートコンプリートをポップアップします:

+ +

+ +

↑ および ↓ キーを押下すると候補を行き来でき、Tab で選択中の候補を選択、さらに Enter でその属性を持つ最初のノードを選択します。

+ +

オートコンプリートを選択せずにセレクターなしの検索文字列を入力すると、すべての属性名および属性値、ノードのテキストコンテンツを含むドキュメントの全文から検索します。

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

マッチした箇所を巡回するには、Enter を押下します。Firefox 48 より、Shift + Enter を使用して、マッチした箇所を逆方向に巡回できます。

+ +

HTML ツリー

+ +

ペインの残りの部分に、ページの HTML をツリー形式で表示します (この UI はマークアップビューとも呼ばれます)。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。

+ +

The new Firefox 57 inspector HTML tree.

+ +

ツリー内のノードにマウスポインターを載せると、その要素をページ上でハイライト表示します。

+ +

display: none を使用して非表示にしているノードは、淡色で (例えば {{HTMLElement("head")}} などレンダリングされない要素と同様に) 表示します。

+ +

Firefox 53 より、内容物が大きなノードが折りたたまれているとき、開始タグと終了タグの間に省略記号を表示します。Firefox 53 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します:

+ +
+

メモ: HTML ツリーで使用できる便利なキーボードショートカットがいくつかあります - HTML ペインのキーボードショートカットリストをご覧ください。

+
+ +

::before と ::after

+ +

Firefox 35 より、{{cssxref("::before")}} および {{cssxref("::after")}} を使用して追加した疑似要素を調査できます。

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

カスタム要素定義

+ +

カスタム要素を含むページでインスペクタを開くと、デバッガでカスタム要素のクラス定義を表示できます。

+ +
    +
  1. 要素を検査します
    2. +
  2. custom という単語をクリックします。
    3. +
+ +

+ +

要素のクラスのソースがデバッガに表示されます。

+ +

+ +

ホワイトスペースのみのテキストノード

+ +
Firefox 52 の新機能
+ +

ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。

+ +

通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。

+ +

これらの自動生成されたテキストノードは インラインレベル のノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。

+ +

Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 () で表して、マウスポインターを載せると説明のツールチップを表示します:

+ +

+ +

https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html のデモで、実際の動作をご覧ください。

+ +

仮想ルート

+ +

DOM に存在する仮想ルートは、通常の DOM と同じ方法で HTML ページに公開されます。仮想ルートは #shadow-root というノードによって表されます。拡張矢印をクリックすると、仮想 DOM の完全な内容が表示され、ページの DOM の他の部分と同様の方法で含まれるノードを操作できます 限られたフィーチャセット - 仮想 DOM ノードのドラッグアンドドロップや削除はできません。

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

仮想 DOM に "slotted" 要素が含まれている場合({{htmlelement("slot")}} 要素の内部に挿入された後の slot 属性を持つ要素 - これらの使用方法の説明については、slot に柔軟性を追加するを参照してください)、"slotted" 要素は対応する {{htmlelement("slot")}} 要素の内部に表示され、その横に "公開" リンクが表示されます。「公開」リンクをクリックすると、仮想 DOM の外に存在する slot 属性を持つ要素が強調表示されます。

+ +

A view of a shadow root shown inside the DOM tree in the Firefox DevTools

+ +

これは <slot> 要素があり、そのコンテンツのソースを見つけることができない場合に非常に便利です。

+ +
+

メモ: 仮想 DOM 検査は Firefox 61 で実装されましたが、現在は dom.webcomponents.shadowdom.enabled プレフィックスの後ろに隠れています。現在、Firefox 63 のようになっているプラットフォームで Web コンポーネント/仮想 DOM が利用可能になると、この機能が有効になります。

+
+ +

要素のポップアップコンテキストメニュー

+ +

ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、{{anch("Context menu reference", "コンテキストメニューリファレンス")}} のコマンド説明を確認できます:

+ + + +

* これらの項目は特定の状況に限り表示されます。例えば [スタイルエディターでファイルを開く] は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。

+ +

コンテキストメニューリファレンス

+ +
+

注記: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HTML として編集要素の HTML を編集する
(コピー) innerHTML要素の innerHTML をコピーする
(コピー) outerHTML +

要素の outerHTML をコピーする

+ +

Ctrl + C (Mac では Cmd + C) を押下すると同じことができます。

+
(コピー) 一意なセレクタ/CSS セレクター要素を一意に選択する CSS セレクターをコピーする
(コピー) CSS パス要素へのフルパスを表す CSS セレクターをコピーする
(コピー) 画像のデータ URI選択した要素が画像である場合に、画像を data:// URL としてコピーする
(Copy) 属性要素の属性をコピーする
DOM プロパティを表示常時表示コンソール を開いて、選択中の要素を 調査 するために "inspect($0)" コマンドを実行する
コンソールで使う +
+

Firefox 43 の新機能

+
+ 現在選択しているノードを temp0 という名前の変数 (temp0 がすでに使用中である場合は、temp1 などを使用) に代入して 常時表示コンソール を開くことにより、コンソールのコマンドラインを使用してノードと対話できます。
すべて展開 +
+

Firefox 44 の新機能

+
+ ツリービューで、選択した要素および配下の要素をすべて展開します。これは、要素の隣にある展開用矢印を Alt キーを押下しながらクリックすることと同じです。
折りたたむ +
+

Firefox 44 の新機能

+
+ ツリービューで、選択した要素を折りたたみます。これは、展開されている要素の展開用矢印をクリックすることと同じです。
(貼り付け) innerHTMLクリップボード内のコンテンツを、ノードの innerHTML として貼り付ける
(貼り付け) outerHTMLクリップボード内のコンテンツを、ノードの outerHTML として貼り付ける
(貼り付け) 前クリップボード内のコンテンツを、ノードの直前に貼り付ける
(貼り付け) 後クリップボード内のコンテンツを、ノードの直後に貼り付ける
(貼り付け) 最初の子要素としてクリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける
(貼り付け) 最後の子要素としてクリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける
この要素の位置にスクロール +

選択したノードを表示するように、ページをスクロールする

+ +

Firefox 44 よりキーボードショートカット S でも、選択した要素の位置にスクロールします。

+
ノードのスクリーンショットを撮影選択したノードのスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。スクリーンショットを撮影する をご覧ください。
新しいノードを作成選択中の要素の最後の子要素として、空の <div> 要素を作成します。新しいノードを挿入する をご覧ください。
ノードを複製 +
+

Firefox 44 の新機能

+
+ 要素をコピーして、当該要素の直後へ挿入します。
ノードを削除要素を DOM から削除する
属性/属性を追加 +
+

Firefox 44 の新機能

+
+ 要素に属性を追加する
属性/属性を編集 +
+

Firefox 44 の新機能

+
+ (属性でメニューを開いた場合のみ) 属性を編集する
属性/属性を削除 +
+

Firefox 44 の新機能

+
+ (属性でメニューを開いた場合のみ) 属性を削除する
リンクを新しいタブで開く(href 属性など、リンク上でメニューを開いた場合のみ) リンク先のアイテムを新しいタブで開く
デバッガーでファイルを開く(JS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをデバッガーで開く
スタイルエディターでファイルを開く(CSS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをスタイルエディターで開く
リンクの URL をコピー(URL 上でメニューを開いた場合のみ) URL をコピーする
:hover:hover CSS 疑似クラスを設定する
:active:active CSS 疑似クラスを設定する
:focus:focus CSS 疑似クラスを設定する
+ +

HTML として編集

+ +

HTML ペインで、HTML (タグ、属性、内容物) を直接編集できます。編集したい要素をダブルクリックして、編集してください。Enter キーを押下すると、変更点が直ちに反映されます。

+ +

要素の outerHTML を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。

+ +

Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:

+ +

+ +

コピーと貼り付け

+ +

ポップアップメニュー を使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。

+ +

ドラッグ・アンド・ドロップ

+ +

HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

Firefox 44 より、Esc キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。

+ +

新しいノードを挿入する

+ +
Firefox 48 の新機能
+ +

Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:

+ +

+ +

このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <div> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。

+ +

最後に子要素を追加しても効果がないタイプの要素 (例えば <html> や <iframe> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<div> を挿入することが無効である場所 (<style> や <link> など) では有効になります。このような場合は、要素をテキストとして挿入します。

diff --git a/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..64ca2fbbda --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,41 @@ +--- +title: ボックスモデルの調査と編集 +slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +tags: + - Guide + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +
{{ToolsSidebar}}

ボックスモデルの確認

+ +

要素選択ボタン を押しているとき、ページ上で要素にマウスポインターを載せると、要素の ボックスモデル をオーバーレイで表示します:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

HTML ペインで要素のマークアップにマウスポインターを載せた場合も、同様にオーバーレイで表示します:

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

要素がインライン要素であり複数の行ボックスに分かれている場合は、要素を構成するそれぞれの行ボックスをハイライト表示します:

+ +

+ +

ボックスモデルビュー

+ +

要素を選択すると、ボックスモデルビュー でボックスモデルを詳しく調べることができます:

+ +

+ +

値にマウスポインターを載せると、その値がどのルールに由来するかを示すツールチップを表示します:

+ +

+ +

ボックスモデルビューでボックスモデルの一部にマウスポインターを載せると、ページ上で対応する部分をハイライト表示します:

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

ボックスモデルの編集

+ +

ボックスモデルビュー では値の編集も可能であり、変更結果はページへ即座に反映します:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html b/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..da04aa7673 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_event_listeners/index.html @@ -0,0 +1,33 @@ +--- +title: イベントリスナーの調査 +slug: Tools/Page_Inspector/How_to/Examine_event_listeners +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +

{{ToolsSidebar}}

+ +

インスペクタでは HTML ペインの要素の横に「イベント」という単語が表示され、イベントリスナーがバインドされています。

+ +

+ +

アイコンをクリックすると、この要素にバインドされているすべてのイベントリスナーを一覧表示するポップアップが表示されます。

+ +

各行には以下が含まれます。

+ + diff --git a/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html b/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html new file mode 100644 index 0000000000..27c8d283c5 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_flexbox_layouts/index.html @@ -0,0 +1,80 @@ +--- +title: 'CSS FlexBox インスペクタ: Flexbox レイアウトを調査する' +slug: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts +tags: + - flexbox + - インスペクタ + - ガイド + - ツール +translation_of: Tools/Page_Inspector/How_to/Examine_Flexbox_layouts +--- +
{{ToolsSidebar}}
+ +

FlexBox Inspector を使用すると、Firefox DevTools を使用して CSS Flexbox のレイアウトを調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。

+ +

Flex コンテナの検出

+ +

ページ上の HTML 要素に display: flex が適用されている場合、flexbox のレイアウト機能に簡単にアクセスできるように DevTools にいくつかの機能が用意されています。

+ +

HTML ペインから

+ +

HTML ペインでは、flexbox コンテナを使用してレイアウトされた要素の横に flex という単語があります。

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

CSS ペインから

+ +

CSS ペインのルールビューでは、display: flex 宣言のインスタンスは flex という単語の隣に小さなフレックスボックスアイコン を表示します。アイコンをクリックすると、flexbox の子要素の詳細がどのように表示されるかを示すオーバーレイの表示が切り替わります。

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

アイコンをクリックすると、要素の上に表示されるページ上のオーバーレイの表示が切り替わり、グリッド線とトラックの位置が表示されます。

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

他の要素を選択するとオーバーレイが表示されるので、関連する CSS プロパティを編集して flexbox がどのように影響を受けているかを確認できます。

+ +

レイアウト Flex コンテナセクション

+ +

ページが1つ以上の flexbox コンテナで構成される場合、CSS ペインのレイアウトビューには、コンテナのコンポーネントを表示するための多数のオプションを含む「Flex コンテナ」セクションが含まれています。これらの詳細については、以下のセクションで調べることができます。

+ +
+

メモ: レイアウトビューはページインスペクタの右側のペインにあるレイアウトタブの下にあります。上記および以下のスクリーンショットは、これに到達する方法に関するさらなるヒントを与えるはずです。

+
+ +

Flex コンテナオプション

+ +

レイアウトビューの Flex コンテナセクションは次のようになります。

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

Flex Container セクションで変更できる設定は2つあります。

+ + + +

Flex アイテムプロパティ

+ +

flexbox の各コンポーネントには、要素名とそのクラス (存在する場合) を含む番号付きのエントリがあります。要素の上にカーソルを置くと、ページ上で強調表示されます。

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

アイテムをクリックすると、そのコンポーネントの詳細が表示されます。

+ +

+ +

このビューには、コンポーネントに関する3つの情報が表示されます。

+ + + +

セクションの上部に、選択された項目の名前は、flexboxコンテナのすべてのコンポーネントのドロップダウンリストです。

+ +

+ +

このドロップダウンを使用して、flexbox 内の他のコンポーネントを選択できます。

diff --git a/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..f46ebfea79 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,135 @@ +--- +title: 'CSS グリッドインスペクター: グリッドレイアウトを調査する' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +

グリッドインスペクターで、Firefox の開発ツールを使用して CSS グリッドレイアウト を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。

+ +
+

注記: この記事にあるスクリーンショットで示す例は、Jen Simmons による Futurismo や Variations on a grid、および Rachel Andrew による 名前付きグリッド領域の例 です。

+
+ +

CSS グリッドを発見する

+ +

ページ内に display: grid が適用された HTML 要素があるとき、グリッドの機能へ簡単にアクセスできるようにするため、開発ツールでいくつかの機能を使用できます。

+ +

HTML ペインの機能

+ +

HTML ペイン では、グリッド方式でレイアウトされる要素のそばに "grid" マークがつきます。

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

CSS ペインの機能

+ +

CSS ペイン のルールビューでは、display: grid 宣言の実体にグリッドアイコン () を表示します。

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

アイコンをクリックすると、ページ上にグリッドをオーバーレイ表示する機能の有効・無効を切り替えます。これは要素に重ねて表示され、グリッドの線やトラックの位置を示すためにグリッドのように並べられます。

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

このオーバーレイは別の要素を選択しても表示し続けますので、関連する CSS プロパティを編集して、グリッドにどのような影響があるかを確認できます。

+ +

レイアウトビューのグリッドセクション

+ +

ページ内にグリッドがあるとき、グリッドを確認するためのさまざまなオプションがある "グリッド" セクションが CSS ペインのレイアウトビューに表示されます。詳しくは後の章で説明します。

+ +
+

注記: レイアウトビューは、ページインスペクターの右側のペインにあるLayoutタブの中にあります。この記事内のスクリーンショットで、どこにあるかのヒントを得られるでしょう。

+
+ +

グリッドのオプション

+ +

レイアウトビューのグリッドセクションは以下のようなものです:

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

セクション内にオプションがいくつかあります:

+ + + +
+

注記: オーバーレイの色や表示設定は、ページごとに再読み込み後も維持します。

+
+ +

これらの機能を、さらに詳しく見ていきましょう

+ +

グリッドをオーバーレイ表示

+ +

"グリッドをオーバーレイ表示" セクションに、ページ上のそれぞれのグリッドの項目が表示されます:

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

それぞれの項目の構成は (左から右の順に) 以下のとおりです:

+ + + +

線番号を表示

+ +

デフォルトで、グリッドオーバーレイに線番号を表示します。

+ +

A CSS grid overlay with grid line numbers displayed

+ +

"線番号を表示" のチェックを外すと、線番号が消えます。

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

領域名を表示

+ +

領域名があるグリッドでは、デフォルトで領域名をグリッドオーバーレイに表示します。

+ +

A CSS grid overlay with named area names displayed

+ +

"領域名を表示" のチェックを外すと、領域名が消えます。

+ +

A CSS grid overlay with named area names not displayed

+ +

グリッド線を無限に延伸

+ +

デフォルトで、グリッドの線やトラックは display: grid が設定された要素の内部に限って表示します。

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

"グリッド線を無限に延伸" にチェックを入れると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

ミニグリッドビュー

+ +

現在オーバーレイ表示しているグリッドを、実際のグリッドに比例して小さく表示します。

+ +

A mini CSS grid view from the Firefox DevTools

+ +

ミニグリッドのさまざまな領域にマウスポインターを載せると、グリッドオーバーレイで対応する領域もハイライト表示されます。また、領域の寸法や列番号・行番号などの有用な情報をツールチップで表示します。

+ +

A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

+ +

関連情報

+ + diff --git a/files/ja/tools/page_inspector/how_to/index.html b/files/ja/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..370529a6d4 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..4da5c5c3c3 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,26 @@ +--- +title: 色の調査と選択 +slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +
{{ToolsSidebar}}

CSS ペインの ルールビュー ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します:

+ +

+ +

色サンプルをクリックすると、その色を変更できるカラーピッカーがポップアップします:

+ +

+ +

カラーピッカーに、スポイトのアイコンがあります。このアイコンをクリックすると、要素の色をページ内から新たに選択するスポイトツールを使用できます:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Firefox 40 より、Shift キーを押しながら色サンプルをクリックすると、色単位を切り替えます:

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Firefox 53 以降で、CSS color level 4 の色の値をサポートします。

diff --git a/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html b/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..fe2d531143 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/open_the_inspector/index.html @@ -0,0 +1,23 @@ +--- +title: インスペクターを開く +slug: Tools/Page_Inspector/How_to/Open_the_Inspector +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}
+ +

インスペクターを開く方法は、主に 2 つあります:

+ + + +

インスペクターがブラウザーウィンドウの下部に現れます:

+ +

The all-new Inspector in Firefox 57 DevTools.

+ +

インスペクターで何を行うかを知るために、UI ツアー をご覧ください。

diff --git a/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html b/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..6c7084a728 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html @@ -0,0 +1,22 @@ +--- +title: ページ内の要素を再配置する +slug: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
{{ToolsSidebar}}
Firefox 48 の新機能
+ +

Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

{{cssxref("position")}} プロパティが absolute、relative または fixed に設定されており、また {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} プロパティのいずれかが指定されていると、ボックスモデルビュー にボタンを表示します:

+ +

+ +

ボタンをクリックすると、要素の隣にハンドルを 2 つ表示します:

+ +

Example for changing the position of an element within the content

+ +

このハンドルを使用して、ページ内で要素を移動できます。

+ +

要素が絶対配置されている場合は、オフセット元を表す波線を表示します。相対配置の要素では、ノードの元の位置を波線で示します。オフセット量は、それぞれの方向について線とツールチップで示します。

diff --git a/files/ja/tools/page_inspector/how_to/select_an_element/index.html b/files/ja/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..aba60ca71c --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: 要素を選択する +slug: Tools/Page_Inspector/How_to/Select_an_element +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +
{{ToolsSidebar}}

選択された要素 は、ページ内でインスペクターが現在注目している要素です。選択された要素は HTML ペイン に表示します。また、要素の CSS を CSS ペイン に表示します。

+ +

ハイライト表示された要素 は、ボックスモデルを表す図や、タグやサイズを表すツールチップをページ内で重ね合わせている要素です:

+ +

+ +

コンテキストメニューで選択する

+ +

ページ内の要素上でコンテキストメニューを開いて [要素を調査] を選択すると、インスペクターが開いて即座に要素を選択します:

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

HTML ペインで選択する

+ +

インスペクターを開いているとき、HTML ペイン内に並んでいる要素上でマウスポインターを動かすのに応じて、対応する要素をページ内でハイライト表示します。HTML ペインでクリックすると、要素を選択します:

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

キーボードの矢印キーを使用して、DOM 内を移動することもできます。

+ +

ノードピッカーで選択する

+ +

"ノードピッカー" のアイコン (要素を選択 アイコンとも呼ばれます) をクリックしてノードピッカーを起動すると、ページ自体で要素を選択できます。ページ内でマウスポインターを動かすと、ポインターの下にある要素をハイライト表示します。要素をクリックすると、選択します:

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

Firefox 52 より、Shift を押しながら要素をクリックすると、要素を選択しますがピッカーを引き続き使用できます。これにより CSS ペインで要素のルールを確認でき、ページ内の別の要素を簡単に選択できます。

diff --git a/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html b/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html new file mode 100644 index 0000000000..744c59e0e6 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/select_and_highlight_elements/index.html @@ -0,0 +1,32 @@ +--- +title: 要素の選択と強調表示 +slug: Tools/Page_Inspector/How_to/Select_and_highlight_elements +translation_of: Tools/Page_Inspector/How_to/Select_and_highlight_elements +--- +
{{ToolsSidebar}}
+ +

選択された要素は、インスペクタが現在フォーカスしているページの要素です。 選択した要素がHTMLペインに表示され、そのCSSがCSSペインに表示されます。

+ +

強調表示された要素は、ページにオーバーレイされた要素で、ボックスモデルを示すグラフィックとそのタグとサイズを示すツールチップです。

+ +

+ +

コンテキストメニューを使用する

+ +

インスペクタを開いて要素をすぐに選択するには、ページ内の要素のコンテキストメニューをアクティブにして、「要素の検証」を選択します。

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

HTML ペインを使用する

+ +

インスペクタが開いているときに、HTMLペインにリストされている要素の周りにマウスを移動すると、対応する要素がページ内で強調表示されます。 HTMLペインで要素をクリックして選択します。

+ +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

矢印キーを使用して、キーボードでDOMの周りを移動することもできます。

+ +

ノードピッカーを使用する

+ +

ページ自体の要素を選択するには、その要素のアイコン  (「要素の選択」アイコンとも呼ばれます) をクリックして"node picker"をアクティブにします。その後、ページ上でマウスを動かすと、マウスの下の要素が強調表示されます。要素をクリックして選択します。

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

diff --git a/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html b/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html new file mode 100644 index 0000000000..65d0f7cfb8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/use_the_inspector_api/index.html @@ -0,0 +1,44 @@ +--- +title: インスペクターの API を使用する +slug: Tools/Page_Inspector/How_to/Use_the_Inspector_API +tags: + - Inspector + - Reference + - Référence(2) + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_API +--- +
{{ToolsSidebar}}

Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:

+ +

window.inspector

+ +

inspector-panel.js で定義しています。属性と関数:

+ + + +

バインド可能なイベント:

+ +

markuploaded

+ +

ページを変更した後、左側のパネルが更新されたときに呼び出されます。

+ +

ready

+ +

最初の markuploaded で呼び出されます。

+ +

pseudoclass

+ +

疑似クラスの切り替え後に呼び出されます。

+ +

layout-change

+ +

"描画やリサイズなどのための、低優先度の変更イベント"

diff --git a/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html b/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html new file mode 100644 index 0000000000..be82d54870 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/use_the_inspector_from_the_web_console/index.html @@ -0,0 +1,16 @@ +--- +title: ウェブコンソールからインスペクターを使用する +slug: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console +--- +
{{ToolsSidebar}}

インスペクターで選択されている要素は、変数 $0 を使用してウェブコンソールから参照できます。

+ +

+ +

ウェブコンソールに出力された DOM 要素の隣に、標的のアイコンがあります。このアイコンにマウスポインターを載せると、ページ上で要素をハイライト表示します。またアイコンをクリックすると、要素がインスペクターで選択されます:

+ +

diff --git a/files/ja/tools/page_inspector/how_to/view_background_images/index.html b/files/ja/tools/page_inspector/how_to/view_background_images/index.html new file mode 100644 index 0000000000..8946153638 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/view_background_images/index.html @@ -0,0 +1,12 @@ +--- +title: 背景画像を確認する +slug: Tools/Page_Inspector/How_to/View_background_images +translation_of: Tools/Page_Inspector/How_to/View_background_images +--- +
{{ToolsSidebar}}

ルールビュー で、background-image で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください:

+ +

+ +

Firefox 41 より、画像の宣言上で右クリックすると、画像を data: URL としてコピーするメニュー項目があります:

+ +

diff --git a/files/ja/tools/page_inspector/how_to/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/view_fonts/index.html new file mode 100644 index 0000000000..dc20a581e8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/view_fonts/index.html @@ -0,0 +1,233 @@ +--- +title: フォントを確認する +slug: Tools/Page_Inspector/How_to/View_fonts +tags: + - Fonts + - Guide + - Inspector + - Tools + - variable fonts +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}
+ +

この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。

+ +
+

注記: この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。

+
+ +

フォントタブ

+ +

インスペクター をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:

+ +
    +
  1. インスペクターを開きます。
    2. +
  2. フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。
    3. +
+ +

+ +

フォントタブは 3 つの主要なセクションに分かれています:

+ + + +

Fonts used

+ +

フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。

+ +

+ +

調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。

+ +

以下の理由のいずれかを理由として、このセクションにフォントが表示されます:

+ + + +

フォントエディター

+ +

Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。

+ +

+ +

通常の (静的な) フォントでは、以下の設定を変更できます。

+ +

サイズ

+ +

調査中の要素の {{cssxref("font-size")}} です。

+ +

+ +

em、rem、%、px、vh、vw の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +
+

注記: pt など、ほかの単位を font-size や line-height で使用したい場合は、ルールビュー で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。

+
+ +

単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。

+ +

例: 1rem が 10 ピクセルと等価である場合に単位を rem から px に変更すると、2rem は 20px になります。

+ +

Line height

+ +

調査中の要素の {{cssxref("line-height")}} です。

+ +

+ +

単位なし、または em、%、px の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。

+ +

単位を変更すると、font-size の設定に応じて値を変換します。

+ +

例: フォントのサイズが 20 ピクセルで line-height が 1.5em である場合に単位を em から px に変更すると、値が 30px になります。

+ +

太さ

+ +

調査中の要素の {{cssxref("font-weight")}} です。

+ +

Font weight setting

+ +

スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。

+ +
+

注記: wght バリエーション軸を定義する バリアブルフォント (後述) は、独自の範囲を持ちます。

+
+ +

イタリック

+ +

調査中の要素の {{cssxref("font-style")}} です。

+ +

+ +

この設定は、font-style プロパティの値 italic と normal を切り替えます。

+ +
+

注記: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。

+
+ +

All fonts on page

+ +

フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。

+ +

+ +

このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。

+ +

このセクションでは、それぞれのフォントで以下の情報を提供します:

+ + + +

Firefox 開発ツールでバリアブルフォントをサポート

+ +

Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。

+ +

バリアブルフォントとは?

+ +

バリアブルフォント または OpenType Font Variations は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。

+ +

バリアブルフォントは許容範囲が バリエーション軸 (詳しくは Introducing the 'variation axis' をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。

+ +

登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を実装する場合は、その動作が定義済みの動作に従うことが必要です。

+ +

すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の {{cssxref("font-variation-settings")}} プロパティは、キーと値のペアでタグを使用します。例えば font-variation-settings を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:

+ +
font-variation-settings: "wght" 350;
+ +

ただし font-variation-settings は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。

+ +
+

注記: font-variation-settings を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (font-weight など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。

+
+ +

登録済みの軸と対応する CSS プロパティを以下に示します:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
軸タグCSS プロパティ
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。

+ +
+

注記: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。

+
+ +
+

警告: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。

+
+ +

フォントエディターでバリアブルフォントを扱う

+ +

調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。

+ +

+ +

これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。

+ +

以下に、さまざまな軸を定義したフォントの例を 2 つ示します:

+ +

+ +

以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。

+ +

+ +

1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。

+ +

+ + + +

ヒント

+ +

最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:

+ + diff --git a/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html b/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html new file mode 100644 index 0000000000..9b4b4f3b66 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/visualize_transforms/index.html @@ -0,0 +1,12 @@ +--- +title: Transform の可視化 +slug: Tools/Page_Inspector/How_to/Visualize_transforms +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Visualize_transforms +--- +
{{ToolsSidebar}}

ルールビュー で transform プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します:

+ +

diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html new file mode 100644 index 0000000000..a971196e9a --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_(firefox_41_and_42)/index.html @@ -0,0 +1,24 @@ +--- +title: アニメーションインスペクタ (Firefox 41 および 42) +slug: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42) +--- +
{{ToolsSidebar}}
+

アニメーションインスペクタの UI は、Firefox 43 で改良しました。Firefox 43 以降でアニメーションインスペクタがどのようになったかを知りたい場合は、"アニメーションを扱う" のメインページをご覧ください。

+
+ +

Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます:

+ + + +

{{EmbedYouTube("0vSIuKaqD8o")}}

diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html new file mode 100644 index 0000000000..2335fd6df5 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__web_animations_api/index.html @@ -0,0 +1,118 @@ +--- +title: アニメーションインスペクターの例：Web Animations API +slug: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API +--- +
{{ToolsSidebar}}
+ +

firefox-logo-animation

+ +

Web Animations API を使用するアニメーションのサンプルです。

+ +

HTML コンテンツ

+ +
<div class="channel">
+   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
+   <span id="note">Firefox Developer Edition</span>
+</div>
+ +

CSS コンテンツ

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+#icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+}
+
+#note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+  opacity: 0;
+  width: 0;
+}
+
+ +

JavaScript コンテンツ

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)', filter: 'grayscale(100%)'},
+  { filter:  'grayscale(100%)', offset: 0.333},
+  { transform: 'scale(1.5)', offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
+];
+
+var noteKeyframeSet = [
+  { opacity: '0', width: '0'},
+  { opacity: '1', width: '300px'}
+];
+
+var iconKeyFrameOptions = {
+  duration: 750,
+  fill: 'forwards',
+  easing: 'ease-in',
+  endDelay: 100
+}
+
+var noteKeyFrameOptions = {
+  duration: 500,
+  fill: 'forwards',
+  easing: 'ease-in',
+  delay: 150
+}
+
+var icon = document.getElementById("icon");
+var note = document.getElementById("note");
+
+var iconKeyframes = new KeyframeEffect(
+  icon,
+  iconKeyframeSet,
+  iconKeyFrameOptions
+);
+
+var noteKeyframes = new KeyframeEffect(
+  note,
+  noteKeyframeSet,
+  noteKeyFrameOptions
+);
+
+var iconAnimation = new Animation(iconKeyframes, document.timeline);
+var noteAnimation = new Animation(noteKeyframes, document.timeline);
+
+var firstTime = true;
+
+function animateChannel(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.id != "icon") {
+    return;
+  }
+  if (firstTime) {
+    iconAnimation.play();
+    noteAnimation.play();
+    firstTime = false;
+  } else {
+    iconAnimation.reverse();
+    noteAnimation.reverse();
+  }
+}
+
+document.addEventListener("click", animateChannel);
+
diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html new file mode 100644 index 0000000000..3f0900fd07 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html @@ -0,0 +1,86 @@ +--- +title: アニメーションインスペクタの例：CSS トランジション +slug: Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples +translation_of: >- + Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_CSS_transitions +--- +
{{ToolsSidebar}}
+ +

firefox-logo-animation

+ +

CSS トランジションを使用したアニメーションの例。

+ +

HTML コンテンツ

+ +
<div class="channel">
+  <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/>
+  <span class="note">Firefox Developer Edition</span>
+</div>
+ +

CSS コンテンツ

+ +
.channel {
+  padding: 2em;
+  margin: 0.5em;
+  box-shadow: 1px 1px 5px #808080;
+  margin: 1.5em;
+}
+
+.channel > * {
+  vertical-align: middle;
+  line-height: normal;
+}
+
+.icon {
+  width: 50px;
+  height: 50px;
+  filter: grayscale(100%);
+  transition: transform 750ms ease-in, filter 750ms ease-in-out;
+}
+
+.note {
+  margin-left: 1em;
+  font: 1.5em "Open Sans",Arial,sans-serif;
+  overflow: hidden;
+  white-space: nowrap;
+  display: inline-block;
+
+  opacity: 0;
+  width: 0;
+  transition: opacity 500ms 150ms, width 500ms 150ms;
+}
+
+.icon#selected {
+  filter: grayscale(0%);
+  transform: scale(1.5);
+}
+
+.icon#selected+span {
+  opacity: 1;
+  width: 300px;
+}
+
+ +

JavaScript コンテンツ

+ +
function toggleSelection(e) {
+  if (e.button != 0) {
+    return;
+  }
+  if (e.target.classList.contains("icon")) {
+    var wasSelected = (e.target.getAttribute("id") == "selected");
+    clearSelection();
+    if (!wasSelected) {
+      e.target.setAttribute("id", "selected");
+    }
+  }
+}
+
+function clearSelection() {
+  var selected = document.getElementById("selected");
+  if (selected) {
+    selected.removeAttribute("id");
+  }
+}
+
+document.addEventListener("click", toggleSelection);
diff --git a/files/ja/tools/page_inspector/how_to/work_with_animations/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..6a458e58a6 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,180 @@ +--- +title: アニメーションを扱う +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Guide + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:

+ + + +

アニメーションインスペクター

+ +

ページインスペクターの アニメーションビュー では、ページ内のアニメーションを時間の時系列に沿って表示します。また、時系列上の任意の位置に移動するために使用する、ドラッグ可能なウィジェットがあり、ある時点のページの状態を確認できます。

+ +

このビューでは CSS トランジション、CSS @keyframes 規則、Web Animations API を使用して作成したアニメーションを表示します。Firefox 48 より、::before および ::after 疑似要素に適用したアニメーションも表示します。

+ +

ビューの動作を知るために、サンプルを使用してひととおり見ていきましょう。以下のボックス内に、Firefox Developer Edition を表すグレースケールのアイコンがあります。アイコンをクリックすると膨張して色がつき、ブラウザ名が現れます。もう一度アイコンをクリックすると、元に戻ります。

+ +

{{EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API")}}

+ +

これらのアニメーションは、Web Animations API を使用して作成しました。

+ +

このサンプルで何が起きているかを、アニメーションインスペクターで見ていきましょう。

+ +
    +
  1. ボックス内を右クリックして [要素を調査] を選択します。
    2. +
  2. <div class="channel"> 要素が選択されていることを確認します。
    3. +
  3. [アニメーション] タブに切り替えます。
    4. +
  4. アニメーションを再生します。
    5. +
+ +

{{EmbedYouTube("3f_vtdHqt9o")}}

+ +

ここで、アニメーションインスペクターの内容を詳しく見ていきましょう:

+ +

+ +

これは、選択中の要素や子要素に適用されているすべてのアニメーションをひとつの時系列に表示したタイムラインです。時系列は最初のアニメーションの開始時点から始まり、最後のアニメーションの終了時点で終わります。また、250 ミリ秒ごとにマーカーがついています (表示しているアニメーションの時間規模に依存します)。

+ +

アニメーションバー

+ +

それぞれのアニメーションやトランジションは、時系列に沿って水平方向に並ぶバーとして表示します。また、バーは以下のように表示します:

+ + + +

Compositor スレッドを使用してプロパティのアニメーションを行っている場合は稲妻のアイコン () を表示します (詳しくは さまざまな CSS プロパティでアニメーションを行うコスト をご覧ください)。

+ +

Firefox 52 よりバーの形状が、アニメーションで使用するイージング効果を反映するようになりました。前出の例では 1 番目のバーが凹型で ease-in、2番目のバーが凸型で ease-out を表していることがわかります。

+ +

CSS トランジションのアニメーションでは、それぞれのプロパティのトランジションをひとつのバーで表し、トランジションを行うプロパティの名称を記載します。CSS @keyframes のアニメーションでは、それぞれのアニメーションをひとつのバーで表し、キーフレームの名前を記載します。

+ +

アニメーションやトランジションに遅延がある場合は、その部分を斜線で網掛け表示します。delay および endDelay の両方を表します。

+ +

バーにマウスポインターを載せると以下の情報を含む、アニメーションやトランジションの詳細情報を記載したツールチップを表示します:

+ + + +

+ +

アニメーションする要素の情報

+ +

バーの左側に、アニメーションを適用した要素のセレクターがあります。セレクターにマウスポインターを載せると、ページ上で要素をハイライト表示します。セレクターをクリックすると、要素をインスペクターで選択します。

+ +

{{EmbedYouTube("ygATdrzQz0I")}}

+ +

セレクターの左側に、"標的" のアイコン () があります。このアイコンをクリックすると、要素をハイライト表示したままにします。

+ +

アニメーションの詳細情報

+ +

バーをクリックすると、アニメーションで変化するすべてのプロパティについて詳細情報を表示します。例えば、img#icon のアニメーションのバーをクリックしてみましょう:

+ +

+ +

filter と transform の、2 つのプロパティが変化していることがわかります。それぞれのドットは、アニメーションで使用しているキーフレームのセット内にある、プロパティの項目を示します。どちらのプロパティも 0ms で開始、750ms で終了しています。filter は 250ms で、transform は 500ms で値が与えられています。ドットにマウスポインターを載せると、タイムライン上の特定の時点でプロパティに与えられた値を確認できます:

+ +

+ +

これは要するに、アニメーションの キーフレーム を視覚化したものです:

+ +
var iconKeyframeSet = [
+  { transform: 'scale(1)',   filter: 'grayscale(100%)'                },
+  {                          filter: 'grayscale(100%)', offset: 0.333 },
+  { transform: 'scale(1.5)',                            offset: 0.666 },
+  { transform: 'scale(1.5)', filter: 'grayscale(0%)'                  }
+];
+ +

サンプルに応用する

+ +

これらすべてをサンプルに適用すると、以下のことがわかります:

+ + + +

アニメーションを再生する

+ +

アニメーションインスペクターの上部に、以下のウィジェットがあります:

+ + + +

最後に、時系列の上部にあるバーの内部をクリックすると、左右にドラッグしてアニメーションを前後に遷移させることが可能なスクラバーを使用できます。これにより、いつ何が起きているかを正確に把握できます:

+ +

{{EmbedYouTube("9fxRm3i_aDQ")}}

+ +

アニメーションの合成に関する詳細情報

+ +

Firefox 49 よりアニメーションインスペクターで、アニメーションのパフォーマンスや合成に関する情報を提供する機能が向上しました。これを説明するために、サンプルを 2 つ作成しました。animation-inspector-compositing.html を開いて赤色の長方形をクリックすると、シンプルな {{cssxref("opacity")}} のアニメーションが始まります。Firefox 49 以降でこれをアニメーションインスペクターで見ると、以下のことがわかります:

+ + + +

+ +

次に animation-inspector-compositing-silly.html を見てみましょう。こちらも同様のサンプルですが、赤色の長方形をクリックすると {{cssxref("opacity")}} と同時に、{{cssxref("left")}} や {{cssxref("transform")}} (translation なし) プロパティもアニメーションする点が異なります。位置プロパティと translation を同時に実行することにはあまり意味がありません (2 つの効果は同期しません) ので、transform プロパティは意図的に Compositor で扱われません。Firefox 49 以降、アニメーションインスペクターはこれをより役に立つように伝えます。アニメーションインスペクターで見ると、以下のことがわかります:

+ + + +

+ +

@keyframes の編集

+ +

選択中の要素に関連付けられた @keyframes 規則 を ルールビュー に表示します。また、編集も可能です:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

タイミング関数の編集

+ +

CSS アニメーション を作成する際に、タイミング関数 を指定できます。これはアニメーションが進むペースを定義します。タイミング関数の指定方法のひとつが、3 次ベジェ曲線による指定です。

+ +

ルールビューで、3 次ベジェ曲線で定義したタイミング関数の隣にアイコンを表示します。このアイコンをクリックすると視覚的な曲線エディターを表示します。P1 および P2 をドラッグして、その結果をページ上で確認できます。

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

この機能は、Lea Verou の cubic-bezier.com 由来のオープンソースコードを使用しています。

+ +

3 次ベジェ曲線エディターに多くのプリセットを用意しました。これらは "Ease-in"、"Ease-out"、"Ease-in-out" にグループ化されています:

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

-- cgit v1.2.3-54-g00ecf