締切済み

同じピクセル、解像度のPC表示差異について

2013/05/30 11:47

現在WEB制作をやってる上で行き詰まっているので、ご意見頂戴したく投稿させていただきます。現在あるWEBサイトのデザインに合わせながら制作を行っているのですが、一部のPCではどうしても自分が制作しているページがその参考にしているWEBサイトよりも大きく表示されてしまいます。（特に幅）サイトに掲載するトップ画像などもピクセル、解像度は参考サイトと同程度、幅のレイアウト（950px）も同程度なのに何故このような違いが出るのでしょうか？ちなみに自分が制作しているPC画面では問題ないのですが、一部のmac、windowsだとその参考サイトと明らかな差異が出てしまいます。原因として考えられることなどございましたらご教示いただけると幸いでございます。宜しくお願い致します。

gekikarakid
お礼率87% (7/8)

その他([技術者向] コンピューター)
回答数6
ありがとう数5

みんなの回答 （6）
専門家の回答

みんなの回答

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/05 17:29 回答No.6

＞もう一度最初から作り直したほうが得策なのでしょうか。　そんなことしません。　まずスタイルシートの記述順を変えます。詳細度さえ、きちんと理解されていれば、順番を変えても支障はないはずです。 [例] div.section div.section{color:blue;}/* 詳細度 0 0 2 2 */ div.section{color:red;}/* 詳細度 0 0 1 1 */ div#news{color:black;}/* 詳細度 0 1 0 1 */ は順番を変えても、二階層目は青文字になります。また#newsは黒文字もしCSS自体に問題があるなら、それによって判断できるはずです。 firebugを使用すると、カスケーディングに従ったスタイルシートの一覧が一目でわかります。

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/06/03 17:23 回答No.5

HTML5ですか・・なら、通常はブラウザ間の誤差はないはずです。ひょっとしてウィンドウサイズの解釈がスクロールバーを含むかいなかの差かも。テスト用のサンプルをあげて起きます。現行のブラウザは、<!doctype html>ですべて標準モードで動作するはずです。フォントサイズの解釈も同じはずです。 font -sizeを、数値または、キーワードで指定してみてください。最後の/* リキッド */ はスマホから幅広ディスプレイ対応のリキッドにするときのスタイルです。 /* リキッド */の下のコメントを外せば、リキッドになります。私がチェックした限りでは、どのブラウザもほぼ同じに表示されました。　リキッドでも・・ HTML5 + CSS2.1の範囲です。タブは＿に置換してあるので元に戻すこと。 <!doctype html> <html> <head> ＿<meta charset="utf-8"> ＿<title>サンプル</title> ＿<meta name="description" content=""> ＿<meta name="author" content="IRUKA">  <style media="screen">  </style> </head> <body> ＿<header> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<p><img src="./images/700px.gif" width="700" height="100" alt="幅700px"></p> ＿</header> ＿<section> ＿＿<h2>見出し</h2> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</section> ＿<footer> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</footer> </body> </html>

質問者

お礼 2013/06/05 14:10

ソースの記述まで丁寧に載せて頂きありがとうございます！色々お手数おかけしましたが無事解決致しました！原因としましては、ソースなどは関係なく閲覧者のPCの設定で参考にしていたウェブサイトを firefoxで開くと何故かページの倍率が90％で表示されていただけでした。他のサイトを閲覧した際に100％に設定していてもそのサイトを開いたタブだけ90％になっていたので発見に手間取ってしまいました。色々なご提案いただきましてありがとうございました！

ログインすると、全ての回答が全文表示されます。

ORUKA1951
ベストアンサー率45% (5062/11036)

2013/05/30 14:41 回答No.4

使用しているブラウザと、そのページのDOCTYPE宣言を補足してください。　ちなみに、下記のソースを、IEにて４種類のDOCTYPE宣言で表示してください。また他のブラウザでも・・ html401strict.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> html401strictA.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> html401transitinal.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> html401transitinalA.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> ↓この部分を書き換える。★タブは＿に置換しあるので戻すこと!!! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿＿<p><img src="./images/700px.gif" width="700" height="100" alt="幅700px"></p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<div id="contentTable"> ＿＿＿<h3>目次</h3> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2013/06/03 15:21

