CRX id
jfbbgijjljfbolelfkopkhbfjajjampm
jfbbgijjljfbolelfkopkhbfjajjampm
Description from extension meta
任意のウェブページ上の任意の要素のサイズ、距離、マージンおよびパディングを測定します。
Image from store
Description from store
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（サイドパネルやオフスクリーンなど）をサポートしていることを確認してください。インストールに問題がある場合は、ブラウザを最新バージョンに更新して再試行してください。
Latest reviews
- (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