CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
あらゆるWebページの要素のサイズ、距離、マージン、パディングを測定します。
Image from store
Description from store
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. 高度なサイドパネル：計算済みスタイル、ボックスモデル、色、アセット、アニメーションを含む完全な要素分析
Screen Ruler PROは生涯アクセスのための一回限りの支払いが必要です。
Screen Rulerの対象者
- デベロッパー：レイアウトの問題を発見したり、アライメント問題を特定します。マージンやパディングを調整している場合でも、すべてが正しくアラインされていることを確認している場合でも、Screen Rulerは開発ツールキットの不可欠な追加となります。
- デザイナー：デザインがピクセルパーフェクトな精度で実装されていることを確認します。Screen Rulerはデザインと開発の間の橋渡しとして機能し、すべての要素が意図した通りに正確にアラインされているかをチェックできます。
インストール
- Screen RulerはGoogle Chrome 116+での安定性のために特別に設計されています。
- Screen RulerはあらゆるChromiumブラウザにインストール可能ですが、最高の体験のためにブラウザがすべての必要なAPI（Side PanelやOffscreenなど）をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新版に更新して再試行してください。
Latest reviews
- (2025-08-05) André Cavallari: One of most useful front-end extensions, it worth each cent, had an issue with my activation but the author was pretty quick to answer and find a solution, so I recommend it to every developers.
- (2025-06-24) Victor Biletskiy: Alt/Option + Shift + R seems does not work to toggle via shortcut.. How to open and close extensions using hotkeys? So you don't have to click the mouse all the time
- (2025-06-13) Richard Brus: A beautiful little tool. It also feels so light and snappy in the browser. It is so much more than a ruler.. An invaluable piece of my workflow when designing sites. Great job 10/10
- (2025-05-12) Misha Vs: This is the best on-screen roulette/ruler available in the Chrome Store, but it has recently stopped working in the Yandex Browser 😭 (I need to work in it from time to time)
- (2025-04-02) T VICKY: Love it
- (2025-03-03) Kelvin Ugbana: Perfect.. Works for me
- (2025-02-27) Fynn: Pretty good, but doesn't seem to display gap information unless it's in a grid/flex (which is the main information I want to view). It also doesn't allow you to scroll when active, so you have to toggle it off (and reopen the side panel, if you had it opened).
- (2025-02-11) R.c gamer: Great tool! I am a Web developer. It's really usefull for me.
- (2025-01-23) Muhammad Usman: love it 👍🏻
- (2024-11-29) Chikezie Iroegbu: Great tool! But after the last update, the side panel now opens every time. I should be able to toggle it off if I don't need it.
- (2024-11-28) Anna F.: Lovely! Just like Figma's rulers. Haven't used it much but seems to work exactly as expected so far. Thanks! UPDATE: recently the side panel started popping up by itself whenever I enable the extension! I don't want that! I'm using Brave browser and there's no easy way to remove the side panel. I have to switch to one of the Braves' panels and then minimize that to get rid of it. Can you please add an option to not enable the side panel whenever you enable the extension?
- (2024-09-24) Danny Feliz: I can't open the side panel using the floating menu; I only need to click the extension's context menu. I'm using the latest version of Chrome; it happens on all the sites.
- (2024-09-11) Ishan Shah: Side bar does not open. There should be a pause button next to the exit/stop button. I need to reopen it multiple times (although you can still use a shortcut.) the UI overall is nicely designed.
- (2024-09-10) Hashaam Ahmed: Nice, but the side panel doesnt popup on most of the sites using the navigation/bar below the screen, need to right click on the extension to view the side panel. Thank you.
- (2024-09-06) Patrik Gustavsson: Side panel doesn't work on Arc browser for me :( (using latest Mac OS)
- (2024-08-23) Levy Santa Ana: Not working
- (2024-08-21) Manuel Avella-Salazar: Fast. Clear UI. No unnecessary bells and whistles. After 5 minutes I switched to the pro version. Great, fine tool.
- (2024-08-07) Shane: Exactly what I was looking for. Excellent!
- (2024-07-25) Best Lay: Very Good
- (2024-06-17) Александр Ратманский: Nice!
- (2024-05-20) Walter Córdoba: ¡Fantastic!
- (2024-05-08) Dave Mejias: This extension is incredible... Do you have any contact info? I need help to buy pro.
- (2024-04-13) JaeHun Sim: Awesome