diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:07:59 +0100 |
commit | 6ef1fa4618e08426b874529619a66adbd3d1fcf0 (patch) | |
tree | 890e3e27131be010d82ef957fa68db495006cb0e /files/ja/tools/page_inspector | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.gz translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.tar.bz2 translated-content-6ef1fa4618e08426b874529619a66adbd3d1fcf0.zip |
unslug ja: move
Diffstat (limited to 'files/ja/tools/page_inspector')
-rw-r--r-- | files/ja/tools/page_inspector/3d_view/index.html | 103 | ||||
-rw-r--r-- | files/ja/tools/page_inspector/how_to/edit_fonts/index.html (renamed from files/ja/tools/page_inspector/how_to/view_fonts/index.html) | 0 | ||||
-rw-r--r-- | files/ja/tools/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.html (renamed from files/ja/tools/page_inspector/how_to/work_with_animations/animations_examples/index.html) | 0 | ||||
-rw-r--r-- | files/ja/tools/page_inspector/html_panel/index.html | 35 | ||||
-rw-r--r-- | files/ja/tools/page_inspector/style_panel/index.html | 69 |
5 files changed, 0 insertions, 207 deletions
diff --git a/files/ja/tools/page_inspector/3d_view/index.html b/files/ja/tools/page_inspector/3d_view/index.html deleted file mode 100644 index daac55be01..0000000000 --- a/files/ja/tools/page_inspector/3d_view/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 3D ビュー -slug: Tools/Page_Inspector/3D_view -tags: - - HTML - - Tools - - Web Development - - 'Web Development:Tools' -translation_of: Tools/3D_View ---- -<div>{{ToolsSidebar}}</div><div class="warning"> -<p>Firefox 47 より、3D ビューは使用できません。</p> - -<p>同様の機能を提供するアドオンがあります: <a href="https://addons.mozilla.org/firefox/addon/tilt/">https://addons.mozilla.org/firefox/addon/tilt/</a>。ただし組み込み版と同じく、このアドオンは<a href="/ja/docs/Mozilla/Firefox/Multiprocess_Firefox">マルチプロセス Firefox</a> で動作しません。</p> -</div> - -<p>3D ビューボタンをクリックすると、ページが 3D ビューモードに移行します。このモードでは HTML で入れ子のブロックが、ページの底部から外側へ飛び出すかたちで次第に "高く" なるように 3D 描画されたページを見ることができます。このビューは、コンテンツの入れ子構造の視覚化を容易にします。</p> - -<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> - -<p>ビューをクリックしてドラッグすると、ページの DOM 階層構造の 3D 表示を別の視点から見たり、構造を確認しやすくするために回転することや向きの変更ができます。オフスクリーンの要素が見えるようになりますので、見えているコンテンツに対して要素がどこに配置されているかを確認できます。また要素をクリックすると、その HTML を <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a> や <a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a> で参照できます。逆にパンくずリストで要素をクリックすると、3D ビュー内で選択されている要素を変更できます。</p> - -<p>ページ調査ツールに 3D ビューボタンが表示されない場合は、使用しているグラフィックドライバを更新する必要があるかもしれません。詳しくは、<a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">ブロックリストに登録されたドライバのページ</a>をご覧ください。</p> - -<h2 id="Controlling_the_3D_view" name="Controlling_the_3D_view">3D ビューのコントロール</h2> - -<p>3D ビューで使用できるキーボードショートカットとマウス操作を以下に示します。</p> - -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">機能</td> - <td class="header">キーボード</td> - <td class="header">マウス</td> - </tr> - <tr> - <td>ズームイン/アウト</td> - <td><kbd>+</kbd> / <kbd>-</kbd></td> - <td>ホイールの上回転/下回転</td> - </tr> - <tr> - <td>左右の回転</td> - <td><kbd>a</kbd> / <kbd>d</kbd></td> - <td>左右へのドラッグ</td> - </tr> - <tr> - <td>上下の回転</td> - <td><kbd>w</kbd> / <kbd>s</kbd></td> - <td>上下へのドラッグ</td> - </tr> - <tr> - <td>左右の移動</td> - <td><kbd>←</kbd> / <kbd>→</kbd></td> - <td>左右へのドラッグ</td> - </tr> - <tr> - <td>上下の移動</td> - <td><kbd>↑</kbd> / <kbd>↓</kbd></td> - <td>上下へのドラッグ</td> - </tr> - <tr> - <td>ズームレベルの初期化</td> - <td><kbd>0</kbd></td> - <td>ズームレベルを既定の状態に初期化します。</td> - </tr> - <tr> - <td>選択したノードへフォーカス</td> - <td><kbd>f</kbd></td> - <td>選択したノードが見えるようにビューを移動します。 {{fx_minversion_inline("13.0")}}</td> - </tr> - <tr> - <td>ビューの初期化</td> - <td><kbd>r</kbd></td> - <td>ズーム、回転、移動を既定の状態に初期化します。{{fx_minversion_inline("12.0")}}</td> - </tr> - <tr> - <td>選択中のノードを隠す</td> - <td><kbd>x</kbd></td> - <td>現在選択しているノードを非表示にします。これは覆い隠されているノードを明らかにする必要がある場合に役立ちます。{{fx_minversion_inline("12.0")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Use_cases_for_the_3D_view" name="Use_cases_for_the_3D_view">3D ビューの用途</h2> - -<p>さまざまな状況で 3D ビューは役に立ちます:</p> - -<ul> - <li>壊れた HTML によりレイアウトの問題が発生している場合に 3D ビューで確認することで、どこに誤りがあるかを見つけることの助けになります。レイアウトの問題は、コンテンツの入れ子関係の誤りによって発生することがよくあります。3D ビューで表示してどの要素が誤った入れ子になっているかを見ると、入れ子の誤りがより明確になります。</li> - <li>コンテンツが表示されない場合に、その理由がわかるかもしれません。3D ビューではページの可視領域の外側に表示されている要素を見るためにズームアウトすることができますので、この方法で外れているコンテンツを見つけることができます。</li> - <li>レイアウトを最適化する方法があるかを調べるために、ページがどのような構造であるかを確認することができます。</li> - <li>また、3D ビューの表示は<strong>印象的</strong>です。</li> -</ul> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Tools/Page_Inspector" title="Page Inspector">ページインスペクタ</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML パネル</a></li> - <li><a href="/ja/docs/Tools/Page_Inspector/UI_Tour#CSS_pane" title="Style panel">スタイルパネル</a></li> - <li><a href="/ja/docs/Tools" title="Tools">開発ツール</a></li> - <li><a href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (ブログ記事)</li> -</ul> diff --git a/files/ja/tools/page_inspector/how_to/view_fonts/index.html b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html index dc20a581e8..dc20a581e8 100644 --- a/files/ja/tools/page_inspector/how_to/view_fonts/index.html +++ b/files/ja/tools/page_inspector/how_to/edit_fonts/index.html 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/animation_inspector_example_colon__css_transitions/index.html index 3f0900fd07..3f0900fd07 100644 --- 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/animation_inspector_example_colon__css_transitions/index.html diff --git a/files/ja/tools/page_inspector/html_panel/index.html b/files/ja/tools/page_inspector/html_panel/index.html deleted file mode 100644 index 3210682298..0000000000 --- a/files/ja/tools/page_inspector/html_panel/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: HTML panel -slug: Tools/Page_Inspector/HTML_panel -translation_of: Tools/Page_Inspector/UI_Tour -translation_of_original: Tools/Page_Inspector/HTML_panel ---- -<div>{{ToolsSidebar}}</div><p>{{ fx_minversion_header("10.0") }}</p> - -<p>ページ調査ツールの HTML パネルでは、調査ツールで現在選択している要素の HTML 構文を周囲の HTML と共に閲覧することができますので、その要素を生成する文脈を見ることができます。これはサイトのデバッグや、特定のレイアウトがどのように作られているかの学習に役立ちます。</p> - -<div class="note"><strong>注意:</strong> HTML パネルの表示/非表示は Ctrl-H を押すことで切り替えできます。</div> - -<h2 id="HTML_のナビゲートを行う">HTML のナビゲートを行う</h2> - -<p>HTML 中のノードをクリックして、さらなる調査のために要素を選択することができます。また、要素を選択していないときに HTML パネルを開いている場合は、マウスポインタを載せている要素の HTML を表示するようにパネルの内容が自動更新されます。これは、コードの問題点の発見に役立つツールにもなります。</p> - -<p><img alt="html-panel.png" class="default internal" src="/@api/deki/files/6073/=html-panel.png"></p> - -<p>HTML パネルを表示しているときは、ページ調査ツールのツールバーの右端にリサイズ用のウィジェットが表示されますので、一度に見たい HTML の量に合わせてサイズを調節することができます。</p> - -<h2 id="属性の実験を行う">属性の実験を行う</h2> - -<p>ソース中の属性値をダブルクリックして新しい値を入力することで、HTML 属性の値を変更することができます:</p> - -<p><img alt="edit-html-attr.png" class="default internal" src="/@api/deki/files/6080/=edit-html-attr.png"></p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/ja/Tools/Page_Inspector/Style_panel" title="ja/Tools/Page_Inspector/Style panel">Style panel</a></li> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> -</ul> - -<p>{{ languages( { "en": "en/Tools/Page_Inspector/HTML_panel"} ) }}</p> diff --git a/files/ja/tools/page_inspector/style_panel/index.html b/files/ja/tools/page_inspector/style_panel/index.html deleted file mode 100644 index bbfb74ccca..0000000000 --- a/files/ja/tools/page_inspector/style_panel/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Style panel -slug: Tools/Page_Inspector/Style_panel -translation_of: Tools/Page_Inspector#CSS_pane -translation_of_original: Tools/Page_Inspector/Style_panel ---- -<div>{{ToolsSidebar}}</div><p>ページ調査ツールのスタイルパネルでは、調査を行っているページの CSS を調べたり操作したりすることができます。このパネルには選択されている要素に紐づけられている CSS に関する 2 つのビューがあります: CSS ルールを基にしたビューと、プロパティを基にしたビューです。</p> - -<p>{{ 英語版章題("The Rules view") }}</p> - -<h2 id="ルールビュー">ルールビュー</h2> - -<p><img alt="style-rules.png" class="internal lwrap" src="/@api/deki/files/6075/=style-rules.png" style="float: left;">ルールビュー (左図) では、スタイルが<a href="/ja/DOM/stylesheet" title="stylesheet">スタイルシート</a>の編成方法に似た形式でまとめられています。ここには選択された要素に適用しているルールが、そのルールが要素に与えたプロパティ (およびその値) と共に表示されます。また、最後に適用したスタイルがリストの始めに表示されます。スタイルは供給源ごとにグループ化され、そのスタイルが読み込まれたファイルの名前が表示されます。なお、"インライン" グループは HTML の <code>style</code> 属性を用いて適用されたスタイルをリスト化します。</p> - -<p>継承されたスタイルはその旨が注記され、また後から適用されたスタイルに上書きされたスタイルには取り消し線が引かれます。よって、ある要素のスタイルの由来がどこかを明らかにすることを簡単にし、また要素のスタイルが予期しないものになってしまう問題のデバッグに役立つでしょう。</p> - -<p>また、ルールビューでは CSS に変更を加えることができます。あるスタイルの適用/非適用を切り替えるには、そのスタイルの隣にあるチェックボックスをクリックしてください。変更点はブラウザウィンドウ内へ直ちに反映されます。</p> - -<p>加えて、プロパティ名をクリックして新しい名前を入力することで、プロパティの名前を変えることができます。同様にプロパティの値をクリックして新しい値を入力することで、値を変えることもできます。</p> - -<p>閉じ括弧 ("<span class="nowiki">}</span>") がある行をクリックすることで、新しいプロパティを追加することができます。新しい行が追加されて、プロパティ名とその値を入力することができます。</p> - -<p>すべての変更内容は一時的なものです。ページを再読み込みすると、元のスタイルに戻ります。</p> - -<p>例えば "Sign in" ボタンの {{ HTMLElement("a") }} 要素に、以下に示したルールの新しいプロパティを追加してみましょう:</p> - -<p><img alt="font-size.png" class="default internal" src="/@api/deki/files/6076/=font-size.png" style="border: 1px solid black;"></p> - -<p>フォントサイズが大きくされたので、ボタンが以前よりも大きくなります。このように、コンテンツで実験を行ったり、作業中のコンテンツで何をすればどのような外見になるかをリアルタイムに確認したりすることにスタイルパネルを使用できます。</p> - -<p>{{ 英語版章題("New features in Firefox 13") }}</p> - -<p>ある宣言のために CSS の大規模な編集を行いたい場合は、背景が灰色の見出し行 (スクリーンショットで "mdn-min.css:1" などのような箇所) をクリックしましょう。すると、当該宣言を定義する場所にカーソルを置いた状態で<a href="/ja/Tools/Style_Editor" title="Style Editor">スタイルエディタ</a>が開きます。</p> - -<p>宣言の部分で右クリックすると、その宣言をさまざまな方法でコピーする項目があるポップアップメニューを表示しますので、例えば別のドキュメントに貼り付けるといったことができます。</p> - -<p>編集中、あるプロパティに対して不正な値を入力したり未知のプロパティ名を入力したりすると、黄色の警告アイコンをプロパティの隣へ以下のように表示します:</p> - -<p><img alt="style-panel-warning-icon.png" class="default internal" src="/@api/deki/files/6223/=style-panel-warning-icon.png"></p> - -<p>{{ 英語版章題("The Properties view") }}</p> - -<h2 id="プロパティビュー">プロパティビュー</h2> - -<p>一方プロパティビューでは、選択された要素に適用されているすべてのプロパティやその値を、どのスタイルシートやルールがその値を設定したかと共に表示します。これらはアルファベット順に並べられ、また見たい項目を簡単に発見できる検索機能も提供されています。</p> - -<p><img alt="style-properties.png" class="internal rwrap" src="/@api/deki/files/6077/=style-properties.png" style="float: right;">既定の状態ではページのスタイルシートで設定したスタイルだけが表示されますが、"ユーザ CSS のみ" のチェックボックスのチェックを外すことで、ブラウザの既定のスタイルも表示することができます。</p> - -<p>検索ボックスに入力することでリアルタイムに一覧の絞り込みが行われます。例えばフォント関連の設定内容だけを見たい場合は、検索ボックスに "font" と入力すれば名前に "font" が含まれるプロパティだけが表示されます。同様に、プロパティの値を検索することもできます。例えば、フォントに "Lucida Grande" が適用されることの起因となるルールを探したいとします。その場合は、フォント名を検索ボックスに入力してください。</p> - -<p>プロパティ名の隣にある三角印をクリックすると、プロパティの値・プロパティがどのように適用されたか・そのプロパティの由来はどこかといった詳細情報が表示されます。</p> - -<p>{{ 英語版章題("Learning more about properties") }}</p> - -<h3 id="プロパティについて詳しく学ぶ">プロパティについて詳しく学ぶ</h3> - -<p><img alt="showing-info-icon.png" class="internal lwrap" src="/@api/deki/files/6079/=showing-info-icon.png" style="float: left;">よく知らない CSS プロパティや、より詳しく知りたいプロパティがあるときにとても便利な機能があります: プロパティビューでプロパティ名にマウスポインタを載せると、小さな "情報" アイコンが表示されます。このアイコンをクリックすると、Mozilla Developer Network の Wiki にある当該プロパティのドキュメントが表示されます。</p> - -<p>{{ 英語版章題("See also") }}</p> - -<h2 id="参考情報">参考情報</h2> - -<ul> - <li><a href="/ja/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> - <li><a href="/ja/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/ja/Tools" title="Tools">Tools</a></li> -</ul> - -<p>{{ languages( { "en": "en/Tools/Page_Inspector/Style_panel"} ) }}</p> |