unslug ja: move

2 files changed, 104 insertions, 0 deletions

diff --git a/files/ja/conflicting/tools/page_inspector/index.html b/files/ja/conflicting/tools/page_inspector/index.html
new file mode 100644
index 0000000000..bbfb74ccca
--- /dev/null
+++ b/files/ja/conflicting/tools/page_inspector/index.html
@@ -0,0 +1,69 @@
+---
+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>
diff --git a/files/ja/conflicting/tools/page_inspector/ui_tour/index.html b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..3210682298
--- /dev/null
+++ b/files/ja/conflicting/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,35 @@
+---
+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>