diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/tools/page_inspector/how_to | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/tools/page_inspector/how_to')
23 files changed, 1922 insertions, 0 deletions
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 +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で、<code><a href="/ja/docs/Web/CSS/filter">filter</a></code> プロパティの隣に丸い灰色と白色のマークを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10873/filter-editor-swatch.png" style="display: block; height: 70px; margin-left: auto; margin-right: auto; width: 768px;"></p> + +<p>このマークをクリックすると、フィルターエディターが開きます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11309/filter-editor.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;"></p> + +<p>フィルターを追加、削除、編集、およびドラッグしてフィルターの適用順序を変更できます:</p> + +<p>{{EmbedYouTube("yws01SEPTvg")}}</p> + +<h2 id="Saving_filter_presets" name="Saving_filter_presets">フィルターのプリセットを保存する</h2> + +<p>Firefox 42 より、プリセットのリストにフィルターを追加することもできます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11311/filter-editor-presets.png" style="display: block; height: 276px; margin-left: auto; margin-right: auto; width: 603px;"></p> + +<p>現在のフィルターをプリセットのリストに保存します:</p> + +<p>{{EmbedYouTube("bHcfLlZE8T8")}}</p> + +<p>保存したフィルターを、新たな要素に対して適用できます:</p> + +<p>{{EmbedYouTube("PK85L7ztQto")}}</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">シェイプパスエディターは、CSS の {{cssxref("clip-path")}}、{{cssxref("shape-outside")}} プロパティと {{cssxref("<basic-shape>")}} 値を使用して作成したシェイプの確認や編集を支援するツールです。このガイドでは、ツールで使用可能なオプションを見ていきます。</p> + +<h2 id="Activate_deactivate_the_Shape_Path_Editor" name="Activate_deactivate_the_Shape_Path_Editor">シェイプパスエディターを起動および終了する</h2> + +<p>シェイプパスエディターは CSS ルールパネルからアクセスできます。パネルの開き方は <a href="/ja/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">インスペクターを開く</a> のガイドで説明しています。要素を選択すると、<code>shape-outside</code> など有効な値のそばにシェイプのアイコンが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15915/enable-shapes-editor.png" style="border-style: solid; border-width: 1px; height: 370px; width: 1836px;"></p> + +<p>アイコンをクリックすると、シェイプをハイライト表示するエディターが現れます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15916/circle.png" style="height: 686px; width: 1210px;"></p> + +<p>アイコンを再度クリックするとエディターが閉じます。あるいは別の要素を選択すると、別のエディターが現れます。シェイプパスエディターは、ページの再読み込み後に維持されません。再読み込みすると、もう一度要素を選択しなければなりません。</p> + +<h2 id="Understanding_the_lines_drawn_by_the_editor" name="Understanding_the_lines_drawn_by_the_editor">エディターが表示する線を理解する</h2> + +<p>ページ上のシェイプを選択するとシェイプパスエディターが、作成されたパスの理解を支援する線を表示します。</p> + +<ul> + <li><strong>実線</strong>は、テキストを折り返すシェイプの輪郭を表します。これはあなたが指定したシェイプです。シェイプがマージンボックスによって切り抜かれる場合は、マージンボックスがこの線の一部を構成します。</li> + <li><strong>破線</strong>は、マージンボックスを超えるシェイプの輪郭を表します。これは、マージンボックスによって切り抜かれる領域です。マージンボックスや、CSS シェイプで使用されるほかのボックスについては、<a href="/ja/docs/Web/CSS/CSS_Shapes/From_box_values">ボックス値からのシェイプ</a> のガイドをご覧ください。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<h2 id="Editing_Basic_Shapes" name="Editing_Basic_Shapes">基本シェイプを編集する</h2> + +<p>この機能は、編集する基本シェイプの種類に応じて異なるツールが提供されます。アイコンをクリックしてシェイプパスエディターを起動すると、この機能を使用できます。また、コンテキストメニュー (<kbd>Ctrl</kbd> または <kbd>Cmd</kbd> + クリック) から付加機能を使用できます。</p> + +<h3 id="circle()" name="circle()">circle()</h3> + +<p><code>shape-outside</code> の値が <code>circle()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">円形の基本シェイプ</a> を作成します。<code>circle()</code> 値の隣にあるシェイプアイコンをクリックすると、シェイプをハイライト表示して、円のサイズ変更と中心の移動を行う機能を提供します。マージンボックスを超えるように円を移動したりサイズを変更したりすると、マージンボックスによって輪郭が切り抜かれます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<p>シェイプの編集に応じて、ルールパネルで <code>circle()</code> の値が変化します。これらの値をコピーしてスタイルシートに貼り付けると、編集後のパスで新しいシェイプを作成できます。</p> + +<h3 id="ellipse()" name="ellipse()">ellipse()</h3> + +<p><code>shape-outside</code> の値が <code>ellipse()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse()">楕円形の基本シェイプ</a> を作成します。シェイプパスエディターは <code>ellipse()</code> 値でも、<code>circle()</code> とほぼ同様に機能します。楕円形はつぶれた円形ですので、シェイプのアイコンをクリックすると水平および垂直方向にサイズを変更する機能を提供します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15920/ellipse.png" style="height: 570px; width: 1216px;"></p> + +<h3 id="inset()" name="inset()">inset()</h3> + +<p><code>shape-outside</code> の値が <code>inset()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset()">inset 型の基本シェイプ</a> を作成します。これは、マージンボックスの中で内容物を切り抜くオフセット値によってシェイプを作成できます。</p> + +<p>シェイプアイコンをクリックすると、矩形のそれぞれの辺を対象にしたシェイプパスエディターが起動しきます。辺をドラッグすると、オフセット値の top、right、bottom、left が更新されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15923/inset.png" style="height: 606px; width: 1214px;"></p> + +<h3 id="polygon()" name="polygon()">polygon()</h3> + +<p><code>shape-outside</code> の値が <code>polygon()</code> である場合は、<a href="/ja/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">多角形の基本シェイプ</a> を作成します。これは基本シェイプでもっとも複雑な値であり、シェイプを編集する際にツールが多くの機能を提供します:</p> + +<ul> + <li>シェイプのアイコンをクリックするとシェイプパスエディターが起動して、多角形シェイプの頂点を移動する機能を提供します。</li> + <li>辺の任意の場所をダブルクリックすると、新しい頂点を作成します。</li> + <li>既存の頂点をダブルクリックすると、頂点を削除します。<em>多角形は少なくとも 3 つの頂点が必要ですので注意してください</em>。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15918/polygon-edit.png" style="height: 660px; width: 1260px;"></p> + +<h3 id="Moving_and_scaling_shapes" name="Moving_and_scaling_shapes">シェイプを移動および拡大縮小する</h3> + +<p>ハイライト表示したシェイプで付加機能を使用できます。シェイプのアイコンを <kbd>Ctrl</kbd> または <kbd>Cmd</kbd> + クリックすると、シェイプの拡大・縮小や移動が可能なハイライト表示に替わります。こちらも、マージンボックスの境界を超える部分は切り抜かれます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15924/scaled-circle.png"></p> + +<p>多角形シェイプでは、軸にそって回転させる機能も提供します。</p> + +<h2 id="Browser_support" name="Browser_support">ブラウザーのサポート</h2> + +<p>シェイプパスエディターは現在、{{cssxref("clip-path")}} で生成したシェイプで機能します。Firefox 62 では {{cssxref("shape-outside")}} で生成したシェイプでも機能します。</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> で、ページの CSS の調査や編集を行えます。</p> + +<h2 id="Examine_CSS_rules" name="Examine_CSS_rules">CSS ルールの調査</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> では選択した要素に適用しているすべてのルールを、具体性が高いものから低いものの順に並べています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>未サポートや無効なスタイルの隣に、警告アイコンを表示します。これにより、あるスタイルがなぜ適用されないかを知る助けになります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Rule_display" name="Rule_display">ルールの表示</h3> + +<p>ここでは各ルールを、セレクターのリストと <code>property:value;</code> の宣言という形式で、スタイルシートのように表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>一致する要素を強調</em>: セレクターの隣に、標的のアイコンがあります。これをクリックすると、ページ内でセレクターにマッチするすべてのノードを強調表示します。</li> + <li><em>オーバーライドされた宣言</em>: 後のルールでオーバーライドされた宣言には、打ち消し線が引かれます。<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドされた宣言</a> をご覧ください。</li> + <li><em>カスケードを表示</em>: オーバーライドされた宣言の隣に、拡大鏡のアイコンがあります。これをクリックすると、オーバーライドされたプロパティを含むルールのカスケード状況を確認できます。<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">オーバーライドされた宣言</a> をご覧ください。</li> + <li><em>有効/無効</em>: 宣言の上にマウスポインターを載せると、隣にチェックボックスが表示されます。このチェックボックスで宣言の有効・無効を切り替えできます。</li> + <li><em>ファイル名と行番号</em>: 右側に、ルールへのリンクがあります。詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">CSS ファイルへのリンク</a> をご覧ください。</li> +</ul> + +<p>Firefox 52 より <code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> 宣言がある要素で、グリッドのアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) が表示されます。このアイコンをクリックすると、グリッドラインやグリッドトラックを含むグリッドの状態を、ページに重ねて表示します。詳しくは <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">グリッドレイアウトを調査する</a> をご覧ください。</p> + +<p><a href="/ja/docs/Web/CSS/Cascade">ユーザーエージェントのスタイル</a> (<em>すなわち</em>、ブラウザーのデフォルトの CSS ルール) を表示するには、<a href="/ja/docs/Tools/Settings">開発ツールのオプション</a> パネルで "ブラウザー CSS を表示" を有効化します (この設定は <a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">計算済みビュー</a> の [ブラウザー CSS] チェックボックスとは独立した設定ですので注意してください)。</p> + +<p>ユーザーエージェントのスタイルは背景が異なり、ファイル名と行番号のリンクに接頭辞 <code>(ユーザーエージェント)</code> がつきます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="element_rule" name="element_rule">要素 {} ルール</h3> + +<p>ルール一覧の先頭にある <code>要素 {}</code> ルールは、本物の CSS ルールではありません。これは、要素の {{htmlattrxref("style")}} 属性で割り当てられた CSS プロパティを表します。</p> + +<p>Firefox 52 より標的のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) も表示しており、これはページで現在選択している要素を強調表示するための便利な手段です。</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Filtering_rules" name="Filtering_rules">ルールのフィルタリング</h3> + +<p>ルールビューの上部に "スタイルを絞り込み" と記載されたボックスがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;"></p> + +<p>ここに入力すると以下のようになります:</p> + +<ul> + <li>入力した文字列を含まないルールは、すべて非表示になります。</li> + <li>入力した文字列を含む宣言をハイライト表示します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>検索ボックス末尾の "X" 印をクリックすると、フィルターを削除します。</p> + +<div class="note"> +<p>ルールビューで <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、<kbd>Esc</kbd> を押下すると入力内容を削除できます。</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Strict_search" name="Strict_search">厳密な検索</h4> + +<p>デフォルトで検索ボックスは、文字列を一部に含むすべての宣言を強調表示します。例えば "color" を検索すると、<code><a href="/ja/docs/Web/CSS/color">color</a></code> だけでなく <code><a href="/ja/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> や <code><a href="/ja/docs/Web/CSS/background-color">background-color</a></code> を含む宣言も強調表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>`color` のように検索語をバッククォートで括ると、完全一致に限定して検索します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Expanding_shorthand_properties" name="Expanding_shorthand_properties">ショートハンドプロパティを展開する</h3> + +<p><a href="/ja/docs/Web/CSS/Shorthand_properties">ショートハンドプロパティ</a> のそばにある三角印をクリックすると、関連するロングハンドプロパティを表示するように展開できます。</p> + +<h3 id="Displaying_pseudo-elements" name="Displaying_pseudo-elements">疑似要素を表示する</h3> + +<p>選択した要素に以下の <a href="/ja/docs/Web/CSS/Pseudo-elements">疑似要素</a> が適用されている場合に、それらをルールビューで表示します:</p> + +<p><code>::after<br> + ::backdrop<br> + ::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>選択した要素に適用している疑似要素がある場合は、選択した要素より前にそれらを表示します。ただし、展開しない状態で隠されています:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>三角印をクリックすると、疑似要素を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Setting_hover_active_focus" name="Setting_hover_active_focus">:hover、:active、:focus を設定する</h3> + +<p>フィルターボックスの右側にボタンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;"></p> + +<p>ボタンをクリックすると 3 つのチェックボックスが現れます。これを使用して、選択した要素に {{cssxref(":hover")}}、{{cssxref(":active")}}、{{cssxref(":focus")}} の各疑似クラスを設定できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>この機能は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">HTML ビューのポップアップメニュー</a> から使用することもできます。</p> + +<p>いずれかの疑似クラスを設定するとマークアップビューで、疑似クラスが適用されたすべてのノードの隣に橙色の印を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Link_to_CSS_file" name="Link_to_CSS_file">CSS ファイルへのリンク</h3> + +<p>各ルールの右上に、ソースファイルの名前と行番号をリンクとして表示します。このリンクをクリックすると、ファイルを <a href="/ja/docs/Tools/Style_Editor" title="Tools/Style_Editor">スタイルエディター</a> で開きます。</p> + +<p>ソースファイルの場所をコピーできます。リンクを右クリックして [URL をコピー] を選択してください。</p> + +<p>インスペクターは CSS ソースマップを理解します。ソースマップをサポートする CSS プリプロセッサーを使用しており、また <a href="/ja/docs/Tools_Toolbox#Style_Editor">スタイルエディターの設定</a> でソースマップのサポートを有効にしている場合は、生成された CSS ではなく元のソースファイルへのリンクになります。CSS ソースマップのサポートについて、詳しくは <a href="/ja/docs/Tools/Style_Editor#Source_map_support">スタイルエディターのドキュメント</a> をご覧ください。</p> + +<h3 id="Overridden_declarations" name="Overridden_declarations">オーバーライドされた宣言</h3> + +<p>CSS 宣言がよりウェイトの大きい別の CSS ルールにオーバーライドされた場合、オーバーライドされた宣言に打ち消し線を表示します。</p> + +<p>オーバーライドされた宣言の隣に拡大鏡のアイコンがあります。アイコンをクリックすると、カレントノードに適用されているプロパティで、同じプロパティを設定しようとしたものだけを表示するようにルールビューをフィルタリングします。これは、そのプロパティのカスケードの全体像です。</p> + +<p>どのルールが宣言をオーバーライドしているかを、簡単に確認できます:</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examine_computed_CSS" name="Examine_computed_CSS">計算済み CSS の調査</h2> + +<p>選択した要素向けに計算された CSS を確認するには、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">計算済みビュー</a> に切り替えてください。ここでは選択した要素について、各 CSS プロパティの計算済みの値を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p><kbd>Tab</kbd> を使用して、これらを選択できます。また Firefox 49 より、これらのプロパティについて詳しい情報を確認できます。プロパティを選択して <kbd>F1</kbd> を押下すると、MDN のリファレンスページが開きます。</p> + +<p>プロパティ名の隣にある三角印をクリックする (または選択中に <kbd>Enter</kbd> または <kbd>Space</kbd> を押下する) と、その値を設定したルールおよびそのルールが存在するソースファイルのファイル名と行番号を表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>デフォルトでは、ページで明示的に設定された値のみ表示します。すべての値を見るには、[ブラウザー CSS] チェックボックスをクリックしてください。<kbd>Tab</kbd> を使用してファイル名/行番号に移動できます。そして <kbd>Enter</kbd>/<kbd>Return</kbd> を押下すると、関連するファイルを <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> で開きます。</p> + +<p>検索ボックスに入力すると、その場で一覧を絞り込みます。例えばフォント関連の設定だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティのみ表示します。同様に、プロパティの値も検索できます。フォントを "Lucida Grande" に設定したルールを探すには、フォント名を検索ボックスに入力します。</p> + +<div class="note"> +<p>計算済みビューで <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> を押下すると、検索フィールドにフォーカスがあたります。フィルターを入力した後、<kbd>Esc</kbd> を押下すると入力内容を削除できます。</p> +</div> + +<h2 id="Edit_rules" name="Edit_rules">ルールの編集</h2> + +<p>ルールビューで宣言またはセレクターをクリックすると、ルールを編集して結果を直ちに確認できます。また、<kbd>Tab</kbd> を使用して別の既存プロパティや値を選択でき、<kbd>Enter</kbd> または <kbd>Space</kbd> を押下するとそれらを編集できます。新しい宣言をルールに追加するには、ルールの最後の行 (閉じ括弧がある行) をクリックします。</p> + +<p>プロパティ名を入力するのに応じて、オートコンプリート候補のリストを表示します。<kbd>Tab</kbd> を押下して現在の候補を受け入れるか、<kbd>↑</kbd> および <kbd>↓</kbd> を押下してリスト内を移動します。デフォルトで選択される項目は、入力した文字から始まるプロパティでもっとも一般的なものです。例えばユーザが "c" を入力すると、デフォルトで "color" を選択します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>プロパティに対して無効な値や未知のプロパティ名を編集中に入力すると、宣言の後ろに黄色の警告アイコンを表示します。</p> + +<p>ルールビューで編集した内容が <a href="/ja/docs/Tools/Style_Editor">スタイルエディター</a> に反映されます。逆も同様です。実施した変更点は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> + +<p>CSS を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="CSS_variable_autocompletion" name="CSS_variable_autocompletion">CSS 変数のオートコンプリート</h3> + +<p>CSS で定義した変数に応じて、<a href="/ja/docs/Web/CSS/Using_CSS_variables">CSS 変数名</a> のオートコンプリートを行います。プロパティの値に <code>var(</code> と入力してダッシュ (<code>-</code>) を押下すると、CSS で宣言した変数をオートコンプリートのリストに表示します。Firefox 61 より、それぞれの変数にどの色の値が保存されているかを明確にするために色見本を表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16053/variable-autocomplete.png" style="display: block; height: 335px; margin: 0px auto; width: 546px;"></p> + +<p>さらに、CSS 変数名にマウスポインターを載せると、変数に保存されている色の値をツールチップで表示します ({{bug(1431949)}})。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16054/variable-tooltip.png" style="display: block; height: 166px; margin: 0px auto; width: 480px;"></p> + +<h3 id="Editing_keyboard_shortcuts" name="Editing_keyboard_shortcuts">キーボードショートカットで編集する</h3> + +<p>編集中は、矢印キーや Page Up/Down キーを (ほかのキーと組み合わせて) 使用して数値のルールを増減できます:</p> + +<ul> + <li><kbd>↑</kbd> 矢印キーで値を 1 増やします (例えば "1px" が "2px" に変わります)。</li> + <li><kbd>Shift</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> で値を 10 増減します。</li> + <li><kbd>Alt</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> で値を 0.1 増減します。Firefox 60 でこの組み合わせを、Linux および Windows で OS のデフォルトのショートカットと衝突しないようにするため <kbd>Ctrl</kbd> + <kbd>↑</kbd>/<kbd>↓</kbd> に変更しましたので注意してください ({{bug("1413314")}})。Mac では変わりません。macOS は <kbd>Ctrl</kbd> + <kbd>↑</kbd> がデフォルトで、Mission Control を表示するショートカットキーです。</li> + <li><kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> で値を 100 増減します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Add_rules" name="Add_rules">ルールの追加</h2> + +<p>ルールビューでルールを追加できます。右クリックで表示されるコンテキストメニューで [新しいルールを追加] を選択してください。選択中のノードにマッチするセレクターの配下に、新たな CSS ルールを追加します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>また、同じことができるボタンもあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copy_rules" name="Copy_rules">ルールをコピーする</h2> + +<p>ルールビューのコンテキストメニュー項目を使用して、ルールやルールの一部分をコピーできます:</p> + +<ul> + <li>ルールをコピー</li> + <li>セレクタをコピー</li> + <li>プロパティ宣言をコピー</li> + <li>プロパティ名をコピー</li> + <li>プロパティの値をコピー</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>インスペクターのすべての <a href="/ja/docs/Tools/Page_Inspector/Keyboard_shortcuts">キーボードショートカット</a> の一覧</li> + <li>インスペクターには、色・フォント・アニメーションといった個々の CSS 機能を扱うことに特化したツールがあります。これらのツールについては、<a href="/ja/docs/Tools/Page_Inspector">ハウツーガイド</a> をご覧ください。</li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> で、ページの HTML の調査や編集を行えます。</p> + +<h2 id="Navigating_the_HTML" name="Navigating_the_HTML">HTML のナビゲーション</h2> + +<h3 id="HTML_breadcrumbs" name="HTML_breadcrumbs">HTML パンくずリスト</h3> + +<p>HTML ペインの下部に、パンくずリストのツールバーがあります。これは選択した要素を含む枝の、ドキュメント内での階層構造を表します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p> + +<p>パンくずリストにマウスポインターを載せると、その要素をページ上でハイライト表示します。</p> + +<p>パンくずリストの <a href="/ja/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">キーボードショートカット</a> があります。</p> + +<div class="note"> +<p>Firefox 48 より前のバージョンでは、パンくずリストのツールバーがマークアップペインの上にありました。</p> +</div> + +<h3 id="Searching" name="Searching">検索</h3> + +<p>Firefox 45 より、インスペクターの検索ボックスは、カレントドキュメントおよびすべてのフレーム内のマークアップから検索します。</p> + +<p>検索ボックスをクリックして広げるか、<kbd>Ctrl</kbd> + <kbd>F</kbd> または Mac で <kbd>Cmd</kbd> + <kbd>F</kbd> を押下して、マークアップの検索を始めます。</p> + +<p>検索ボックスに入力すると、検索文字列にマッチする class 属性や id 属性を表示するオートコンプリートをポップアップします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><kbd>↑</kbd> および <kbd>↓</kbd> キーを押下すると候補を行き来でき、<kbd>Tab</kbd> で選択中の候補を選択、さらに <kbd>Enter</kbd> でその属性を持つ最初のノードを選択します。</p> + +<p>オートコンプリートを選択せずにセレクターなしの検索文字列を入力すると、すべての属性名および属性値、ノードのテキストコンテンツを含むドキュメントの全文から検索します。</p> + +<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p> + +<p>マッチした箇所を巡回するには、<kbd>Enter</kbd> を押下します。Firefox 48 より、<kbd>Shift</kbd> + <kbd>Enter</kbd> を使用して、マッチした箇所を逆方向に巡回できます。</p> + +<h3 id="HTML_tree" name="HTML_tree">HTML ツリー</h3> + +<p>ペインの残りの部分に、ページの HTML をツリー形式で表示します (この UI はマークアップビューとも呼ばれます)。各ノードの左側に三角印があります。この印をクリックすると、ノードを展開します。Alt キーを押しながら三角印をクリックすると、配下のノードをすべて展開します。</p> + +<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>ツリー内のノードにマウスポインターを載せると、その要素をページ上でハイライト表示します。</p> + +<p><code><a href="/ja/docs/Web/CSS/display">display: none</a></code> を使用して非表示にしているノードは、淡色で (例えば {{HTMLElement("head")}} などレンダリングされない要素と同様に) 表示します。</p> + +<p>Firefox 53 より、内容物が大きなノードが折りたたまれているとき、開始タグと終了タグの間に省略記号を表示します。Firefox 53 より前のバージョンでは、折りたたまれたノードに子が存在するかを判別できませんでした。現在は、ツリー内に存在する子孫をこのアイコンで示します: <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"></p> + +<div class="note"> +<p><strong>メモ</strong>: HTML ツリーで使用できる便利なキーボードショートカットがいくつかあります - <a href="/ja/docs/Tools/Keyboard_shortcuts#HTML_pane">HTML ペインのキーボードショートカットリスト</a>をご覧ください。</p> +</div> + +<h3 id="before_and_after" name="before_and_after">::before と ::after</h3> + +<p>Firefox 35 より、{{cssxref("::before")}} および {{cssxref("::after")}} を使用して追加した疑似要素を調査できます。</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h3 id="カスタム要素定義">カスタム要素定義</h3> + +<p>カスタム要素を含むページでインスペクタを開くと、デバッガでカスタム要素のクラス定義を表示できます。</p> + +<ol> + <li>要素を検査します</li> + <li><code>custom</code> という単語をクリックします。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16306/custom_pc_01.png" style="display: block; height: 580px; margin: 0px auto; width: 852px;"></p> + +<p>要素のクラスのソースがデバッガに表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16307/custom_pc_02.png" style="display: block; height: 290px; margin: 0px auto; width: 852px;"></p> + +<h3 id="Whitespace-only_text_nodes" name="Whitespace-only_text_nodes">ホワイトスペースのみのテキストノード</h3> + +<div class="geckoVersionNote">Firefox 52 の新機能</div> + +<p>ウェブ開発者は、1 行のテキストにすべてのコードを記述するわけではありません。マークアップが読みやすくなりますので、空白・改行・タブといったホワイトスペースを HTML 要素の間に置きます。</p> + +<p>通常はこれらのホワイトスペースに効果がなく視覚的に出力されませんが、実際はブラウザーが HTML をパースするときに、ノード内に含まれていない要素のために無名のテキストノードを自動的に生成します。これは (あらゆるテキストの後にある) ホワイトスペースも含まれます。</p> + +<p>これらの自動生成されたテキストノードは <a href="/ja/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">インラインレベル</a> のノードであり、幅・高さともに 0 ではない領域をブラウザーが与えます。そして、マージンやパティングを設定していないにもかかわらず、要素の間に謎の隙間が現れるでしょう。</p> + +<p>Firefox 52 より、インスペクターでホワイトスペースのノードを表示しますので、マークアップ内の隙間がどこから発生したかがわかります。ホワイトスペースのノードを丸印 (<img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;">) で表して、マウスポインターを載せると説明のツールチップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p><a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a> のデモで、実際の動作をご覧ください。</p> + +<h3 id="仮想ルート">仮想ルート</h3> + +<p>DOM に存在する仮想ルートは、通常の DOM と同じ方法で HTML ページに公開されます。仮想ルートは <code>#shadow-root</code> というノードによって表されます。拡張矢印をクリックすると、仮想 DOM の完全な内容が表示され、ページの DOM の他の部分と同様の方法で含まれるノードを操作できます 限られたフィーチャセット - 仮想 DOM ノードのドラッグアンドドロップや削除はできません。</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16051/shadow-root-in-html-pane.png" style="height: 485px; width: 1303px;"></p> + +<p>仮想 DOM に "slotted" 要素が含まれている場合({{htmlelement("slot")}} 要素の内部に挿入された後の <code>slot</code> 属性を持つ要素 - これらの使用方法の説明については、<a href="/ja/docs/Web/Web_Components/Using_templates_and_slots#Adding_flexibility_with_slots">slot に柔軟性を追加する</a>を参照してください)、"slotted" 要素は対応する {{htmlelement("slot")}} 要素の内部に表示され、その横に "公開" リンクが表示されます。「公開」リンクをクリックすると、仮想 DOM の外に存在する <code>slot</code> 属性を持つ要素が強調表示されます。</p> + +<p><img alt="A view of a shadow root shown inside the DOM tree in the Firefox DevTools" src="https://mdn.mozillademos.org/files/16063/slots.png" style="height: 208px; width: 672px;"></p> + +<p>これは <code><slot></code> 要素があり、そのコンテンツのソースを見つけることができない場合に非常に便利です。</p> + +<div class="note"> +<p><strong>メモ</strong>: 仮想 DOM 検査は Firefox 61 で実装されましたが、現在は dom.webcomponents.shadowdom.enabled プレフィックスの後ろに隠れています。現在、Firefox 63 のようになっているプラットフォームで Web コンポーネント/仮想 DOM が利用可能になると、この機能が有効になります。</p> +</div> + +<h2 id="Element_popup_context_menu" name="Element_popup_context_menu">要素のポップアップコンテキストメニュー</h2> + +<p>ポップアップコンテキストメニューを使用して、特定のノードに対して共通的なタスクを実行できます。要素をコンテキストクリックすると、メニューを表示します。メニューには、以下の項目があります。リンクをクリックすると、{{anch("Context menu reference", "コンテキストメニューリファレンス")}} のコマンド説明を確認できます:</p> + +<ul> + <li><a href="#Edit as HTML">HTML として編集</a></li> + <li><a href="#Create New Node">新しいノードを作成</a></li> + <li><a href="#Duplicate Node">ノードを複製</a></li> + <li><a href="#Delete Node">ノードを削除</a></li> + <li>属性 + <ul> + <li><a href="#Attribute/Add Attribute">属性を追加</a></li> + <li><a href="#Attribute/Edit Attribute">属性を編集</a></li> + <li><a href="#Attribute/Remove Attribute">属性を削除</a></li> + </ul> + </li> + <li><a href="#:hover">hover</a></li> + <li><a href="#:active">active</a></li> + <li><a href="#:focus">focus</a></li> + <li>コピー + <ul> + <li><a href="#Copy Inner HTML">innerHTML</a></li> + <li><a href="#Copy Outer HTML">outerHTML</a></li> + <li><a href="#Copy Unique Selector">CSS セレクター</a></li> + <li><a href="#Copy CSS Path">CSS パス</a></li> + <li><a href="#Copy Image Data-URL">画像のデータ URI</a></li> + <li><a href="#Copy Attribute">属性</a></li> + </ul> + </li> + <li>貼り付け + <ul> + <li><a href="#Paste Inner HTML">innerHTML</a></li> + <li><a href="#Paste Outer HTML">outerHTML</a></li> + <li><a href="#Paste/Before">前</a></li> + <li><a href="#Paste/After">後</a></li> + <li><a href="#Paste/As First Child">最初の子要素として</a></li> + <li><a href="#Paste/As Last Child">最後の子要素として</a></li> + </ul> + </li> + <li><a href="#Expand All">すべて展開</a></li> + <li><a href="#Collapse">折りたたむ</a></li> + <li><a href="#Scroll Into View">この要素の位置にスクロール</a></li> + <li><a href="#Screenshot Node">ノードのスクリーンショットを撮影</a></li> + <li><a href="#Use in Console">コンソールで使う</a></li> + <li><a href="#Show DOM Properties">DOM プロパティを表示</a></li> + <li><a href="#Open Link in New Tab">リンクを新しいタブで開く</a> *</li> + <li><a href="#Open File in Debugger">デバッガーでファイルを開く</a> *</li> + <li><a href="#Open File in Style-Editor">スタイルエディターでファイルを開く</a> *</li> + <li><a href="#Copy Link Address">リンクの URL をコピー</a> *</li> +</ul> + +<p>* これらの項目は特定の状況に限り表示されます。例えば [スタイルエディターでファイルを開く] は、CSS ファイルへのリンクの上でコンテキストクリックしたときに表示されます。</p> + +<h3 id="Context_menu_reference" name="Context_menu_reference">コンテキストメニューリファレンス</h3> + +<div class="note"> +<p><strong>注記</strong>: Firefox 49 よりコンテキストメニューは、よりコンパクトにするため大きく再編されました。メニューの構造が上で示したものと若干異なっていても、悩まないでください。それでも同じ項目を使用できます。</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 30%;"><a id="Edit as HTML">HTML として編集</a></td> + <td><a href="#Editing_HTML">要素の HTML を編集する</a></td> + </tr> + <tr> + <td><a id="Copy Inner HTML">(コピー) innerHTML</a></td> + <td>要素の innerHTML をコピーする</td> + </tr> + <tr> + <td><a id="Copy Outer HTML">(コピー) outerHTML</a></td> + <td> + <p>要素の outerHTML をコピーする</p> + + <p><kbd>Ctrl</kbd> + <kbd>C</kbd> (Mac では <kbd>Cmd</kbd> + <kbd>C</kbd>) を押下すると同じことができます。</p> + </td> + </tr> + <tr> + <td><a id="Copy Unique Selector">(コピー) 一意なセレクタ/CSS セレクター</a></td> + <td>要素を一意に選択する CSS セレクターをコピーする</td> + </tr> + <tr> + <td><a id="Copy CSS Path">(コピー) CSS パス</a></td> + <td>要素へのフルパスを表す CSS セレクターをコピーする</td> + </tr> + <tr> + <td><a id="Copy Image Data-URL">(コピー) 画像のデータ URI</a></td> + <td>選択した要素が画像である場合に、画像を data:// URL としてコピーする</td> + </tr> + <tr> + <td><a id="Copy Attribute">(Copy) 属性</a></td> + <td>要素の属性をコピーする</td> + </tr> + <tr> + </tr> + <tr> + <td><a id="Show DOM Properties">DOM プロパティを表示</a></td> + <td><a href="/ja/docs/Tools/Web_Console#The_split_console">常時表示コンソール</a> を開いて、選択中の要素を <a href="/ja/docs/Tools/Web_Console#Inspecting_objects">調査</a> するために "<code>inspect($0)</code>" コマンドを実行する</td> + </tr> + <tr> + <td><a id="Use in Console">コンソールで使う</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 43 の新機能</p> + </div> + 現在選択しているノードを <code>temp0</code> という名前の変数 (<code>temp0</code> がすでに使用中である場合は、<code>temp1</code> などを使用) に代入して <a href="/ja/docs/Tools/Web_Console#The_split_console">常時表示コンソール</a> を開くことにより、コンソールのコマンドラインを使用してノードと対話できます。</td> + </tr> + <tr> + <td><a id="Expand All">すべて展開</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + ツリービューで、選択した要素および配下の要素をすべて展開します。これは、要素の隣にある展開用矢印を <kbd>Alt</kbd> キーを押下しながらクリックすることと同じです。</td> + </tr> + <tr> + <td><a id="Collapse">折りたたむ</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + ツリービューで、選択した要素を折りたたみます。これは、展開されている要素の展開用矢印をクリックすることと同じです。</td> + </tr> + <tr> + <td><a id="Paste Inner HTML">(貼り付け) innerHTML</a></td> + <td>クリップボード内のコンテンツを、ノードの <a href="/ja/docs/Web/API/element.innerHTML">innerHTML</a> として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste Outer HTML">(貼り付け) outerHTML</a></td> + <td>クリップボード内のコンテンツを、ノードの <a href="/ja/docs/Web/API/element.outerHTML">outerHTML</a> として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/Before">(貼り付け) 前</a></td> + <td>クリップボード内のコンテンツを、ノードの直前に貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/After">(貼り付け) 後</a></td> + <td>クリップボード内のコンテンツを、ノードの直後に貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/As First Child">(貼り付け) 最初の子要素として</a></td> + <td>クリップボード内のコンテンツを、ノードの最初の子要素として貼り付ける</td> + </tr> + <tr> + <td><a id="Paste/As Last Child">(貼り付け) 最後の子要素として</a></td> + <td>クリップボード内のコンテンツを、ノードの最後の子要素として貼り付ける</td> + </tr> + <tr> + <td><a id="Scroll Into View">この要素の位置にスクロール</a></td> + <td> + <p>選択したノードを表示するように、ページをスクロールする</p> + + <p>Firefox 44 よりキーボードショートカット <kbd>S</kbd> でも、選択した要素の位置にスクロールします。</p> + </td> + </tr> + <tr> + <td><a id="Screenshot Node">ノードのスクリーンショットを撮影</a></td> + <td>選択したノードのスクリーンショットを撮影して、ダウンロードディレクトリーに保存します。<a href="/ja/docs/Tools/Taking_screenshots">スクリーンショットを撮影する</a> をご覧ください。</td> + </tr> + <tr> + <td><a id="Create New Node">新しいノードを作成</a></td> + <td>選択中の要素の最後の子要素として、空の <div> 要素を作成します。<a href="#Inserting_new_nodes">新しいノードを挿入する</a> をご覧ください。</td> + </tr> + <tr> + <td><a id="Duplicate Node">ノードを複製</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + 要素をコピーして、当該要素の直後へ挿入します。</td> + </tr> + <tr> + <td><a id="Delete Node">ノードを削除</a></td> + <td>要素を DOM から削除する</td> + </tr> + <tr> + <td><a id="Attribute/Add Attribute">属性/属性を追加</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + 要素に属性を追加する</td> + </tr> + <tr> + <td><a id="Attribute/Edit Attribute">属性/属性を編集</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + (属性でメニューを開いた場合のみ) 属性を編集する</td> + </tr> + <tr> + <td><a id="Attribute/Remove Attribute">属性/属性を削除</a></td> + <td> + <div class="geckoVersionNote"> + <p>Firefox 44 の新機能</p> + </div> + (属性でメニューを開いた場合のみ) 属性を削除する</td> + </tr> + <tr> + <td><a id="Open Link in New Tab">リンクを新しいタブで開く</a></td> + <td>(href 属性など、リンク上でメニューを開いた場合のみ) リンク先のアイテムを新しいタブで開く</td> + </tr> + <tr> + <td><a id="Open File in Debugger">デバッガーでファイルを開く</a></td> + <td>(JS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをデバッガーで開く</td> + </tr> + <tr> + <td><a id="Open File in Style-Editor">スタイルエディターでファイルを開く</a></td> + <td>(CSS ソースへのリンク上でメニューを開いた場合のみ) リンク先のソースをスタイルエディターで開く</td> + </tr> + <tr> + <td><a id="Copy Link Address">リンクの URL をコピー</a></td> + <td>(URL 上でメニューを開いた場合のみ) URL をコピーする</td> + </tr> + <tr> + <td><a id=":hover">:hover</a></td> + <td><a href="/ja/docs/Web/CSS/:hover" title="Web/CSS/:hover">:hover</a> CSS 疑似クラスを設定する</td> + </tr> + <tr> + <td><a id=":active">:active</a></td> + <td><a href="/ja/docs/Web/CSS/:active" title="Web/CSS/:active">:active</a> CSS 疑似クラスを設定する</td> + </tr> + <tr> + <td><a id=":focus">:focus</a></td> + <td><a href="/ja/docs/Web/CSS/:focus" title="Web/CSS/:focus">:focus</a> CSS 疑似クラスを設定する</td> + </tr> + </tbody> +</table> + +<h2 id="Editing_HTML" name="Editing_HTML">HTML として編集</h2> + +<p>HTML ペインで、HTML (タグ、属性、内容物) を直接編集できます。編集したい要素をダブルクリックして、編集してください。Enter キーを押下すると、変更点が直ちに反映されます。</p> + +<p>要素の <a href="/ja/docs/Web/API/Element.outerHTML">outerHTML</a> を編集するには、要素のポップアップメニューを開いて [HTML として編集] を選択します。HTML ペイン内にテキストボックスが現れます:</p> + +<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>ここに任意の HTML を追加できます。要素のタグを変更する、既存の要素を変更する、新たな要素を追加するといったことが可能です。ボックスの外部をクリックすると、変更点をページに適用します。</p> + +<p>Firefox 52 より、HTML を編集しているときのコンテキストメニューが、テキストの編集において一般的なものになりました:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="Copy_and_paste" name="Copy_and_paste">コピーと貼り付け</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">ポップアップメニュー</a> を使用して、HTML ツリー内のノードのコピーや希望する場所へノードを貼り付けることができます。</p> + +<h3 id="Drag_and_drop" name="Drag_and_drop">ドラッグ・アンド・ドロップ</h3> + +<p>HTML ツリーでノードを移動することができます。要素をクリックアンドホールドして、ツリー内でドラッグしてください。マウスボタンを離すと、対応する場所に要素を挿入します:</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> + +<p>Firefox 44 より、<kbd>Esc</kbd> キーを押下するとドラッグ・アンド・ドロップをキャンセルできます。</p> + +<h3 id="Inserting_new_nodes" name="Inserting_new_nodes">新しいノードを挿入する</h3> + +<div class="geckoVersionNote">Firefox 48 の新機能</div> + +<p>Firefox 48 より、マークアップビューの上部に "+" 印のアイコンがあります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p> + +<p>このアイコンをクリックすると、現在選択している要素の最後の子要素として、空の <code><a href="/ja/docs/Web/HTML/Element/div"><div></a></code> 要素をドキュメントに挿入します。そしてドキュメント内の他のノードと同様に、新しいノードの内容やスタイルを編集できます。</p> + +<p>{{EmbedYouTube("NG5daffvVZM")}}</p> + +<p>ポップアップメニューの [新しいノードを作成] を使用して、同じ機能にアクセスできます。</p> + +<p>最後に子要素を追加しても効果がないタイプの要素 (例えば <code><a href="/ja/docs/Web/HTML/Element/html"><html></a></code> や <code><a href="/ja/docs/Web/HTML/Element/iframe"><iframe></a></code> 要素など) を選択しているときは、このボタンが無効になりますので注意してください。ただし、<code><div></code> を挿入することが無効である場所 (<code><a href="/ja/docs/Web/HTML/Element/style"><style></a></code> や <code><a href="/ja/docs/Web/HTML/Element/link"><link></a></code> など) では有効になります。このような場合は、要素をテキストとして挿入します。</p> 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 +--- +<div>{{ToolsSidebar}}</div><h2 id="Viewing_the_box_model" name="Viewing_the_box_model">ボックスモデルの確認</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">要素選択ボタン</a> を押しているとき、ページ上で要素にマウスポインターを載せると、要素の <a href="/ja/docs/Web/CSS/box_model">ボックスモデル</a> をオーバーレイで表示します:</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>HTML ペインで要素のマークアップにマウスポインターを載せた場合も、同様にオーバーレイで表示します:</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<p>要素がインライン要素であり複数の行ボックスに分かれている場合は、要素を構成するそれぞれの行ボックスをハイライト表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p> + +<h3 id="The_Box_Model_view" name="The_Box_Model_view">ボックスモデルビュー</h3> + +<p>要素を選択すると、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビュー</a> でボックスモデルを詳しく調べることができます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>値にマウスポインターを載せると、その値がどのルールに由来するかを示すツールチップを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>ボックスモデルビューでボックスモデルの一部にマウスポインターを載せると、ページ上で対応する部分をハイライト表示します:</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Editing_the_box_model" name="Editing_the_box_model">ボックスモデルの編集</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">ボックスモデルビュー</a> では値の編集も可能であり、変更結果はページへ即座に反映します:</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p>インスペクタでは <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>の要素の横に「イベント」という単語が表示され、イベントリスナーがバインドされています。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16253/inspect_element_with_eventhandler.png" style="border: 1px solid black; display: block; height: 24px; margin-left: auto; margin-right: auto; width: 491px;"></p> + +<p>アイコンをクリックすると、この要素にバインドされているすべてのイベントリスナーを一覧表示するポップアップが表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16254/inspector_event_handlers.png" style="border: 1px solid black; display: block; height: 702px; margin-left: auto; margin-right: auto; width: 828px;">各行には以下が含まれます。</p> + +<ul> + <li>右向きの矢頭。クリックして行を展開し、リスナー関数のソースコードを表示します。</li> + <li>スタックを指し示すカーブした矢印。それをクリックすると、デバッガにハンドラのコードが表示されます。</li> + <li>この要素にハンドラがアタッチされたイベントの名前</li> + <li>リスナーの名前と行番号。ここをクリックして行を展開し、リスナー関数のソースコードを表示することもできます</li> + <li>イベントがバブルかどうかを示すラベル</li> + <li>イベントを定義するシステムを示すラベル。Firefox は次のように表示できます： + <ul> + <li>標準の DOM イベント</li> + <li><a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery イベント</a></li> + <li><a href="https://facebook.github.io/react/docs/events.html">React イベント</a></li> + </ul> + </li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>FlexBox Inspector</strong> を使用すると、Firefox DevTools を使用して <a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox のレイアウト</a>を調べたり、ページにある flex コンテナを見つけたり、レイアウトを調べたり修正したり、レイアウトの問題をデバッグするなどの作業を行うことができます。</p> + +<h2 id="Flex_コンテナの検出">Flex コンテナの検出</h2> + +<p>ページ上の HTML 要素に <code><a href="/ja/docs/Web/CSS/display">display: flex</a></code> が適用されている場合、flexbox のレイアウト機能に簡単にアクセスできるように DevTools にいくつかの機能が用意されています。</p> + +<h3 id="HTML_ペインから">HTML ペインから</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a>では、flexbox コンテナを使用してレイアウトされた要素の横に <code>flex</code> という単語があります。</p> + +<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/16342/flexbox_html.png" style="display: block; height: 458px; margin: 0px auto; width: 586px;"></p> + +<h3 id="CSS_ペインから">CSS ペインから</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a>のルールビューでは、<code><a href="/ja/docs/Web/CSS/display">display: flex</a></code> 宣言のインスタンスは <code>flex</code> という単語の隣に小さなフレックスボックスアイコン <img alt="" src="https://mdn.mozillademos.org/files/16345/flexbox_icon.gif" style="height: 15px; width: 17px;"> を表示します。アイコンをクリックすると、flexbox の子要素の詳細がどのように表示されるかを示すオーバーレイの表示が切り替わります。</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/16343/flexbox_css.png" style="display: block; height: 177px; margin: 0px auto; width: 353px;"></p> + +<p>アイコンをクリックすると、要素の上に表示されるページ上のオーバーレイの表示が切り替わり、グリッド線とトラックの位置が表示されます。</p> + +<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/16344/flexbox_overlay.png" style="display: block; height: 743px; margin: 0px auto; width: 950px;"></p> + +<p>他の要素を選択するとオーバーレイが表示されるので、関連する CSS プロパティを編集して flexbox がどのように影響を受けているかを確認できます。</p> + +<h3 id="レイアウト_Flex_コンテナセクション">レイアウト Flex コンテナセクション</h3> + +<p>ページが1つ以上の flexbox コンテナで構成される場合、CSS ペインのレイアウトビューには、コンテナのコンポーネントを表示するための多数のオプションを含む「Flex コンテナ」セクションが含まれています。これらの詳細については、以下のセクションで調べることができます。</p> + +<div class="note"> +<p><strong>メモ</strong>: レイアウトビューはページインスペクタの右側のペインにあるレイアウトタブの下にあります。上記および以下のスクリーンショットは、これに到達する方法に関するさらなるヒントを与えるはずです。</p> +</div> + +<h2 id="Flex_コンテナオプション">Flex コンテナオプション</h2> + +<p>レイアウトビューの Flex コンテナセクションは次のようになります。</p> + +<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/16346/flexbox_settings.png" style="border-style: solid; border-width: 1px; display: block; height: 319px; margin: 0px auto; width: 351px;"></p> + +<p>Flex Container セクションで変更できる設定は2つあります。</p> + +<ul> + <li>この例をクリックすると、オーバーレイの色を制御できます。カラースウォッチをクリックすると、カラーピッカーがポップアップし、オーバーレイの別の色を選択できます。</li> + <li>Flex コンテナセクションの右側にあるスイッチは、オーバーレイのオンとオフを切り替えます。</li> +</ul> + +<h2 id="Flex_アイテムプロパティ">Flex アイテムプロパティ</h2> + +<p>flexbox の各コンポーネントには、要素名とそのクラス (存在する場合) を含む番号付きのエントリがあります。要素の上にカーソルを置くと、ページ上で強調表示されます。</p> + +<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/16347/flexbox_component.png" style="border: 1px solid black; display: block; height: 23px; margin: 0px auto; width: 117px;"></p> + +<p>アイテムをクリックすると、そのコンポーネントの詳細が表示されます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16348/flexbox_component_detail.png" style="border: 1px solid black; display: block; height: 379px; margin: 0 auto; width: 337px;"></p> + +<p>このビューには、コンポーネントに関する3つの情報が表示されます。</p> + +<ul> + <li>コンポーネントの形状</li> + <li>ベースサイズ - 親による制約が課せられていないコンポーネントのサイズ</li> + <li>最終サイズ - フレックスボックスによってサイジング制約が課された後にコンポーネントが持つサイズが適用されます。</li> +</ul> + +<p>セクションの上部に、選択された項目の名前は、flexboxコンテナのすべてのコンポーネントのドロップダウンリストです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16349/flexbox_component_list.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 338px;"></p> + +<p>このドロップダウンを使用して、flexbox 内の他のコンポーネントを選択できます。</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary"><strong>グリッドインスペクター</strong>で、Firefox の開発ツールを使用して <a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS グリッドレイアウト</a> を調査できます。ページ上にあるグリッドを見つける、グリッドを調査および変更する、レイアウトのの問題をデバッグするといったことが可能です。</p> + +<div class="note"> +<p><strong>注記</strong>: この記事にあるスクリーンショットで示す例は、Jen Simmons による <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> や <a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid</a>、および Rachel Andrew による <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">名前付きグリッド領域の例</a> です。</p> +</div> + +<h2 id="Discovering_CSS_grids" name="Discovering_CSS_grids">CSS グリッドを発見する</h2> + +<p>ページ内に <code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> が適用された HTML 要素があるとき、グリッドの機能へ簡単にアクセスできるようにするため、開発ツールでいくつかの機能を使用できます。</p> + +<h3 id="In_the_HTML_pane" name="In_the_HTML_pane">HTML ペインの機能</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> では、グリッド方式でレイアウトされる要素のそばに "grid" マークがつきます。</p> + +<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p> + +<h3 id="In_the_CSS_pane" name="In_the_CSS_pane">CSS ペインの機能</h3> + +<p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> のルールビューでは、<code><a href="/ja/docs/Web/CSS/display">display: grid</a></code> 宣言の実体にグリッドアイコン (<img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">) を表示します。</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p> + +<p>アイコンをクリックすると、ページ上にグリッドをオーバーレイ表示する機能の有効・無効を切り替えます。これは要素に重ねて表示され、グリッドの線やトラックの位置を示すためにグリッドのように並べられます。</p> + +<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p> + +<p>このオーバーレイは別の要素を選択しても表示し続けますので、関連する CSS プロパティを編集して、グリッドにどのような影響があるかを確認できます。</p> + +<h3 id="The_Layout_view_Grid_section" name="The_Layout_view_Grid_section">レイアウトビューのグリッドセクション</h3> + +<p>ページ内にグリッドがあるとき、グリッドを確認するためのさまざまなオプションがある "グリッド" セクションが CSS ペインのレイアウトビューに表示されます。詳しくは後の章で説明します。</p> + +<div class="note"> +<p><strong>注記</strong>: レイアウトビューは、ページインスペクターの右側のペインにある<em>Layout</em>タブの中にあります。この記事内のスクリーンショットで、どこにあるかのヒントを得られるでしょう。</p> +</div> + +<h2 id="Grid_options" name="Grid_options">グリッドのオプション</h2> + +<p>レイアウトビューのグリッドセクションは以下のようなものです:</p> + +<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p> + +<p>セクション内にオプションがいくつかあります:</p> + +<ul> + <li>グリッドをオーバーレイ表示: さまざまな設定とともに、ページ上にそれぞれのグリッドを表示するためのチェックボックスがあります。オーバーレイ表示のオン・オフを切り替えできます。</li> + <li>グリッドの表示設定: + <ul> + <li>線番号を表示: それぞれのグリッドオーバーレイで線番号の表示をオン・オフできます (デフォルトでオン)。</li> + <li>領域名を表示: グリッドの領域に名前がある場合に、領域名の表示をオン・オフできます (妥当であればデフォルトでオン)。</li> + <li>グリッド線を無限に延伸: デフォルトで、グリッドの線やトラックは <code>display: grid</code> が設定された要素の内部に限って表示します。このオプションを有効にすると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。</li> + </ul> + </li> + <li>ミニグリッドビュー: 現在オーバーレイ表示しているグリッドを縮小表示します。</li> +</ul> + +<div class="note"> +<p><strong>注記</strong>: オーバーレイの色や表示設定は、ページごとに再読み込み後も維持します。</p> +</div> + +<p>これらの機能を、さらに詳しく見ていきましょう</p> + +<h3 id="Overlay_grid" name="Overlay_grid">グリッドをオーバーレイ表示</h3> + +<p>"グリッドをオーバーレイ表示" セクションに、ページ上のそれぞれのグリッドの項目が表示されます:</p> + +<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p> + +<p>それぞれの項目の構成は (左から右の順に) 以下のとおりです:</p> + +<ul> + <li>グリッドのオーバーレイ表示のオン・オフを切り替えるチェックボックス。現在、オーバーレイは同時に 1 つしか表示しませんので注意してください。</li> + <li>グリッドを表すラベル。グリッドが適用された HTML 要素を識別するセレクターです。ここをクリックしても、オーバーレイ表示のオン・オフを切り替えできます。</li> + <li>標的のアイコン。クリックすると、このグリッドに関連する HTML 要素を HTML ペインで選択します。</li> + <li>グリッドオーバーレイの主要な色を変更できるカラーピッカー。グリッドを区別しやすくするため、色を変えるのに便利です。</li> +</ul> + +<h3 id="Display_line_numbers" name="Display_line_numbers">線番号を表示</h3> + +<p>デフォルトで、グリッドオーバーレイに線番号を表示します。</p> + +<p><img alt="A CSS grid overlay with grid line numbers displayed" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p> + +<p>"線番号を表示" のチェックを外すと、線番号が消えます。</p> + +<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Display_area_names" name="Display_area_names">領域名を表示</h3> + +<p>領域名があるグリッドでは、デフォルトで領域名をグリッドオーバーレイに表示します。</p> + +<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p> + +<p>"領域名を表示" のチェックを外すと、領域名が消えます。</p> + +<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p> + +<h3 id="Extend_lines_infinitely" name="Extend_lines_infinitely">グリッド線を無限に延伸</h3> + +<p>デフォルトで、グリッドの線やトラックは <code>display: grid</code> が設定された要素の内部に限って表示します。</p> + +<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> + +<p>"グリッド線を無限に延伸" にチェックを入れると、グリッド線がそれぞれの軸にそってビューポートの端まで延伸します。</p> + +<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p> + +<h3 id="Mini_grid_view" name="Mini_grid_view">ミニグリッドビュー</h3> + +<p>現在オーバーレイ表示しているグリッドを、実際のグリッドに比例して小さく表示します。</p> + +<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p> + +<p>ミニグリッドのさまざまな領域にマウスポインターを載せると、グリッドオーバーレイで対応する領域もハイライト表示されます。また、領域の寸法や列番号・行番号などの有用な情報をツールチップで表示します。</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — さまざまな興味深いグリッドの例</li> + <li><a href="https://gridbyexample.com/">Grid by Example</a> — Rachel Andrew による、CSS グリッドを学ぶための資料</li> + <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — MDN の CSS グリッドレイアウトのリファレンスやチュートリアル</li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">ここには様々な HOW TO へのリンクがあります。これらのリンク先では、各技術の HOW TO について詳しく説明しています。</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> 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 +--- +<div>{{ToolsSidebar}}</div><p>CSS ペインの <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> ではルールに色の値が含まれる場合に、値の隣に色のサンプルを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>色サンプルをクリックすると、その色を変更できるカラーピッカーがポップアップします:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>カラーピッカーに、スポイトのアイコンがあります。このアイコンをクリックすると、要素の色をページ内から新たに選択するスポイトツールを使用できます:</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>Firefox 40 より、Shift キーを押しながら色サンプルをクリックすると、色単位を切り替えます:</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>Firefox 53 以降で、<a href="https://drafts.csswg.org/css-color/">CSS color level 4</a> の色の値をサポートします。</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>インスペクターを開く方法は、主に 2 つあります:</p> + +<ul> + <li><strong><em>要素を選択せずに開く</em></strong>: メニューバーで [ツール] → [ウェブ開発] → [インスペクター] を選択するか、同等の <a href="/ja/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">キーボードショートカット</a> を押下する。</li> + <li><strong><em>要素を選択して開く</em></strong>: ウェブページ上で要素を右クリックして、[要素を調査] を選択する。</li> +</ul> + +<p>インスペクターがブラウザーウィンドウの下部に現れます:</p> + +<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;"></p> + +<p>インスペクターで何を行うかを知るために、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour">UI ツアー</a> をご覧ください。</p> 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 +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote">Firefox 48 の新機能</div> + +<p>Firefox 48 より、絶対的に配置されている要素をページ上でドラッグして移動できるようになりました。</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p><code>{{cssxref("position")}}</code> プロパティが <code>absolute</code>、<code>relative</code> または <code>fixed</code> に設定されており、また {{cssxref("top")}}、{{cssxref("bottom")}}、{{cssxref("left")}}、{{cssxref("right")}} プロパティのいずれかが指定されていると、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Computed_view">ボックスモデルビュー</a> にボタンを表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>ボタンをクリックすると、要素の隣にハンドルを 2 つ表示します:</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>このハンドルを使用して、ページ内で要素を移動できます。</p> + +<p>要素が絶対配置されている場合は、オフセット元を表す波線を表示します。相対配置の要素では、ノードの元の位置を波線で示します。オフセット量は、それぞれの方向について線とツールチップで示します。</p> 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 +--- +<div>{{ToolsSidebar}}</div><p><em>選択された要素</em> は、ページ内でインスペクターが現在注目している要素です。選択された要素は <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML ペイン</a> に表示します。また、要素の CSS を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS ペイン</a> に表示します。</p> + +<p><em>ハイライト表示された要素</em> は、ボックスモデルを表す図や、タグやサイズを表すツールチップをページ内で重ね合わせている要素です:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="With_the_context_menu" name="With_the_context_menu">コンテキストメニューで選択する</h2> + +<p>ページ内の要素上でコンテキストメニューを開いて [要素を調査] を選択すると、インスペクターが開いて即座に要素を選択します:</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="With_the_HTML_pane" name="With_the_HTML_pane">HTML ペインで選択する</h2> + +<p>インスペクターを開いているとき、HTML ペイン内に並んでいる要素上でマウスポインターを動かすのに応じて、対応する要素をページ内でハイライト表示します。HTML ペインでクリックすると、要素を選択します:</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>キーボードの矢印キーを使用して、DOM 内を移動することもできます。</p> + +<h2 id="With_the_node_picker" name="With_the_node_picker">ノードピッカーで選択する</h2> + +<p>"ノードピッカー" のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (<em>要素を選択</em> アイコンとも呼ばれます) をクリックしてノードピッカーを起動すると、ページ自体で要素を選択できます。ページ内でマウスポインターを動かすと、ポインターの下にある要素をハイライト表示します。要素をクリックすると、選択します:</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> + +<p>Firefox 52 より、<kbd>Shift</kbd> を押しながら要素をクリックすると、要素を選択しますがピッカーを引き続き使用できます。これにより CSS ペインで要素のルールを確認でき、ページ内の別の要素を簡単に選択できます。</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p><em>選択された</em>要素は、インスペクタが現在フォーカスしているページの要素です。 選択した要素が<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTMLペイン</a>に表示され、そのCSSが<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSSペイン</a>に表示されます。</p> + +<p>強調表示された要素は、ページにオーバーレイされた要素で、ボックスモデルを示すグラフィックとそのタグとサイズを示すツールチップです。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="コンテキストメニューを使用する">コンテキストメニューを使用する</h2> + +<p>インスペクタを開いて要素をすぐに選択するには、ページ内の要素のコンテキストメニューをアクティブにして、「要素の検証」を選択します。</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="HTML_ペインを使用する">HTML ペインを使用する</h2> + +<p>インスペクタが開いているときに、HTMLペインにリストされている要素の周りにマウスを移動すると、対応する要素がページ内で強調表示されます。 HTMLペインで要素をクリックして選択します。</p> + +<p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>矢印キーを使用して、キーボードでDOMの周りを移動することもできます。</p> + +<h2 id="ノードピッカーを使用する">ノードピッカーを使用する</h2> + +<p>ページ自体の要素を選択するには、その要素のアイコン <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (「要素の選択」アイコンとも呼ばれます) をクリックして"node picker"をアクティブにします。その後、ページ上でマウスを動かすと、マウスの下の要素が強調表示されます。要素をクリックして選択します。</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> 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 +--- +<div>{{ToolsSidebar}}</div><p>Firefox アドオンは、chrome://browser/content/devtools/inspector/inspector.xul コンテキストから以下のオブジェクトにアクセスできます:</p> + +<h3 id="window.inspector" name="window.inspector">window.inspector</h3> + +<p><a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a> で定義しています。属性と関数:</p> + +<ul> + <li>.selection - インスペクターで選択したものに関する情報: + <ul> + <li>.isNode() - 選択したものがノードである場合に true を返します。</li> + <li>.node - ページから実際の要素を返します。</li> + <li>.window - 選択したものが含まれているフレームの window オブジェクトです。</li> + </ul> + </li> + <li>.markDirty() - インスペクターによって変更されたページをマークします。インスペクターで施した変更点は再読み込みによって書き換えられるため、ページから去るときに警告を表示します。</li> +</ul> + +<p>バインド可能なイベント:</p> + +<h4 id="markuploaded" name="markuploaded">markuploaded</h4> + +<p>ページを変更した後、左側のパネルが更新されたときに呼び出されます。</p> + +<h4 id="ready" name="ready">ready</h4> + +<p>最初の markuploaded で呼び出されます。</p> + +<h4 id="pseudoclass" name="pseudoclass">pseudoclass</h4> + +<p>疑似クラスの切り替え後に呼び出されます。</p> + +<h4 id="layout-change" name="layout-change">layout-change</h4> + +<p>"描画やリサイズなどのための、低優先度の変更イベント"</p> 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 +--- +<div>{{ToolsSidebar}}</div><p>インスペクターで選択されている要素は、変数 <code>$0</code> を使用してウェブコンソールから参照できます。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10057/console-$0.png" style="display: block; margin-left: auto; margin-right: auto; width: 761px;"></p> + +<p>ウェブコンソールに出力された DOM 要素の隣に、標的のアイコンがあります。このアイコンにマウスポインターを載せると、ページ上で要素をハイライト表示します。またアイコンをクリックすると、要素がインスペクターで選択されます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10059/console-highlight.png" style="display: block; margin-left: auto; margin-right: auto; width: 760px;"></p> 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 +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で、<a href="/ja/docs/Web/CSS/background-image">background-image</a> で指定した画像のプレビューを確認できます。ルールにマウスポインターを載せてください:</p> + +<p id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/11215/css-image-preview.png" style="display: block; height: 422px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<p>Firefox 41 より、画像の宣言上で右クリックすると、画像を data: URL としてコピーするメニュー項目があります:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11213/css-copy-image-data-url.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 587px;"></p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">この記事は、Firefox 開発ツールで使用可能なフォントツールのツアーです。このツールはブラウザーに読み込んだ文書に適用されたフォントに対して、適用されたすべてのフォントを調査する、あるいはバリアブルフォントの軸の値を細かく調整するなど、表示や調査のために役に立つツールが含まれています。</p> + +<div class="note"> +<p><strong>注記:</strong> この記事に示されているように、更新されたフォントツールは Firefox 63 以降で利用できます。古いバージョンの Firefox を使用している場合、ツールは見た目や動作が全く同じではありませんが、似ています (特にフォントエディターは利用できません)。</p> +</div> + +<h2 id="The_Fonts_tab" name="The_Fonts_tab">フォントタブ</h2> + +<p><a href="/ja/docs/Tools/Page_Inspector">インスペクター</a> をウィンドウの下側に表示している場合は、右側にフォントタブがあります。右側または左側に表示している場合は、HTML ペインの下にフォントタブがあります。タブは以下のようにして表示できます:</p> + +<ol> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">インスペクターを開きます</a>。</li> + <li>フォントタブを選択します。CSS ペインの右側に表示されるタブの末尾にあります。</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p> + +<p>フォントタブは 3 つの主要なセクションに分かれています:</p> + +<ul> + <li>"Fonts used" : 現在調査中の要素で使用しているフォント。</li> + <li>新しいフォントエディター。Firefox 61 および 62 では、このセクションがありません。</li> + <li>"All fonts on page" : このセクションは、ページで使用しているすべてのフォントを表示します。Firefox 61 および 62 ではこの領域が "ページ内の他のフォント" という名前であり、"Fonts used" セクションにあるフォントが含まれません。</li> +</ul> + +<h2 id="Fonts_used" name="Fonts_used">Fonts used</h2> + +<p>フォントエディターの最初のセクションは、現在調査中の要素で使用しているフォントを、フォントファミリーでグループ化して表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p> + +<p>調査中の要素にフォントが適用されたテキストコンテンツがある場合に、フォントが "使用されている" と判断します。空要素はフォントが使用されませんので、"No fonts were found for the current element." というメッセージが表示されます。</p> + +<p>以下の理由のいずれかを理由として、このセクションにフォントが表示されます:</p> + +<ul> + <li>要素の <code>font-family</code> CSS 宣言の値に指定されている。</li> + <li>ブラウザーのデフォルトスタイル (ラテン文字ではほとんどのブラウザーで Times New Roman) が要素に適用されており、作者が定義したフォントは与えらえていない。</li> + <li>フォントが適用されたテキストコンテンツを持つほかの要素を包含しているなど、調査中の要素の子孫でフォントが使用されている。</li> + <li><code>font-family</code> CSS 宣言で指定されたフォントがないため、システムの既定のフォントが使用されている。</li> +</ul> + +<h2 id="Fonts_Editor" name="Fonts_Editor">フォントエディター</h2> + +<p>Firefox 63 でフォントエディターを追加しました。"Fonts used" の下にある新たな領域であり、フォントの特性を編集するコントロールがあります。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p> + +<p>通常の (静的な) フォントでは、以下の設定を変更できます。</p> + +<h3 id="Size" name="Size">サイズ</h3> + +<p>調査中の要素の {{cssxref("font-size")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p> + +<p><code>em</code>、<code>rem</code>、<code>%</code>、<code>px</code>、<code>vh</code>、<code>vw</code> の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>pt</code> など、ほかの単位を <code>font-size</code> や <code>line-height</code> で使用したい場合は、<a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で調査中の要素に、その単位を使用する値を適用します。フォントエディターが自動的に値を拾って単位のドロップダウンメニューに割り当てて、単位が使用可能になります。</p> +</div> + +<p>単位を変更すると数値を新しい単位で同等の値に変換しますので、同じ計算値が維持されます。</p> + +<p>例: <code>1rem</code> が 10 ピクセルと等価である場合に単位を <code>rem</code> から <code>px</code> に変更すると、<code>2rem</code> は <code>20px</code> になります。</p> + +<h3 id="Line_height" name="Line_height">Line height</h3> + +<p>調査中の要素の {{cssxref("line-height")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>単位なし、または <code>em</code>、<em>%</em>、<code>px</code> の単位を使用して設定できます。スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。</p> + +<p>単位を変更すると、<code>font-size</code> の設定に応じて値を変換します。</p> + +<p>例: フォントのサイズが 20 ピクセルで line-height が <code>1.5em</code> である場合に単位を <code>em</code> から <code>px</code> に変更すると、値が <code>30px</code> になります。</p> + +<h3 id="Weight" name="Weight">太さ</h3> + +<p>調査中の要素の {{cssxref("font-weight")}} です。</p> + +<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>スライダーを使用するか、テキストボックスに直接数値を入力して値を設定できます。バリアブルではないフォントではスライダーの範囲が 100 から 900 であり、100 ずつ増えます。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>wght</code> バリエーション軸を定義する <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">バリアブルフォント</a> (後述) は、独自の範囲を持ちます。</p> +</div> + +<h3 id="Italic" name="Italic">イタリック</h3> + +<p>調査中の要素の {{cssxref("font-style")}} です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> + +<p>この設定は、<code>font-style</code> プロパティの値 <code>italic</code> と <code>normal</code> を切り替えます。</p> + +<div class="note"> +<p><strong>注記</strong>: この設定を変更すると、Firefox はページ上の表示を直ちに変更するためにインラインスタイルを適用します。</p> +</div> + +<h2 id="All_fonts_on_page" name="All_fonts_on_page">All fonts on page</h2> + +<p>フォントタブの最後にある領域に、ページ上で使用しているすべてのフォントを、展開可能なリストで表示します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p> + +<p>このリストは、フォントがウェブフォントかシステムのフォントかを簡単に判別できますので便利です。</p> + +<p>このセクションでは、それぞれのフォントで以下の情報を提供します:</p> + +<ul> + <li>フォントの、<code>font-family</code> における識別子と正式名称。</li> + <li>システムで使用できないウェブフォントである場合は、フォントファイルの URL。あるいはコンピューターから読み込んだフォント (既定のシステムフォント、または以前システムにインストールしたウェブフォント) である場合は "システム" と表示します。URL の右にあるアイコンをクリックすると、フォントファイルの URL をコピーします。</li> + <li>ウェブフォントである場合に、フォントをページに読み込む際の {{cssxref("@font-face")}} ディスクリプター。ディスクリプターは展開可能であり、展開するとスタイルシートで定義されたすべての構文を表示します。</li> + <li>フォントをレンダリングした結果を理解するための文字列サンプル。既定のサンプル文字列は "Abc" ですが、セクションの最上部にある入力フィールドをクリックして新しい値を入力することで、編集可能です。入力した文字列は、すべてのサンプル文字列に設定されます。</li> +</ul> + +<h2 id="Variable_font_support_in_Firefox_Developer_Tools" name="Variable_font_support_in_Firefox_Developer_Tools">Firefox 開発ツールでバリアブルフォントをサポート</h2> + +<p>Firefox 62 でバリアブルフォントをサポートして、Firefox 63 ではフォントエディターでバリアブルフォントプロパティの編集機能をサポートしました。</p> + +<h3 id="What_are_variable_fonts" name="What_are_variable_fonts">バリアブルフォントとは?</h3> + +<p><a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">バリアブルフォント</a> または <strong>OpenType Font Variations</strong> は、フォントデザイナーがひとつのフォントファイルに複数のタイプフェイスのバリエーションを含むことを可能にする、新しいフォントファイル形式を定義します。これはバリアブルフォントが使用可能なタイプフェイス全体を表すときは、ひとつのページに複数の異なるウェブフォントを適用する必要がなく、変更したい特性で望む値を含めて提供すればよいことを意味します。</p> + +<p>バリアブルフォントは許容範囲が <strong>バリエーション軸</strong> (詳しくは <a href="/ja/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> をご覧ください) で定義されていますので、フォントの特性を細かい粒度で簡単に変更できます。例えば、バリアブルフォントでは {{cssxref("font-weight")}} を 1 から 1000 の任意の値に設定できます (ただし、バリアブルフォントがこの範囲全体をサポートすることは保証されません)。</p> + +<p>登録済みの軸がいくつかあります。これらの軸をすべてのフォントが定義する必要はありませんが、フォントデザイナーが登録済みの軸を<em>実装する</em>場合は、その動作が定義済みの動作に<em>従うことが必要です</em>。</p> + +<p>すべてのバリアブルフォント軸に、4 文字の軸タグがあります。CSS の <code>{{cssxref("font-variation-settings")}}</code> プロパティは、キーと値のペアでタグを使用します。例えば <code>font-variation-settings</code> を使用して {{cssxref("font-weight")}} を設定するには以下のようにします:</p> + +<pre class="brush: css">font-variation-settings: "wght" 350;</pre> + +<p>ただし <code>font-variation-settings</code> は、(独自の軸など) 特性値を設定するために基本的なフォントプロパティを使用できない場合の最終手段に限って使用するべきです。</p> + +<div class="note"> +<p><strong>注記</strong>: <code>font-variation-settings</code> を使用して設定したフォントの特性値は、対応する基本的なフォントプロパティ (<code>font-weight</code> など) で設定した値に必ず上書きされます。これはカスケーディングによって現れた値も含まれます。</p> +</div> + +<p>登録済みの軸と対応する CSS プロパティを以下に示します:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">軸タグ</th> + <th scope="col">CSS プロパティ</th> + </tr> + </thead> + <tbody> + <tr> + <td>"wght"</td> + <td>{{cssxref("font-weight")}}</td> + </tr> + <tr> + <td>"wdth"</td> + <td>{{cssxref("font-stretch")}}</td> + </tr> + <tr> + <td>"slnt" (slant)</td> + <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> + </tr> + <tr> + <td>"ital"</td> + <td>{{cssxref("font-style")}}: <code>italic</code></td> + </tr> + <tr> + <td>"opsz"</td> + <td> + <p>{{cssxref("font-optical-sizing")}}</p> + </td> + </tr> + </tbody> +</table> + +<p>登録済みの軸のリストに含まれない軸は、独自の軸であると考えられます。独自の軸に対応する CSS フォントプロパティはありません。フォントデザイナーは、希望する軸をなんでも定義できます。それぞれの軸に、一意の 4 文字のタグが必要です。軸の名前と範囲の定義は、フォントデザイナー次第です。</p> + +<div class="note"> +<p><strong>注記</strong>: 登録済みの軸タグは小文字のタグであるのに対して、独自の軸は大文字のタグにするべきです。フォントデザイナーがこの慣習に従うことは強制されておらず、従っていないものもあることに注意してください。ここで重要なことは、軸タグが大文字と小文字を区別することです。</p> +</div> + +<div class="warning"> +<p><strong>警告</strong>: バリアブルフォントを使用するために、オペレーティングシステムを最新の状態にしておくことが必要です。例えば Linux OS では最新バージョンの Linux Freetype が必要であり、また 10.13 より古い macOS はバリアブルフォントをサポートしていません。最新ではないオペレーティングシステムでは、ウェブページや Firefox 開発ツールでバリアブルフォントを使用できない場合があります。</p> +</div> + +<h4 id="Working_with_Variable_fonts_in_the_Font_Editor" name="Working_with_Variable_fonts_in_the_Font_Editor">フォントエディターでバリアブルフォントを扱う</h4> + +<p>調査中の要素でバリアブルフォントを使用している場合に、個々のフォントに実装されている軸と、軸の値を変更するコントロールをフォントタブに表示します。これは、個々のフォントでどの軸が使用可能かをすばやく見つける際に役に立ちます。フォントデザイナーが基本的に自由に軸を実装できるようになると、劇的に役に立つでしょう。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p> + +<p>これらの軸は個別に調節できます。またフォントデザイナーが定義済みのインスタンスを含めていれば "Instance" ドロップダウンリストでそれらを選択でき、ページの表示も更新します。</p> + +<p>以下に、さまざまな軸を定義したフォントの例を 2 つ示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p> + +<p>以下の例では、"Cheee Variable" フォントに Yeast や Gravity の設定があることがわかります。これらはフォントデザイナーが定義した独自の軸です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p> + +<p>1 番目の画像は、既定の設定のフォントをページで使用した状態です。2 番目の画像は、同じフォントで "Hi Yeast Hi Gravity" バリエーションを選択した後の状態です。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p> + +<ul> +</ul> + +<h2 id="Tips" name="Tips">ヒント</h2> + +<p>最後に、フォントタブを有効に使用するためのヒントをいくつか紹介します:</p> + +<ul> + <li>インスペクターの <a href="/ja/docs/Tools/Page_Inspector/3-pane_mode">3 ペインモード</a> を使用しているとき、フォントタブの隣に調査中の要素の CSS ルールを同時に表示します。</li> + <li>ルールビューで {{cssxref("font-family")}} プロパティにマウスポインターを載せると、フォントのサンプルをツールチップで表示します: + <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p> + </li> + <li>上のスクリーンショットでは、<code>font-family</code> のフォントの羅列で、調査中の要素へ実際に適用されたフォントに下線が引かれていることにも気づくでしょう。これは、指定された多くのフォントでどれが適用されたかを簡単に発見できるようにします。</li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div><p><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> で <a href="/ja/docs/Web/CSS/transform"><code>transform</code></a> プロパティにマウスポインターを載せると、ページ上に変形操作をオーバーレイ表示します:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9961/transform.png" style="display: block; height: 1670px; margin-left: auto; margin-right: auto; width: 1968px;"></p> 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) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>アニメーションインスペクタの UI は、Firefox 43 で改良しました。Firefox 43 以降でアニメーションインスペクタがどのようになったかを知りたい場合は、<a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">"アニメーションを扱う" のメインページ</a>をご覧ください。</p> +</div> + +<p>Firefox 41 および 42 では、アニメーションインスペクタで以下のことができます:</p> + +<ul> + <li>ページ上で実行しているすべてのアニメーションの情報</li> + <li>すべてのアニメーションの再生/一時停止</li> + <li>それぞれのアニメーションの再生/一時停止/早戻し/早送り (Firefox 39 の新機能)</li> + <li>アニメーションの特定の時点にジャンプする (Firefox 39 の新機能)</li> + <li>アニメーションするノードのハイライト表示と調査 (Firefox 40 の新機能)</li> + <li>それぞれのアニメーションの再生レートを調節する (Firefox 40 の新機能)</li> + <li>アニメーションを Compositor スレッドで実行しているかを表示する (それぞれのアニメーションの隣に、稲妻のアイコンを表示します) (Firefox 41 の新機能)</li> +</ul> + +<p>{{EmbedYouTube("0vSIuKaqD8o")}}</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用するアニメーションのサンプルです。</p> + +<h3 id="HTML_コンテンツ">HTML コンテンツ</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/> + <span id="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="CSS_コンテンツ">CSS コンテンツ</h3> + +<pre class="brush: 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; +} +</pre> + +<h3 id="JavaScript_コンテンツ">JavaScript コンテンツ</h3> + +<pre class="brush: js">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); +</pre> 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 +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="firefox-logo-animation" name="firefox-logo-animation">firefox-logo-animation</h2> + +<p><a href="/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS トランジション</a>を使用したアニメーションの例。</p> + +<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> + +<pre class="brush: html"><div class="channel"> + <img src="https://mdn.mozillademos.org/files/11827/developer.png" class="icon"/> + <span class="note">Firefox Developer Edition</span> +</div></pre> + +<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> + +<pre class="brush: 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; +} +</pre> + +<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> + +<pre class="brush: js">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);</pre> 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 +--- +<div>{{ToolsSidebar}}</div><p>本記事では、アニメーションの視覚化と編集が可能な 3 つのツールを扱います:</p> + +<ul> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">アニメーションインスペクター</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">@keyframes の編集</a></li> + <li><a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">タイミング関数の編集</a></li> +</ul> + +<h2 id="Animation_inspector" name="Animation_inspector">アニメーションインスペクター</h2> + +<p>ページインスペクターの <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Animations_view">アニメーションビュー</a> では、ページ内のアニメーションを時間の時系列に沿って表示します。また、時系列上の任意の位置に移動するために使用する、ドラッグ可能なウィジェットがあり、ある時点のページの状態を確認できます。</p> + +<p>このビューでは <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>、<a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations">CSS @keyframes 規則</a>、<a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用して作成したアニメーションを表示します。Firefox 48 より、<code><a href="/ja/docs/Web/CSS/::before">::before</a></code> および <code><a href="/ja/docs/Web/CSS/::after">::after</a></code> 疑似要素に適用したアニメーションも表示します。</p> + +<p>ビューの動作を知るために、サンプルを使用してひととおり見ていきましょう。以下のボックス内に、<a href="/ja/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a> を表すグレースケールのアイコンがあります。アイコンをクリックすると膨張して色がつき、ブラウザ名が現れます。もう一度アイコンをクリックすると、元に戻ります。</p> + +<p>{{EmbedLiveSample('firefox-logo-animation', 500, 200, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API")}}</p> + +<p>これらのアニメーションは、<a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用して作成しました。</p> + +<p>このサンプルで何が起きているかを、アニメーションインスペクターで見ていきましょう。</p> + +<ol> + <li>ボックス内を右クリックして [要素を調査] を選択します。</li> + <li><code><div class="channel"></code> 要素が選択されていることを確認します。</li> + <li>[アニメーション] タブに切り替えます。</li> + <li>アニメーションを再生します。</li> +</ol> + +<p>{{EmbedYouTube("3f_vtdHqt9o")}}</p> + +<p>ここで、アニメーションインスペクターの内容を詳しく見ていきましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14508/animation-inspector-1.png" style="display: block; height: 216px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p>これは、選択中の要素や子要素に適用されているすべてのアニメーションをひとつの時系列に表示したタイムラインです。時系列は最初のアニメーションの開始時点から始まり、最後のアニメーションの終了時点で終わります。また、250 ミリ秒ごとにマーカーがついています (表示しているアニメーションの時間規模に依存します)。</p> + +<h3 id="Animation_bars" name="Animation_bars">アニメーションバー</h3> + +<p>それぞれのアニメーションやトランジションは、時系列に沿って水平方向に並ぶバーとして表示します。また、バーは以下のように表示します:</p> + +<ul> + <li>プロパティを変化させる <code><a href="/ja/docs/Web/CSS/transition">transition</a></code> を使用している場合は青色で表示</li> + <li><a href="/ja/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> アニメーション</a> を使用している場合は橙色で表示</li> + <li><a href="/ja/docs/Web/API/Web_Animations_API">Web Animations API</a> を使用している場合は緑色で表示</li> +</ul> + +<p>Compositor スレッドを使用してプロパティのアニメーションを行っている場合は稲妻のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/13106/compositor.png" style="width: 15px;">) を表示します (詳しくは <a href="/ja/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">さまざまな CSS プロパティでアニメーションを行うコスト</a> をご覧ください)。</p> + +<p>Firefox 52 よりバーの形状が、アニメーションで使用するイージング効果を反映するようになりました。前出の例では 1 番目のバーが凹型で ease-in、2番目のバーが凸型で ease-out を表していることがわかります。</p> + +<p>CSS トランジションのアニメーションでは、それぞれのプロパティのトランジションをひとつのバーで表し、トランジションを行うプロパティの名称を記載します。CSS <code>@keyframes</code> のアニメーションでは、それぞれのアニメーションをひとつのバーで表し、キーフレームの名前を記載します。</p> + +<p>アニメーションやトランジションに遅延がある場合は、その部分を斜線で網掛け表示します。<a href="/ja/docs/Web/API/Web_Animations_API/Animation_timing_options"><code>delay</code> および <code>endDelay</code></a> の両方を表します。</p> + +<p>バーにマウスポインターを載せると以下の情報を含む、アニメーションやトランジションの詳細情報を記載したツールチップを表示します:</p> + +<ul> + <li>アニメーションの種類: CSS トランジション、CSS アニメーション、Web Animations API</li> + <li>アニメーションの再生時間</li> + <li>アニメーションの開始および終了時の遅延</li> + <li>アニメーションのイージング (またはタイミング関数)</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14510/animation-inspector-2.png" style="display: block; height: 291px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<h3 id="Information_about_the_animated_element" name="Information_about_the_animated_element">アニメーションする要素の情報</h3> + +<p>バーの左側に、アニメーションを適用した要素のセレクターがあります。セレクターにマウスポインターを載せると、ページ上で要素をハイライト表示します。セレクターをクリックすると、要素をインスペクターで選択します。</p> + +<p>{{EmbedYouTube("ygATdrzQz0I")}}</p> + +<p>セレクターの左側に、"標的" のアイコン (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">) があります。このアイコンをクリックすると、要素をハイライト表示したままにします。</p> + +<h3 id="Animation_details" name="Animation_details">アニメーションの詳細情報</h3> + +<p>バーをクリックすると、アニメーションで変化するすべてのプロパティについて詳細情報を表示します。例えば、<code>img#icon</code> のアニメーションのバーをクリックしてみましょう:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14512/animation-inspector-3.png" style="display: block; height: 260px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p><code><a href="/ja/docs/Web/CSS/filter">filter</a></code> と <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> の、2 つのプロパティが変化していることがわかります。それぞれのドットは、アニメーションで使用しているキーフレームのセット内にある、プロパティの項目を示します。どちらのプロパティも 0ms で開始、750ms で終了しています。<code>filter</code> は 250ms で、<code>transform</code> は 500ms で値が与えられています。ドットにマウスポインターを載せると、タイムライン上の特定の時点でプロパティに与えられた値を確認できます:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14514/animation-inspector-4.png" style="display: block; height: 260px; margin-left: auto; margin-right: auto; width: 738px;"></p> + +<p>これは要するに、アニメーションの <a href="/ja/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_example:_Web_Animations_API#JavaScript_Content">キーフレーム</a> を視覚化したものです:</p> + +<pre class="brush: js line-numbers language-js">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%)' } +];</pre> + +<h3 id="Application_to_the_example" name="Application_to_the_example">サンプルに応用する</h3> + +<p>これらすべてをサンプルに適用すると、以下のことがわかります:</p> + +<ul> + <li>アニメーションは <code>span#note</code> および <code>img#icon</code> の、2 つの要素で行っています。これらのセレクターにマウスポインターを載せると、それぞれブラウザー名 "Firefox Developer Edition" とブラウザーのアイコンであることがわかります。</li> + <li><code>img#icon</code> のアニメーションについて: + <ul> + <li>アイコンのサイズ変更と着色のため、<code><a href="/ja/docs/Web/CSS/filter">filter</a></code> および <code><a href="/ja/docs/Web/CSS/transform">transform</a></code> プロパティでアニメーションを行っています。</li> + <li>終端は 750ms で、100ms の <code>endDelay</code> があります。</li> + <li>Compositor スレッドを使用します。</li> + <li><code><a href="/ja/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> の値 <code>ease-in</code> が指定されました。緑色のバーが凹型形状であることからわかります。</li> + </ul> + </li> + <li><code>span#note</code> のアニメーションについて: + <ul> + <li>名称を徐々に表示するため、<code><a href="/ja/docs/Web/CSS/width">width</a></code> および <code><a href="/ja/docs/Web/CSS/opacity">opacity</a></code> プロパティでアニメーションを行っています。</li> + <li>終端は 500ms で、150ms の <code>delay</code> があります。</li> + <li><code><a href="/ja/docs/Web/API/AnimationEffectTimingProperties/easing">easing</a></code> の値 <code>ease-out</code> が指定されました。緑色のバーが凸型形状であることからわかります。</li> + </ul> + </li> +</ul> + +<h3 id="Animation_playback" name="Animation_playback">アニメーションを再生する</h3> + +<p>アニメーションインスペクターの上部に、以下のウィジェットがあります:</p> + +<ul> + <li>アニメーションの再生/一時停止および再実行するボタン</li> + <li>アニメーションの再生速度を変更するドロップダウンリスト</li> + <li>アニメーションの経過時間を表示する</li> +</ul> + +<p>最後に、時系列の上部にあるバーの内部をクリックすると、左右にドラッグしてアニメーションを前後に遷移させることが可能なスクラバーを使用できます。これにより、いつ何が起きているかを正確に把握できます:</p> + +<p>{{EmbedYouTube("9fxRm3i_aDQ")}}</p> + +<h3 id="Further_information_about_animation_compositing" name="Further_information_about_animation_compositing">アニメーションの合成に関する詳細情報</h3> + +<p>Firefox 49 よりアニメーションインスペクターで、アニメーションのパフォーマンスや合成に関する情報を提供する機能が向上しました。これを説明するために、サンプルを 2 つ作成しました。<a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html">animation-inspector-compositing.html</a> を開いて赤色の長方形をクリックすると、シンプルな {{cssxref("opacity")}} のアニメーションが始まります。Firefox 49 以降でこれをアニメーションインスペクターで見ると、以下のことがわかります:</p> + +<ul> + <li>白色の稲妻アイコンは、すべてのアニメーションプロパティが Compositor を使用して実行するよう最適化されているかを示しており、有効になっています。</li> + <li>バーのツールチップにも、リマインダーとしてこの情報が含まれています。"すべてのアニメーションのプロパティが最適化されています" というメッセージがあります。</li> + <li>アニメーション情報を展開すると、Compositor によってアニメーションが最適化されているプロパティ名の隣に稲妻のアイコンを表示します。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13589/compositing-information-1.png" style="display: block; height: 349px; margin: 0px auto; width: 1065px;"></p> + +<p>次に <a href="https://mdn.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html">animation-inspector-compositing-silly.html</a> を見てみましょう。こちらも同様のサンプルですが、赤色の長方形をクリックすると {{cssxref("opacity")}} と同時に、{{cssxref("left")}} や {{cssxref("transform")}} (translation なし) プロパティもアニメーションする点が異なります。位置プロパティと translation を同時に実行することにはあまり意味がありません (2 つの効果は同期しません) ので、<code>transform</code> プロパティは意図的に Compositor で扱われません。Firefox 49 以降、アニメーションインスペクターはこれをより役に立つように伝えます。アニメーションインスペクターで見ると、以下のことがわかります:</p> + +<ul> + <li>バーにあった白色の稲妻アイコンが灰色の稲妻アイコンに変わっており、関連プロパティの一部しか Compositor によって最適化されていないことを示します。</li> + <li>バーのツールチップにも、リマインダーとしてこの情報が含まれています。"一部のアニメーションのプロパティが最適化されています" というメッセージがあります。</li> + <li>アニメーションが<strong>最適化されていない</strong>プロパティで、コードを改良すれば最適化できるものに、点線の下線を表示します。以下のスクリーンショットで transform をご覧ください。プロパティ名にマウスポインターを載せると、理由を説明するツールチップを表示します。この例では、"同一要素上の位置プロパティを同時にアニメーションする場合、このコンポジタでは ‘transform’ のアニメーションを実行できません。" というメッセージです。</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13591/compositing-information-2.png" style="display: block; height: 394px; margin: 0px auto; width: 1158px;"></p> + +<h2 id="Edit_keyframes" name="Edit_keyframes">@keyframes の編集</h2> + +<p>選択中の要素に関連付けられた <a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes 規則</a> を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#Rules_view">ルールビュー</a> に表示します。また、編集も可能です:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Edit_timing_functions" name="Edit_timing_functions">タイミング関数の編集</h2> + +<p><a href="/ja/docs/Web/Guide/CSS/Using_CSS_animations">CSS アニメーション</a> を作成する際に、<a href="/ja/docs/Web/CSS/animation-timing-function">タイミング関数</a> を指定できます。これはアニメーションが進むペースを定義します。タイミング関数の指定方法のひとつが、3 次ベジェ曲線による指定です。</p> + +<p>ルールビューで、3 次ベジェ曲線で定義したタイミング関数の隣にアイコンを表示します。このアイコンをクリックすると視覚的な曲線エディターを表示します。<a href="/ja/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 および P2</a> をドラッグして、その結果をページ上で確認できます。</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>この機能は、<a href="http://cubic-bezier.com">Lea Verou の cubic-bezier.com</a> 由来のオープンソースコードを使用しています。</p> + +<p>3 次ベジェ曲線エディターに多くのプリセットを用意しました。これらは "Ease-in"、"Ease-out"、"Ease-in-out" にグループ化されています:</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> |