画面定規 - Pixel Ruler with History

px content_scripts 使い方 主な機能 と ・よく使う色はプリセットとして保存できます。 本拡張機能は個人を特定する情報を収集しません。計測履歴はお使いのブラウザのローカルストレージ、または任意でonにした場合のみgoogleアカウントの同期ストレージに保存されます。外部サーバーへのデータ送信は一切行いません。 chrome.storage.sync ・デフォルトはoffで、onにした場合のみ 具体的には、chrome.scripting.executescript() ページ上でドラッグして計測 120px 3. ・「保存」ボタンを押すとブラウザを閉じても履歴が消えないようになります（押すまでは一時的な履歴として扱われます）。 / vw）】 ・履歴をクリックすると、同じ位置に計測線を再現できます。マウスを重ねる（ホバーする）だけでも、クリックする前にその場でプレビュー表示できます。 ツールバーのアイコンをクリックしてパネルを開く ・vwはスクロールバーを含むビューポート幅を基準に計算されます。レスポンシブデザインの比率を確認したいときに便利です。 【要素への自動吸着（β機能）】 ・webデザイナー、フロントエンドエンジニアの方 ・要素間の余白やサイズをすばやく確認したい方 権限を使用します。 chrome.scripting.insertcss() を通じて同期されます。 ・不要な履歴は個別に削除、またはまとめて削除できます。 - プライバシーについて ・ctrlキー（macでは⌘キー）を押しながらクリックすると、複数の履歴を同時に表示して見比べられます。もう一度ctrl+クリックすれば解除、まとめて解除するボタンも用意しています。 4. ・直線モード：2点間の距離を「自由」「水平のみ」「垂直のみ」の3パターンで計測。自由モードではドラッグ中にshiftキーを押すと、その時点までの移動量が大きい方向（水平/垂直）に一時的にロックできます。 (30.8vw)）。 履歴から過去の計測を再確認・再現。ctrl+クリックで複数を見比べることも可能 【表示単位（px によるすべてのページへの自動注入は行っていません。そのため、ユーザーが一度もこの拡張機能を使用していないページには、拡張機能のコードやdom要素は一切存在しません。これはユーザーのプライバシーを尊重し、拡張機能の影響範囲を実際に使用した時・使用したタブだけに限定するための設計です。 with 画面定規 【googleアカウント間での履歴共有（オプション）】 ・onにすると、ページ上の要素の辺（上下左右）にカーソルを近づけた際、自動的にその辺へスナップします。 こんな方におすすめ ・計測結果は自動的に履歴リストに追加されます。 ・デザインカンプと実装のズレを確認したい方 2. ruler pixel history ・矩形モード：ドラッグした範囲の幅と高さを同時に計測し、四辺それぞれに数値を表示します。 ・デフォルトはoffです。ページによっては動作が不安定になる場合があるため、ベータ機能として提供しています。 + を使い、ユーザーが明示的にアイコンをクリックしたタブ（activetab権限で一時的にアクセスが許可された対象）に限定して、計測パネルとオーバーレイのuiを構築します。 【2つの計測モード】 【計測履歴】 マニフェストの ・chromeの表示言語設定に応じて、日本語または英語で表示されます。 scripting ■ 1. 【日本語・英語に対応】 ・画面幅が狭いとき（開発者ツールのモバイル表示など）は、パネルが自動的に画面下部の横長バー形式に切り替わり、「設定」「履歴」のタブで切り替えて操作できます。計測エリアを広く確保できます。 【表示カラー】 ・計測線の色を自由に選択できます。 ・同じgoogleアカウントでログインしているchrome間で、計測履歴を同期できます。 ・計測結果をpxに加えて、ビューポート幅に対する割合（vw）で併記できます（例: は、webページ上でドラッグするだけでピクセル単位の距離やサイズを計測できるchrome拡張機能です。 【狭い画面でも使いやすいパネル】 ・パネルの「最小化」ボタンで、計測モードを続けたままパネルだけを一時的に隠せます。画面端のタブからいつでも呼び戻せます。 本拡張機能は、ユーザーがツールバーのアイコンをクリックした瞬間にのみ、そのタブに計測用のスクリプトとスタイルシートを注入するために 「直線」または「矩形」を選択 ■ ■ ■