From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- files/ja/tools/page_inspector/3d_view/index.html | 103 --------- .../page_inspector/how_to/edit_fonts/index.html | 233 +++++++++++++++++++++ .../page_inspector/how_to/view_fonts/index.html | 233 --------------------- .../index.html | 86 ++++++++ .../animations_examples/index.html | 86 -------- .../ja/tools/page_inspector/html_panel/index.html | 35 ---- .../ja/tools/page_inspector/style_panel/index.html | 69 ------ 7 files changed, 319 insertions(+), 526 deletions(-) delete mode 100644 files/ja/tools/page_inspector/3d_view/index.html create mode 100644 files/ja/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/view_fonts/index.html create mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html delete mode 100644 files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html delete mode 100644 files/ja/tools/page_inspector/html_panel/index.html delete mode 100644 files/ja/tools/page_inspector/style_panel/index.html (limited to 'files/ja/tools/page_inspector') diff --git a/files/ja/tools/page_inspector/3d_view/index.html b/files/ja/tools/page_inspector/3d_view/index.html deleted file mode 100644 index daac55be01..0000000000 --- a/files/ja/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 3D ビュー -slug: Tools/Page_Inspector/3D_view -tags: - - HTML - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/3D_View ---- -
{{ToolsSidebar}}
-

Firefox 47 より、3D ビューは使用できません。

- -

同様の機能を提供するアドオンがあります: https://addons.mozilla.org/firefox/addon/tilt/。ただし組み込み版と同じく、このアドオンはマルチプロセス Firefox で動作しません。

-
- -

3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。

- -

- -

ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を HTML パネル や スタイルパネル で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。

- -

ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、ブロックリストに登録されたドライバのページをご覧ください。

- -

3D ビューのコントロール

- -

3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
機能キーボードマウス
ズームイン/アウト+ / -ホイールの上回転/下回転
左右の回転a / d左右へのドラッグ
上下の回転w / s上下へのドラッグ
左右の移動← / →左右へのドラッグ
上下の移動↑ / ↓上下へのドラッグ
ズームレベルの初期化0ズームレベルを既定の状態に初期化します。
選択したノードへフォーカスf選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}
ビューの初期化rズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}
選択中のノードを隠すx現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}
- -

3D ビューの用途

- -

さまざまな状況で 3D ビューは役に立ちます:

- - - -

関連情報

- - diff --git a/files/ja/tools/page_inspector/how_to/edit_fonts/index.html b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html new file mode 100644 index 0000000000..dc20a581e8 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/edit_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/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/view_fonts/index.html deleted file mode 100644 index dc20a581e8..0000000000 --- a/files/ja/tools/page_inspector/how_to/view_fonts/index.html +++ /dev/null @@ -1,233 +0,0 @@ ---- -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/work_with_animations/animation_inspector_example_colon__css_transitions/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html new file mode 100644 index 0000000000..3f0900fd07 --- /dev/null +++ b/files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/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/animations_examples/index.html b/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html deleted file mode 100644 index 3f0900fd07..0000000000 --- a/files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -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/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html deleted file mode 100644 index 3210682298..0000000000 --- a/files/ja/tools/page_inspector/html_panel/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: HTML panel -slug: Tools/Page_Inspector/HTML_panel -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel ---- -
{{ToolsSidebar}}

{{ fx_minversion_header("10.0") }}

- -

ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。

- -
注意: HTML パネルの表示／非表示は Ctrl-H を押すことで切り替えできます。
- -

HTML のナビゲートを行う

- -

HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。

- -

html-panel.png

- -

HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。

- -

属性の実験を行う

- -

ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:

- -

edit-html-attr.png

- -

参考情報

- - - -

{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}

diff --git a/files/ja/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html deleted file mode 100644 index bbfb74ccca..0000000000 --- a/files/ja/tools/page_inspector/style_panel/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Style panel -slug: Tools/Page_Inspector/Style_panel -translation_of: Tools/Page_Inspector#CSS_pane -translation_of_original: Tools/Page_Inspector/Style_panel ---- -
{{ToolsSidebar}}

ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。

- -

{{ 英語版章題("The Rules view") }}

- -

ルールビュー

- -

style-rules.pngルールビュー (左図) では、スタイルがスタイルシートの編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の style 属性を用いて適用されたスタイルをリスト化します。

- -

継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。

- -

また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用／非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。

- -

加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。

- -

閉じ括弧 ("}") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。

- -

すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。

- -

例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:

- -

font-size.png

- -

フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。

- -

{{ 英語版章題("New features in Firefox 13") }}

- -

ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態でスタイルエディタが開きます。

- -

宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。

- -

編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:

- -

style-panel-warning-icon.png

- -

{{ 英語版章題("The Properties view") }}

- -

プロパティビュー

- -

一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。

- -

style-properties.png既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。

- -

検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。

- -

プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。

- -

{{ 英語版章題("Learning more about properties") }}

- -

プロパティについて詳しく学ぶ

- -

showing-info-icon.pngよく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。

- -

{{ 英語版章題("See also") }}

- -

参考情報

- - - -

{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}

-- cgit v1.2.3-54-g00ecf