2011-09-05 6 views
1

私は、他のものよりもはるかに高いものとしてそれを取ったリスト項目を持っているデザインには少し問題があります。私はこれがデザインの別の要素のためだと感じています。ページ上のどの要素が他の要素に影響を与えているかを示すプラグインまたはツールですか?

私はFirebugを使い、時にはChromeの開発ツールを使用します。

これらのツールは、何かの高さやCSSのスタイルがオブジェクトに与える影響を確認するのに使用できますが、他のオブジェクトが他のオブジェクトにどのように影響しているかを示します。

誰かが、デザインの関係オブジェクトがお互いにあることを示すツールを見つけましたか?その長いショットが、見つかる場所があれば、ここにいるだろう。

ありがとうございました。

+0

「他のオブジェクトが他のオブジェクトにどのように影響を与えているか」このことはどういう意味ですか?あなたはもう少し明確になりますか?私があなたの質問を正しく理解していれば、DreamweaverのようなHTMLエディタを使ってHTML要素の概要を説明することができます –

+0

それ以外のものは探していますが、Dreamweaverはありません。この種のプラグインや火かき棒のスイッチが見えませんか? – willdanceforfun

+0

他のオブジェクトが他のオブジェクトにどのように影響を与えているか、つまり、このオブジェクトの高さがここで右に増えると、ページの反対側のオブジェクトを押し下げるhtmlランドに非表示の線が描画されます。ブラウザはこの関係を見ることができるようですが、私はそうではありません。試行錯誤によってのみ、要素を削除することで、他の要素に影響を与えていることを知ることができます。最初から良いスコープとコードが必要なのは明らかですが、このようなプラグインが必要な場合があります。 – willdanceforfun

答えて

1

ChromeとFirefoxで利用可能なwebdeveloperをご覧ください。これは非常に広範なプラグインですが、必要なことを実行できるはずです。

デバッグするページに移動し、さまざまなアウトラインオプションを繰り返してください。 「アウトラインブロックレベルの要素」から始め、そこからあなたの道を進んでください。

+0

十分に閉じます。乾杯。 – willdanceforfun

+0

プラグインをFireFoxで使用する場合、CTRL + SHIFT + Fを使用して要素情報モードを切り替えます –

+0

ありがとうございます。私はこれまでクロムで試してきました。 – willdanceforfun

1

あなたの質問に間違いがありますが、FirebugまたはChrome Developer Toolを使用している場合は、デザイン内のさまざまな要素のネストを検査して、デザインを見直す方法を教えてください。それらの要素。

唯一の難しい部分は、これらのツールの使い方を学ぶことです。そのためには、YouTubeのビデオを見ることをお勧めします。私にとって少なくとも、それは私が学んだ方法です。誰かがあなたを直接見せることができない限り、次の最良の選択肢は、それらのツールがビデオを通してどのように機能するかを示す誰かです。

+0

@stephen - それに感謝します。私はすでに要素を削除する方法を知っているし、問題を見つけるために(そして持っている)そのようにデバッグすることができます。私は試行錯誤のビットを削除するかもしれない何かを探しています。 – willdanceforfun

関連する問題