Screen Ruler - Measure The Web

あらゆるWebページの要素のサイズ、距離、マージン、パディングを測定します。

Screen Rulerは、ウェブサイトの実装を検証したいWebデベロッパーとデザイナーにとって完璧なコンパニオンです。一度アクティブにすると、Screen Rulerを使用して任意の要素の上にホバーするだけで、サイズ、マージン、パディング、タグ名、ID、およびクラスを表示できます。また、他の要素との距離を測定するために要素を選択することもできます。 使用方法 - 拡張機能アイコンをクリックする、右クリックコンテキストメニューから「Screen Ruler」を選択する、またはAlt/Option + Shift + Rショートカットを使用してScreen Rulerを切り替えます。 - Webページ上の要素にホバーして、サイズ、マージン、パディング、タグ名、ID、およびクラスを表示します。 - 要素を直接クリックして選択すると、ハイライトが赤色になります。選択を解除するには、再度クリック、Escapeキーを押す、または別の要素を選択します。 - 要素の親を選択するには、Alt/Option + 上矢印を使用して選択を親要素に移動し、Alt/Option + 下矢印を使用して選択を逆にします。 - サイドパネルで現在選択されている要素の計算済みCSSを表示します。「Copy CSS」ボタンをクリックして、現在選択されているアイテムの計算済みCSSをクリップボードにコピーします。 機能 - 任意の要素のピクセルサイズを測定 - 任意の2つの要素間のピクセル距離を測定 - HTMLタグ名、クラス名、およびID - 親/子選択ショートカット - レスポンシブ選択はブラウザウィンドウとともにリサイズ - コンテキストメニューからのアクセス - 計算済みCSS検査 - CSSをクリップボードにコピー - 任意のWebページで動作 - chrome://extensions/shortcutsにアクセスしてキーボードショートカットをカスタマイズ Screen Ruler PRO Screen RulerはPROティアも提供しており、追加機能をアンロックします。 1. フローティングインスペクター：ホバー時に要素の詳細プロパティを表示（位置、サイズ、レンダリングされたフォント、色など） 2. ボックスシャドウ視覚化: 各シャドウコンポーネントを示す展開図付きマルチレイヤーボックスシャドウのインタラクティブ分解表示 3. アニメーション分析：CSSアニメーションタイミングカーブを可視化し、アニメーションCSSプロパティをコピー 4. アセット抽出：任意のWebページから画像、SVG、ベクターアセットを直接抽出・ダウンロード 5. カラー抽出：選択した要素からhex、RGB、HSL値でカラーパレットを抽出・コピー 6. レイアウトグリッドオーバーレイ：完璧なデザインアライメントのためのカスタマイズ可能なレイアウトグリッドをオーバーレイ 7. 要素スクリーンショット：Ctrl/Cmd + Shift + Sを使用して選択した要素のクロップされたスクリーンショットをキャプチャ 8. CSSセレクター検索：CSSセレクターを使用して要素を検索・ハイライト 9. タイポグラフィ：選択範囲で使用されているすべてのタイポグラフィスタイルを分析・抽出します。 10. X線モード：すべての要素をアウトライン表示してページの基本構造を明らかにします。 Screen Ruler PROは生涯アクセスのための一回限りの支払いが必要です。 Screen Rulerの対象者 - デベロッパー：レイアウトの問題を発見したり、アライメント問題を特定します。マージンやパディングを調整している場合でも、すべてが正しくアラインされていることを確認している場合でも、Screen Rulerは開発ツールキットの不可欠な追加となります。 - デザイナー：デザインがピクセルパーフェクトな精度で実装されていることを確認します。Screen Rulerはデザインと開発の間の橋渡しとして機能し、すべての要素が意図した通りに正確にアラインされているかをチェックできます。 インストール - Screen RulerはGoogle Chrome 116+での安定性のために特別に設計されています。 - Screen RulerはあらゆるChromiumブラウザにインストール可能ですが、最高の体験のためにブラウザがすべての必要なAPI（Side PanelやOffscreenなど）をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新版に更新して再試行してください。