dポイントプレゼントキャンペーン実施中！

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

締切済

  • 質問者：gekikarakid
  • 質問日時：
  • 回答数：6件

現在WEB制作をやってる上で行き詰まっているので、
ご意見頂戴したく投稿させていただきます。

現在あるWEBサイトのデザインに合わせながら制作を行っているのですが、
一部のPCではどうしても自分が制作しているページが
その参考にしているWEBサイトよりも大きく表示されてしまいます。（特に幅）

サイトに掲載するトップ画像なども
ピクセル、解像度は参考サイトと同程度、
幅のレイアウト（950px）も同程度なのに
何故このような違いが出るのでしょうか？

ちなみに自分が制作しているPC画面では問題ないのですが、
一部のmac、windowsだとその参考サイトと明らかな差異が出てしまいます。

原因として考えられることなど
ございましたらご教示いただけると幸いでございます。

宜しくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： ORUKA1951
  • 回答日時：

＞もう一度最初から作り直したほうが得策なのでしょうか。


　そんなことしません。

　まずスタイルシートの記述順を変えます。
詳細度さえ、きちんと理解されていれば、順番を変えても支障はないはずです。
[例]
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を使用すると、カスケーディングに従ったスタイルシートの一覧が一目でわかります。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： ORUKA1951
  • 回答日時：

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">
<!--[if IE]>
＿<script src="http://html5shiv.googlecode.com/svn/trunk/html5. …
＿<script src="http://css3-mediaqueries-js.googlecode.com/svn/t …
＿<![endif]-->
<style media="screen">
<!--
html,body{margin:0;padding:0;}
/* font-sizeを絶対サイズ(pt,mm,in,px
xx-small, x-small,small, medium,large,x-large,xx-large で指定してみる */
/* font-sizeを相対サイズ(em,ex・・,larger,smaller)、キーワード(で指定してみる */
body{font-size:;}
header,section,footer{
width:700px;
margin:0 auto;
border:20px gray solid;border-top-width:10px;
}
h1,h2,h3,p{margin:0;line-height:1.6em;}
section{min-height:400px;position:relative;}
section h2,section p{margin-left:210px;width:auto;}
div#contentTable{width:200px;position:absolute;top:0;left:0;height:100%;}

/* 色分け */
header{background-color:yellow;}
section{background-color:aqua;}
footer{background-color:lime;}
#contentTable{background-color:fuchsia;}

/* リキッド以下のコメントを外す */
/*
header,section,footer{
width:70%;
min-width:480px;max-width:900px;
}
div.header{position:relative;}
header p img{
display:block;
width:100%;
height:auto;
}
*/
-->
</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</footer>
</body>
</html>
「同じピクセル、解像度のPC表示差異につい」の回答画像5
    • good
    • 0
    • 件
通報する
この回答へのお礼

ソースの記述まで丁寧に載せて頂きありがとうございます！

色々お手数おかけしましたが
無事解決致しました！

原因としましては、
ソースなどは関係なく
閲覧者のPCの設定で
参考にしていたウェブサイトを
firefoxで開くと何故かページの倍率が90％で表示されていただけでした。
他のサイトを閲覧した際に100％に設定していても
そのサイトを開いたタブだけ90％になっていたので
発見に手間取ってしまいました。

色々なご提案いただきまして
ありがとうございました！

通報する
お礼日時：2013/06/05 14:10

No.4

  • 回答者： ORUKA1951
  • 回答日時：

使用しているブラウザと、そのページの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">
<!--
html,body{margin:0;padding:0;}
div.header,div.section,div.footer{width:700px;margin:0 auto;border:20px gray solid;border-top-width:10px;}
h1,h2,h3,p{margin:0;line-height:1.6em;}
div.section{min-height:400px;position:relative;}
div.section h2,div.section p{margin-left:210px;width:auto;}
div#contentTable{width:200px;position:absolute;top:0;left:0;height:100%;}
/* 色分け */
div.header{background-color:yellow;}
div.section{background-color:aqua;}
div.footer{background-color:lime;}
#contentTable{background-color:fuchsia;}
-->
＿</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>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
問題のあるブラウザですが、
firefox 21.0　となります。

