Q&A
ピクセル定規とはなんでしょうか？
ブラウザの拡張機能ですか？
それともOSのアプリケーションですか？
HTMLを学習しています。設定した画面は900PXですが、ピクセル定規を使って図ってみると1000を軽く超えてしまいます。アイコン画像なども定規で図ったピクセルとimageフォルダの中に入ってる画像の幅が違います。検証で確認してみると設定した通り「幅900ｐｘ」と表示されています。でも各ブラウザで測定すると1000を超えている・・どうすればいいのでしょうか？
すみません初心者なもので、よくわかりませんが、定規をダウンロードすると画面上のサイズをｐｘ単位で図れるというものです。私はフォトショップをまだやっていないので、サイズを図れるものを探してダウンロードしました。
ふむ。
したらば、OSのアプリケーションっぽいですね。
ここら辺は、三つの要素が絡んできますが、そこを含めて回答してみようと思います。
また、そのアプリケーション名、
お使いのPCのOSも一応質問文に記載ください。
回答3件
0
ベストアンサー
ブラウザの「拡大/縮小」が、なにかしら設定されてしまっている可能性もあります。
こちらも確認してみてください。
Chromeの場合ヘッダーの「表示 > 実際のサイズ」
Firefoxの場合ヘッダーの「表示 > ズーム > 等倍」
投稿2020/04/20 04:32
総合スコア4528
ありがとうございます！！今chromeで「ズーム１００」になっていたのを80に治したら適性なサイズになりました！！！涙 本当にありがとうございます！！！
解決できたようで、よかったです！
今回はたまたま↑が原因でしたが、
miyabi_takatsukさんの解説のほうが詳細なので頭に入れておくといずれは役に立つと思います。
snowsnowさん、その解決方法だと、後々の作業に影響でそう・・・。
80だったのを、100に戻して解決したならいいのですが、
100→80で解決した、だと、絶対その後の、作業工程に影響出ます。
（他のユーザーと表示サイズ変わる）
なので、その定規アプリは使うのやめた方いいと思います。
キャプチャ撮って、ペイントとかで計測するとか、
Photoshop手に入るまでは、
無料のPhotoshopっぽいアプリとか使った方がいいかも。
とかく、解像度に関しては、デザインをWebページに起こす際に深く関係してくるので、よくよく勉強されるといいと思います。
new1roさんの回答も、等倍（100%）にした時の解決が最善という趣旨のものなので。
（違ったらすみません）
ありがとうございます、ピクセル定規は使わないでおきますね。余計に混乱してしまいますし＾＾；画像のこともっときちんと勉強しないとですね。ちょっとずつ頑張っていきます＾＾
ちなみにchromeはズーム100を８０にすると正規のピクセルになりましたが、IEは１２５を100に治したら正規になりました。
そういうことです。
ブラウザによっても数値変わるなら、
そのアプリは使うのはよろしくないかと。
通常はchromeもIEも同じになるものなのですね。ちなみに、あるwebページをお手本に真似て造ってるのですが、そのwebページも全く同じ映りになっております。（そのwebページもchromeはズーム100を８０にすると正規のピクセルになりました）これって私のPCがおかしいのかな・・・
htmlやcssの解釈がブラウザによって異なるため、まずhtmlの文法エラーが生じていないかを
https://validator.w3.org/ にかけて見るのも手です。誤解が生じる、よくない書き方をしているのではないかと。
0
今回のような話は、十中八九、解像度という概念が深く関係してきますので、そこはご自身でお調べください。
（今回のケースでは、単純なピクセル数、dpi両方を指します）
以上を踏まえ、いくつかの原因の可能性を提示します。
- ブラウザの検証の数値が一番正しい
まず第一に、これがあります。
CSS上、JavaScript上で扱う数値としても、検証で出てきた数値が使われますので、検証で出た数値が正しいです。
- その定規？アプリの精度が低い
あまりないかと思いますが、例えば、ディスプレイの解像度などから数値を算出しているために、Webページ上で扱われる数値とのズレが出ている可能性です。
つまり、ディスプレイ上の表示的なピクセル数で計算すると正しい数値だが、
Webページ上のデータとしての数値とは違う、という可能性です。
Web上はあくまで論理ピクセル数での算出のため、物理ピクセル数を測るようなものとは値がズレ生じることはあるかと思います。
- ブラウザの拡大率が効いてる
上記二つが大丈夫でも、そもそもブラウザの拡大率が効いている場合、ディスプレイ上の数値と、Webページ上の数値は当然ズレます。
（上記で記載した通り、あくまでWebページ上は、論理ピクセルなので。ディスプレイ上は、設定がされてない限り、物理ピクセルになります。）
以上の可能性を確認してみてください。
あと、Webページ 解像度 などのキーワードで調査し、そこらへんの用語の意味や、
現象など、調べてみると、より理解が進むと思います。
投稿2020/04/20 04:31
総合スコア9555
すみません、よくわからず操作してしまって、回答依頼というのを押してしまいました。ダメダメですね＾＾；ごめんなさい。
なんもです。
使い方は最初はわからないものです。
使って覚えていけばいいと思いますよ〜
あなたの回答
tips
プレビュー
