Screen Ruler - Measure The Web

Screen Rulerは、ウェブサイトの実装を検証したいウェブ開発者やデザイナーにとって完璧なコンパニオンです。アクティブにすると、ウェブコンテンツの上にホバーするだけで、サイズ、マージン、パディング、タグ名、ID、クラスを表示できます。アイテムを選択して他のアイテムとの距離を測定することもできます。

使用方法

- アイコンをクリックするか、右クリックのコンテキストメニューから選択するか、ショートカット `Alt/Option + Shift + R` を使用して拡張機能を切り替えます。
- ウェブページのアイテムにホバーして、サイズ、マージン、パディング、タグ名、ID、クラスを表示します。
- アイテムを直接クリックして選択すると、ハイライトが赤に変わります。選択を解除するには、もう一度クリックするか、Escapeキーを押すか、別のアイテムを選択します。
- 親を選択するには `Alt/Option + 上矢印` を使用します。選択を元に戻すには `Alt/Option + 下矢印` を使用します。
- 現在選択されているアイテムの計算済みCSSをサイドパネルで表示します。「CSSをコピー」ボタンをクリックして、計算済みCSSをクリップボードにコピーします。

機能

- あらゆる要素のピクセルサイズを測定します。
- 任意の2つの要素間のピクセル距離を測定します。
- HTMLタグ名、クラス名、ID。
- 親/子の選択ショートカット。
- レスポンシブ選択はブラウザウィンドウに合わせてリサイズされます。
- コンテキストメニューからのアクセス。
- 計算済みCSSのインスペクト。
- CSSをクリップボードにコピー。
- 正確な測定のためのページルーラー（水平および垂直ガイドと十字線）。
- ページのどこからでも色をサンプリングしてコピーするカラーピッカーツール。
- 要素のスクリーンショット： `Ctrl/Cmd + Shift + S` を使用して、選択したアイテムのトリミングされたスクリーンショットをキャプチャします。
- あらゆるウェブページで動作します。
- `chrome://extensions/shortcuts` にアクセスしてキーボードショートカットをカスタマイズします。

Screen Ruler PRO
追加機能をアンロックするPROティアも利用可能です。

- フローティングインスペクター：ホバー時に位置、サイズ、レンダリングされたフォント、色などの詳細なプロパティを表示します。
- アクセシビリティの問題：選択範囲内のWCAGコントラストの失敗を自動的に検出し、実用的な推奨事項とともにハイライトします。
- レスポンシブモード：インタラクティブなデバイスエミュレータとカスタムディメンションを使用して、さまざまなデバイスビューポートでデザインをテストします。
- ボックスシャドウの視覚化：分解図でマルチレイヤーのボックスシャドウをインタラクティブに分析します。
- アニメーション分析：CSSアニメーションのタイミングカーブを視覚化し、アニメーションプロパティをコピーします。
- アセットの抽出：画像、SVG、ベクターアセットを抽出してダウンロードします。
- 色の抽出：選択したコンテンツから16進数、RGB、HSL値でカラーパレットを抽出してコピーします。
- レイアウトグリッドオーバーレイ：カスタマイズ可能なレイアウトグリッドをオーバーレイして、完璧なデザインのアラインメントを実現します。
- CSSセレクター検索：CSSセレクターを使用してアイテムを検索し、ハイライトします。
- タイポグラフィ：選択範囲で使用されているすべてのタイポグラフィスタイルを分析・抽出します。
- X-Rayモード：すべてのコンテンツをアウトライン化して、ページの基礎構造を明らかにします。

PROは、生涯アクセスのために1回限りの支払いが必要です。

対象者

- 開発者：レイアウトの問題を発見したり、アラインメントの問題を特定したりします。マージンやパディングを調整している場合でも、すべてが正しく整列していることを確認している場合でも、このツールは開発ツールキットに不可欠な追加機能となります。
- デザイナー：デザインがピクセルパーフェクトな精度で実装されていることを確認します。デザインと開発の間の架け橋として機能し、すべてのコンポーネントが意図したとおりに正確に整列しているかを確認できます。

インストール

- Google Chrome 116+での安定性のために特別に設計されています。
- どのChromiumブラウザにもインストール可能ですが、最高のエクスペリエンスを得るためには、ブラウザが必要なすべてのAPI（Side PanelやOffscreenなど）をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新バージョンに更新して再試行してください。