Screen Ruler: ウェブを測定

任意のウェブページ上の任意の要素のサイズ、距離、マージンおよびパディングを測定します。

Screen Rulerは、ウェブサイトの実装を検証したいウェブ開発者やデザイナーにとって完璧なコンパニオンです。一度アクティブにすると、Screen Rulerは要素の上にホバーするだけでサイズ、マージン、パディング、タグ名、ID、クラスを表示できます。また、他の要素との距離を測定するために要素を選択することもできます。 使用方法 - 拡張機能アイコンをクリックするか、右クリックコンテキストメニューから「Screen Ruler」を選択するか、ショートカット `Alt/Option + Shift + R` を使用してScreen Rulerを切り替えます。 - ウェブページ上の要素にホバーして、そのサイズ、マージン、パディング、タグ名、ID、およびクラスを表示します。 - 要素を直接クリックして選択します。これによりハイライトが赤くなります。選択を解除するには、もう一度クリックするか、Escapeキーを押すか、別の要素を選択します。 - 要素の親を選択するには、`Alt/Option + Up` を使用して、選択を親要素に移動します。選択を逆にするには、`Alt/Option + Down` を使用します。 - 現在選択されている要素の計算されたCSSを表示するには、サイドパネルを開きます。計算されたCSSをクリップボードにコピーするには、「Copy CSS」ボタンをクリックします。 機能 - 任意の要素のピクセルサイズを測定します。 - 任意の2つの要素間のピクセル距離を測定します。 - HTMLタグ名、クラス名、ID。 - 親/子選択ショートカット。 - ブラウザウィンドウに合わせてレスポンシブに選択をリサイズ。 - コンテキストメニューからアクセス。 - 計算されたCSSの検査。 - CSSをクリップボードにコピー。 - 任意のウェブページで動作します。 - `chrome://extensions/shortcuts` にアクセスしてキーボードショートカットをカスタマイズします。 Screen Ruler PRO Screen Rulerは、追加の機能をアンロックするPROティアも提供しています。 1. 要素の検査：マウスを移動するだけで要素のプロパティを確認できます。要素の位置、サイズ、レンダリングされたフォント、色などの情報を含みます。 2. レイアウトグリッド：サイトの上にレイアウトグリッドを重ねて、デザインの整列を検証します。 3. スクリーンショットコントロールをクリックするか、ショートカット `Ctrl/Command + Shift + S` を使用して、現在ハイライトされている領域のスクリーンショットをキャプチャします。ドキュメントやGithubチケットに添付するのに最適です。 4. ブラウザのサイドパネルで、要素のボックスモデル、選択色、アセットなどの詳細なプロパティを確認します。 Screen Ruler PROは、ライフタイムアクセスのための一度の支払いが必要です。PROにアップグレードするには、コンテキストメニューで「Upgrade to PRO」をクリックするか、拡張機能アイコンを右クリックしてアップグレードオプションを表示します。 Screen Rulerは以下のために作られました - 開発者：レイアウトの問題を発見したり、整列の問題を特定したりします。マージンやパディングを調整する場合でも、すべてが正しく整列していることを確認する場合でも、Screen Rulerは開発ツールキットの不可欠な追加要素となります。 - デザイナー：デザインがピクセルパーフェクトな精度で実装されていることを確認します。Screen Rulerはデザインと開発の間の架け橋として機能し、各要素が意図した通りに整列しているかどうかを確認できます。 インストール - Screen Rulerは、Google Chrome 116+での安定性を特に考慮して設計されています。 - Screen Rulerは、任意のChromiumブラウザにインストールできますが、最良の体験を得るには、ブラウザがすべての必要なAPI（サイドパネルやオフスクリーンなど）をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新バージョンに更新して再試行してください。