htmlについて教えてください

質問

サイトを一から作っているのではなく、
ショッピングサイトの商品ページの一部分を
htmlタグを使って作っています。

macで確認するとレイアウトは問題なくきれいに見れるのですが、
windowsで確認すると画像やテキストが崩れています。

これはなぜなのでしょうか？

このような感じで記述していました。
画像の上に画像を重ねて表示し、テキストをその上に表示したいのですが...

<div style="position: relative;"><div align="center">
<img src="http://○○○.jpg" alt=""></div>
<div style="position:absolute;left:40px;top:40px">
<b>テキスト</b></div>
<div style="position:absolute;left:380px;top:100px;width:240px;">
テキスト</div>
<div style="position:absolute;left:60px;top:100px">
<img src="http://○○○.jpg"></div>
<div style="position:absolute;left:370px;top:22px"><img src="http://○○○.jpg"></div>
</div></div>

htmlの知識がほとんどないので、
なるべく易しく説明していただければ有り難いです・・・。
よろしくお願い致します。

回答No.3

mat-21

この指定された内容だけでみると、サイズが指定されていないので、そういった事がおきるのではないでしょうか？
CSSのPOSITIONをフルに活用されているようですが、きっちり思ったところに配置するには、配置画像のボックスのサイズ（天地横）や文字サイズ、またMAXで考えられる文字数を考慮する必要があります。
ブラウザの文字に関しては、MacよりもWinで見ると文字が詰まって表示されます。（等幅文字を指定していれば別ですが）よって、文字数はMacで収まっていれば、Winでは、確実に収まるので心配は無用でしょう。余談はこれほどにして、

最初の<div style="position: relative;">ですが、きっちり天地横サイズを指定した方が良いです。
これが、その上に配置されるさまざまな「position:absolute」の基準になるので。。。
で、そこに配置される
<div align="center"><img src="http://○○○.jpg" alt=""></div>
は、できることであれば、align="center"はやめましょう。
きっと商品の写真サイズ（天地左右）がまちまちなのかな？
できることなら、同じ大きさの写真がいいですね。
それが無理なら、align="center"の代わりに、
<div align="center">の天地左右サイズを、元の<div style="position: relative;">に指定する
style="width:???px; height:???px" と同じにして、
その中の配置する画像（img）に<img src="http://○○○.jpg" alt="○○" style="margin:0px auto;">にしましょうか。
左右のmarginをautoにすることによって、親ボックスに対して左右センターになります。

あと、styleをタグに直接書いても、別にいいですが、
stykeは別CSSに記述して、Idやclassで指定した方が良いかも。。。

回答になっていないかもしれませんが、参考程度に(^_^;)

回答No.2

ORUKA1951

この場合、htmlではなくてHTML(HyperText Markup Language)です。単なる大文字小文字以上に意味が異なります。
　pxは、相対サイズです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
'px'という単位は、閲覧しているデバイス（多くの場合はコンピュータの画面）の解像度を参照する。
・・・【中略】・・・
第2図を見ると、低解像度のデバイス（コンピュータ画面など）では1px平方の領域が単独の画素で覆われてしまうのに対し、高解像度のデバイス（レーザープリンタなど）では1pxの領域に16個もの画素が入るということが判る。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［CSS2の構文と基本データ型( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/syndata.html#length-units )］より

　絶対サイズを使用するとよいのでは？？？

★<div align="center">
　スタイルを使うなら、alignという属性は使わない
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
align = left|center|right|justify [CI] 推奨しない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Alignment, font styles, and horizontal rules in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#adef-align )］より

回答No.1

abacabu

数年前に趣味でＨＰを作っていた者です。
えっと最近タグ打っていないので忘れてしまってはいるんですが、
表示場所を数値で特定するとそういう事が起こります。
詳しくはスタイルシート等の参考サイトでご確認ください。
これは貴方のパソコンにおいてだけ、そう見える様に作ってあるだけです。
（数値指定してしまうとそういう事は良く有り、数値指定は非推奨です）
数値ではなく、あくまで例ですがＣＥＮTER等のアバウトな使い方が無難です。
理由としては、お客さんはそれぞれのディスプレイサイズで見ていて、
さらには、自分が見やすいＩＥ設定をしている事もあるので、
余り数値設定をしない方が無難と言えます。
タグは検索するだけで、ＨＴＭＬタグ、ＣＳＳ（スタイルシート）タグ、ＪａｖａＳｃｒｉｐｔタグ等
色々調べられます。
基本はＣＳＳを使って、ページレイアウトをした方がすっきりしていいですよ？
その都度タグ書くのも大変ですし。