ご回答ありがとうございます。問題のあるブラウザですが、 firefox 21.0　となります。そのブラウザで閲覧すると他のブラウザで閲覧するよりやはり拡大されて表示されてるみたいです。またDOCTYPE宣言の提示ありがとうございます。ただ現在コーディングしているのがHTML5になりますので、こちらの提示は使用できかねるかと思います。ご提案ありがとうございました。

ログインすると、全ての回答が全文表示されます。

neKo_deux
ベストアンサー率44% (5541/12319)

2013/05/30 13:57 回答No.3

> 一部のmac、windowsだとその参考サイトと明らかな差異が出てしまいます。例えばですが、表示の設定が違うとか、スタイルシートを設定してるとか。 Web ページの表示をカスタマイズする方法 http://support.microsoft.com/kb/306872/ja > 同じPCで同じ幅の2つのWEBサイトを見ているのにそれぞれのwebサイトで同じ幅を指定したって、幅より大きい画像だの文字だのがあれば、差異が出る可能性はあるし。 PCの設定で大きすぎる文字や画像は縮小するようなブラウザや設定なら、期待した幅で表示されるかも知れないし。

質問者

お礼 2013/06/03 15:37

ご回答ありがとうございます。色々調べてみたのですが、スタイルシート、ソースに問題がある点は見当たりませんでした。やはり閲覧しているPCの設定かもしくはブラウザの設定に問題があるかと思い現在調べております。 >それぞれのwebサイトで同じ幅を指定したって、幅より大きい画像だの文字だのがあれば、差異が出る可能性はあるし上記の点は、私も重々承知しております。現状の症状としては、それぞれサイトのトップで使用している幅950pxと幅960pxの画像がそれぞれあるのですが、何故か950pxのやつが明らかに大きく表示されてしまっているといった感じです。レイアウトなどの設定数値もそれぞれの画像に合わせて組んでいるので、先述したとおり閲覧しているモニター、ブラウザの設定かと思われます。こちらの点で何かご存知のことなどありましたらご教示いただければと思います。ちなみに問題のあるブラウザはfirefox21.0となります。

ログインすると、全ての回答が全文表示されます。

kimamaoyaji
ベストアンサー率26% (2802/10380)

2013/05/30 12:11 回答No.2

ブラウザの表示は拡大縮小が自由に出来るので、解像度に無関係に拡大縮小されます。それをどうにかと言っても見る人の自由ですから、仕方ないのではないでしょうか？例えばWindowsならCtrlキーを押しながらマウスのダイヤルを回せば自由に拡大縮小できます。目が悪いひとや細かい所を見たい人は拡大で設定しますし、全体を見たい人は縮小するでしょう、また画面の水平ドット数や縦横比もPCにより異なります、Webページはどんな状況下で使われるてもなるべく判りやすく作るのがプロの仕事で、この画面でないとダメなんて、それ自体でWebページとして破綻しています。

質問者

お礼 2013/05/30 13:01

ご回答ありがとうございます。ブラウザ表示の拡大縮小、また画面の縦横比がPCによりそれぞれ異なるのも承知している上で質問を投稿させていただいておりました。今回自分が疑問に思っているのはその部分を踏まえた上で、異なるPCで閲覧した場合に発生するレイアウトの差異ではなく、同じPCで同じ幅の2つのWEBサイトを見ているのに差異がでるのは何故だろうという部分に疑問をもったからでした。重複してしまいますが、回答者様がおっしゃられるように、 WEB閲覧者の環境、ブラウザの種類により WEBサイトの表示に違いが出るのは至極当然のことだと思います。ただ、 1つのPCで閲覧する同じレイアウトのWEBサイトがそれぞれ幅などが違って表示されるのは原因として何が考えられるのかご存知であれば教えて頂ければと思います。

ログインすると、全ての回答が全文表示されます。

Cupper-2
ベストアンサー率29% (1342/4565)

2013/05/30 12:00 回答No.1

パソコン本体ではなく、ウェブ・ブラウザの性能によるものと思います。全てのブラウザに対して、正しく表示できるように設計することは非常に難しいです。（原因の多くはHTMLを独自に解釈して互換性のないタグを多数使うIEにあるんですけどね）閲覧者のブラウザの種類を検出して、適した表示になるよう切り替えるしかないでしょう。

質問者