
多くの場合、一部の顧客は、レイアウト用にサイトのレイアウトを提供し、すべてのブラウザーのマークアップでピクセル単位の正確な精度を必要とします。
この対応を確認するのは簡単です-サイトのスクリーンショットを撮って、たとえばPhotoshopでグラフィックレイアウトと組み合わせる必要があります。
ただし、レイアウトプロセスでのみ、このような手法を使用するのはあまり便利ではありません。
Firefoxのソリューション
最近、FirefoxのPixel Perfectというアドオンに出会いました。レイアウトの上に半透明のレイアウトが表示されるため、すべての不正確さがすぐに表示されます。
また、Pixel Perfectは誰にとっても素晴らしいものであり、Firefoxのみを対象としています。レイアウトはさまざまなブラウザーで動作するはずです。
皆のためのソリューション
<script>
介してhtmlマークアップを使用してファイルに接続できる小さなスクリプトを作成しました。
また、対応する拡張機能(または組み込みの0機能)があるすべてのブラウザーで、 ユーザースクリプト ( グリースモンキースクリプト )として使用することもできます。
レイアウトをスクリプトにフィードするには、レイアウトをpng、jpg、またはgif形式で、レイアウトをlayout.png(jpgまたはgif)に変更した後、htmlファイルがあるディレクトリにドロップするだけです。
ホットキー:
- Shift +スペース -レイアウトレイヤーの表示/非表示
- ctrl + Enter-レイアウトサイズに合わせてブラウザーウィンドウのサイズを変更します(FF、IE6、およびSafariで動作します)
/* : */
#pmOverlay { /* div, image */
text-align: center;
}
#pmOverlayImg {
/* image */
}