そのブラウザで閲覧すると
他のブラウザで閲覧するより
やはり拡大されて表示されてるみたいです。

またDOCTYPE宣言の提示ありがとうございます。
ただ現在コーディングしているのがHTML5になりますので、
こちらの提示は使用できかねるかと思います。

ご提案ありがとうございました。

通報する
お礼日時：2013/06/03 15:21

No.3

  • 回答者： neKo_deux
  • 回答日時：

> 一部のmac、windowsだとその参考サイトと明らかな差異が出てしまいます。



例えばですが、表示の設定が違うとか、スタイルシートを設定してるとか。

Web ページの表示をカスタマイズする方法
http://support.microsoft.com/kb/306872/ja


> 同じPCで同じ幅の2つのWEBサイトを見ているのに

それぞれのwebサイトで同じ幅を指定したって、幅より大きい画像だの文字だのがあれば、差異が出る可能性はあるし。
PCの設定で大きすぎる文字や画像は縮小するようなブラウザや設定なら、期待した幅で表示されるかも知れないし。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。

色々調べてみたのですが、
スタイルシート、ソースに問題がある点は見当たりませんでした。

やはり閲覧しているPCの設定かもしくはブラウザの設定に問題があるかと
思い
現在調べております。

>それぞれのwebサイトで同じ幅を指定したって、幅より大きい画像だの文字だのがあれば、差異が出る可能性はあるし

上記の点は、
私も重々承知しております。

現状の症状としては、
それぞれサイトのトップで使用している
幅950pxと幅960pxの画像がそれぞれあるのですが、
何故か950pxのやつが明らかに大きく表示されてしまっているといった感じです。

レイアウトなどの設定数値もそれぞれの画像に合わせて組んでいるので、
先述したとおり閲覧しているモニター、ブラウザの設定かと思われます。
こちらの点で何かご存知のことなどありましたらご教示いただければと思います。
ちなみに問題のあるブラウザはfirefox21.0となります。

通報する
お礼日時：2013/06/03 15:37

No.2

ブラウザの表示は拡大縮小が自由に出来るので、解像度に無関係に拡大縮小されます。


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

ご回答ありがとうございます。

ブラウザ表示の拡大縮小、
また画面の縦横比がPCによりそれぞれ異なるのも
承知している上で質問を投稿させていただいておりました。

今回自分が疑問に思っているのは
その部分を踏まえた上で、
異なるPCで閲覧した場合に発生するレイアウトの差異ではなく、
同じPCで同じ幅の2つのWEBサイトを見ているのに
差異がでるのは何故だろうという部分に疑問をもったからでした。

重複してしまいますが、
回答者様がおっしゃられるように、
WEB閲覧者の環境、ブラウザの種類により
WEBサイトの表示に違いが出るのは至極当然のことだと思います。

ただ、
1つのPCで閲覧する
同じレイアウトのWEBサイトが
それぞれ幅などが違って表示されるのは
原因として何が考えられるのか
ご存知であれば教えて頂ければと思います。

通報する
お礼日時：2013/05/30 13:01

No.1

  • 回答者： Cupper-2
  • 回答日時：

パソコン本体ではなく、ウェブ・ブラウザの性能によるものと思います。



全てのブラウザに対して、正しく表示できるように設計することは非常に難しいです。
（原因の多くはHTMLを独自に解釈して互換性のないタグを多数使うIEにあるんですけどね）
閲覧者のブラウザの種類を検出して、適した表示になるよう切り替えるしかないでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答いただきありがとうございます。

自分もブラウザの問題ではないかと色々模索しております。
ただ、
問題のあるブラウザがIEではなく、
firefox 21.0となります。

こちらのブラウザの表示に関する設定で
何かご存知でしたらご教示いただければと思います。

通報する
お礼日時：2013/06/03 15:24

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報