質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

545閲覧

h>HTML。画面上のサイズと設定したサイズの違い

snowsnow

総合スコア11

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/04/20 04:08

HTMLを学習しています。設定した画面は900PXですが、ピクセル定規を使って図ってみると1000を軽く超えてしまいます。アイコン画像なども定規で図ったピクセルとimageフォルダの中に入ってる画像の幅が違います。検証で確認してみると設定した通り「幅900px」と表示されています。でも各ブラウザで測定すると1000を超えている・・どうすればいいのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi_takatsuk

2020/04/20 04:11

ピクセル定規とはなんでしょうか? ブラウザの拡張機能ですか? それともOSのアプリケーションですか?
snowsnow

2020/04/20 04:13

すみません初心者なもので、よくわかりませんが、定規をダウンロードすると画面上のサイズをpx単位で図れるというものです。私はフォトショップをまだやっていないので、サイズを図れるものを探してダウンロードしました。
miyabi_takatsuk

2020/04/20 04:15

ふむ。 したらば、OSのアプリケーションっぽいですね。 ここら辺は、三つの要素が絡んできますが、そこを含めて回答してみようと思います。
miyabi_takatsuk

2020/04/20 04:17

また、そのアプリケーション名、 お使いのPCのOSも一応質問文に記載ください。
guest

回答3

0

ベストアンサー

ブラウザの「拡大/縮小」が、なにかしら設定されてしまっている可能性もあります。

こちらも確認してみてください。

Chromeの場合ヘッダーの「表示 > 実際のサイズ」
Firefoxの場合ヘッダーの「表示 > ズーム > 等倍」

投稿2020/04/20 04:32

new1ro

総合スコア4528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

snowsnow

2020/04/20 05:00

ありがとうございます!!今chromeで「ズーム100」になっていたのを80に治したら適性なサイズになりました!!!涙 本当にありがとうございます!!!
new1ro

2020/04/20 05:04

解決できたようで、よかったです! 今回はたまたま↑が原因でしたが、 miyabi_takatsukさんの解説のほうが詳細なので頭に入れておくといずれは役に立つと思います。
miyabi_takatsuk

2020/04/20 05:20 編集

snowsnowさん、その解決方法だと、後々の作業に影響でそう・・・。 80だったのを、100に戻して解決したならいいのですが、 100→80で解決した、だと、絶対その後の、作業工程に影響出ます。 (他のユーザーと表示サイズ変わる) なので、その定規アプリは使うのやめた方いいと思います。 キャプチャ撮って、ペイントとかで計測するとか、 Photoshop手に入るまでは、 無料のPhotoshopっぽいアプリとか使った方がいいかも。 とかく、解像度に関しては、デザインをWebページに起こす際に深く関係してくるので、よくよく勉強されるといいと思います。 new1roさんの回答も、等倍(100%)にした時の解決が最善という趣旨のものなので。 (違ったらすみません)
snowsnow

2020/04/20 05:21

ありがとうございます、ピクセル定規は使わないでおきますね。余計に混乱してしまいますし^^;画像のこともっときちんと勉強しないとですね。ちょっとずつ頑張っていきます^^
snowsnow

2020/04/20 05:25

ちなみにchromeはズーム100を80にすると正規のピクセルになりましたが、IEは125を100に治したら正規になりました。
miyabi_takatsuk

2020/04/20 05:33

そういうことです。 ブラウザによっても数値変わるなら、 そのアプリは使うのはよろしくないかと。
snowsnow

2020/04/20 05:39

通常はchromeもIEも同じになるものなのですね。ちなみに、あるwebページをお手本に真似て造ってるのですが、そのwebページも全く同じ映りになっております。(そのwebページもchromeはズーム100を80にすると正規のピクセルになりました)これって私のPCがおかしいのかな・・・
退会済みユーザー

退会済みユーザー

2020/04/21 05:43

htmlやcssの解釈がブラウザによって異なるため、まずhtmlの文法エラーが生じていないかを https://validator.w3.org/ にかけて見るのも手です。誤解が生じる、よくない書き方をしているのではないかと。
guest

0

ちょうど125%というのはWindowsのディスプレイ設定が疑われます。
Windowsの設定→システム→ディスプレイ の下図の項目が125%になってはいませんか?
イメージ説明

投稿2020/04/22 00:53

ikadzuchi

総合スコア3047

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

snowsnow

2020/05/06 04:57

お返事が遅れてすみませんでした涙 なるほど!!早速やってみます!!!
guest

0

今回のような話は、十中八九、解像度という概念が深く関係してきますので、そこはご自身でお調べください。
(今回のケースでは、単純なピクセル数、dpi両方を指します)

以上を踏まえ、いくつかの原因の可能性を提示します。

  • ブラウザの検証の数値が一番正しい

まず第一に、これがあります。
CSS上、JavaScript上で扱う数値としても、検証で出てきた数値が使われますので、検証で出た数値が正しいです。

  • その定規?アプリの精度が低い

あまりないかと思いますが、例えば、ディスプレイの解像度などから数値を算出しているために、Webページ上で扱われる数値とのズレが出ている可能性です。
つまり、ディスプレイ上の表示的なピクセル数で計算すると正しい数値だが、
Webページ上のデータとしての数値とは違う、という可能性です。
Web上はあくまで論理ピクセル数での算出のため、物理ピクセル数を測るようなものとは値がズレ生じることはあるかと思います。

  • ブラウザの拡大率が効いてる

上記二つが大丈夫でも、そもそもブラウザの拡大率が効いている場合、ディスプレイ上の数値と、Webページ上の数値は当然ズレます。
(上記で記載した通り、あくまでWebページ上は、論理ピクセルなので。ディスプレイ上は、設定がされてない限り、物理ピクセルになります。)

以上の可能性を確認してみてください。
あと、Webページ 解像度 などのキーワードで調査し、そこらへんの用語の意味や、
現象など、調べてみると、より理解が進むと思います。

投稿2020/04/20 04:31

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

snowsnow

2020/04/20 05:27

すみません、よくわからず操作してしまって、回答依頼というのを押してしまいました。ダメダメですね^^;ごめんなさい。
miyabi_takatsuk

2020/04/20 05:35

なんもです。 使い方は最初はわからないものです。 使って覚えていけばいいと思いますよ〜
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問