HPでの画像表示について

2009/04/19 16:29

このQ&Aのポイント

サイトを運営しているのですが、Macユーザーの方から「MacではTOP絵が表示されないので改善して欲しい」という意見をいただきました。
Macの方には表示されないという事はあるのでしょうか？
何が問題なのか知っておられる方が居ればぜひ教えてください。

dreble
お礼率62% (10/16)

Mac
回答数6
ありがとう数2

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

質問者が選んだベストアンサー

ベストアンサー

nori_007
ベストアンサー率35% (369/1048)

2009/04/20 11:35 回答No.6

テストしてみました。 dreble 様の提示されたソースでは肝心のデータが無い為、以下のソースに修正しました。基本は <body> タグが無かった為、追加して、見出し、段落と、テーブルを作り、テーブルの中に画像を入れてみました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <title>TOP</title> <style type="text/css">  </style> </head> <body> <h1>テスト</h1> <h2>テスト２</h2> <p>ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落、ここは段落 </p> <table> <tr> <td> ここはテーブルの中 </td> </tr> <tr> <td> ここには写真を入れます。<br> <img src="./img_001.jpg" style="filter:Alpha(opacity=50); -moz-opacity:0.50; opacity:0.50"> </td> </tr> </table> </body> </html> 上記のソースで、自分の普段使っている環境で問題無く見ることが出来ます。ホームページを制作して公開した場合、閲覧される環境で様々な問題が発生します。問題が発生したら、どの環境で問題が発生しているのか、閲覧している環境を確認するのが問題解決の第一歩です。自分の環境は Mac OS X 10.5.6 ブラウザは safari3.2.1 最新の環境です。上記のソースでは、最新の Mac の環境では問題が無いと言うことです。（制作者の意図は反映していません、必要な情報が読み取れると言うことです）解説スタイルシートにて、「scrollbar」関連が対応していないと、回答がありましたが、対応は確かにしていません。対応していない為、自分の環境では無視されるだけ、画像が表示されない言うことはありません。次に、「filter:Alpha(opacity=70)」に関しては、通常 img タグに追加する物ですが、table タグに指示されており、自分の環境では無視されています。ちなみに、img タグに「style="filter:Alpha(opacity=70); -moz-opacity:0.50; opacity:0.50">」と付け加えれば、効果が有効になりました。ここまでテストしみましたが、やはり公開しているソース全体が解らなければ、何とも言えません。問題の解決を望むなら、閲覧出来ないと言う方の環境と、ソースを全て公開してみてください。ちなみに、Windows XP の環境でも確認してみました。 IE6 では多分制作者の意図通りに見ることが出来ましたが、モダンブラウザと言われる、FireFox 2.0 は、Mac OS X の safari3.2.1 と同じに見えました。報告まで。最後に、ホームページを以下のサイトチェックしてみてください。 http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html 100点を目指す必要はありませんが、80点以上取れれば問題解決のヒントがあるかも知れません。

質問者

お礼 2009/05/04 22:08

ソースの修正までしていただいて、ありがとうございました！今は貼っていただいたソースを参考にさせていただいてます。ただ、例のMacユーザーの方から何も連絡がないので表示されているかは分かりません；でも、助かりました！！ありがとうございました。

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

その他の回答 (5)

noname#242220

2009/04/19 23:07 回答No.5

以下のタグがMacに対応して居ないとプラウザチェックに掛かりました。ファイアーフォックスも同様でした。 WinのIEではボディ右にボックスが表示されていましたが他では全滅。最終行のタグはIE7には未対応との事。 body { scrollbar-3dlight-color:#000000; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#000000; scrollbar-darkshadow-color:#000000; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; background-attachment: fixed; background-image: url(ks.jpg); background-repeat: no-repeat; background-position: right top; } table { filter:Alpha(opacity=70); background-color: #ffffff}

質問者

お礼 2009/05/04 22:11

チェックしていただけたようで、ありがとうございました！ご指摘いただいた所を参考にさせていただくようにします。ありがとうございました。

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

SortaNerd_
ベストアンサー率59% (309/522)

2009/04/19 18:21 回答No.4

まずサイトURLは晒さないで下さい。ここの規約で禁止されていますので、運営の気分次第で「URL部分が削除される」「質問ごと削除される」「質問を強制的に締め切られる」などの措置が取られます。当該部分のソースを、ファイル名など隠した状態で書き込むのなら問題ないようです。回答ですが、ソースを見ないと確実なことは言えないので推測になりますが、たぶんタグがどこか閉じていないのでしょう。 WindowsということですからブラウザはInternetExplorer(IE)だと思いますが、IEは他のブラウザとは挙動が大きく異なります。タグが閉じていないなどの間違いがあった場合、他のブラウザは"正しく"判断して間違ったなりの表示をしますが、IEはそれでもなんとかそれっぽい表示をしてしまいます。試しにFirefoxで表示して見るとよいでしょう。Firefoxの表示はかなり"正しい"です。なお、相手の環境が古いという可能性は低いです。それなら他にも見えないページが多数あるはずなので。

質問者

補足 2009/04/19 21:12

ご回答ありがとうございます！ご指摘いただいたとおり、Firefoxで表示して確認してみたところ、何の問題もなく画像も表示されていました。サイトのURLは載せられないので、TOPのソースを載せておきます（拍手ボタン・メニューボタンのソースタグは省き、TOP絵部分のみのソースです）↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <HTML> <HEAD> <META name="GENERATOR" content="IBM WebSphere Homepage Builder Version 6.0.2.1 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <META NAME="GOOGLEBOT" CONTENT="NOINDEX, NOFOLLOW"> <META NAME="ROBOTS" CONTENT="NOARCHIVE,NOINDEX,NOFOLLOW"> <title>TOP</title> <STYLE type="text/css">  </STYLE> </head> </body> </html>

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

nori_007
ベストアンサー率35% (369/1048)

2009/04/19 17:07 回答No.3

多分みれないと言われる方の環境が古いだと思います。環境を聞いてみてください。Mac OS 9 だったら、今の時代まともにホームページを見ることが出来なくなっていると思います。

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

noname#242220

2009/04/19 16:54 回答No.2

Windowsの場合ルナスケーブ上でエンジンを『webkit』に変更して確認して下さい。 IE7対応のソフトで作成し、スクリプトで表示している場合表示されなかったり、レイアウトが崩れる場合が有ります。当地の有名な病院のサイト（複数）はMacで見るとトップのフラッシュ画像のレイアウトが可笑しく、ページ全体を見る事が出来ませんでした。現在はページ全体は見れますが未だにフラッシュ画像が想定より大きくリンクを押す事が出来ない状態です。一つの病院はアクセスしただけでサファリが落ちます。この原因の一つはタグが閉じてなかった事も有り。それと画像方式PNGは見れない時が多い。

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