From 6ef1fa4618e08426b874529619a66adbd3d1fcf0 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:07:59 +0100 Subject: unslug ja: move --- .../ja/conflicting/tools/page_inspector/index.html | 69 ++++++++++++++++++++++ .../tools/page_inspector/ui_tour/index.html | 35 +++++++++++ 2 files changed, 104 insertions(+) create mode 100644 files/ja/conflicting/tools/page_inspector/index.html create mode 100644 files/ja/conflicting/tools/page_inspector/ui_tour/index.html (limited to 'files/ja/conflicting/tools/page_inspector') 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 +--- +
{{ToolsSidebar}}

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

+ +

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

+ +

ルールビュー

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

font-size.png

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

style-panel-warning-icon.png

+ +

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

+ +

プロパティビュー

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

参考情報

+ + + +

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

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 +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("10.0") }}

+ +

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

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

HTML のナビゲートを行う

+ +

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

+ +

html-panel.png

+ +

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

+ +

属性の実験を行う

+ +

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

+ +

edit-html-attr.png

+ +

参考情報

+ + + +

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

-- cgit v1.2.3-54-g00ecf