HTMLの表示（ブラウザ）に関する問題

前へ 次へ
このQ&Aのポイント
  • HTMLの表示（ブラウザ）に関する問題について初心者の質問です。
  • 現在、テキストエディタでホームページを作成している中で、HTMLの表示に関する問題に悩んでいます。
  • 特に、Mac環境では正しく表示されるのに、他の環境（XP）やブラウザ（IE）で表示すると一部が正しく反映されないという現象が起きています。
回答を見る
  • ベストアンサー

ＨＴＭＬの表示（ブラウザ）

初心者です。 現在、テキストエディタでホームページを作成しています。 悪戦苦闘中です。 現在．．． ◆メインページ ◆ボタンページ をそれぞれ作って、Indexページに貼りつけています。 私のＰＣ環境はＭａｃ（10.04）で、ブラウザ（サファリ）にも反映されます。 これを別の環境（ＸＰ）、ブラウザ（ＩＥ）で表示させようとすると、 メインページ、ボタンページはブラウザにも反映されるのですが、Indexページは真っ白になってしまいます。（ソースは反映されています） すべてが反映されない（メインとボタン）のであれば、フォントの問題かな？とも思うのですが．．． この場合の原因や対応策はありますでしょうか？ よろしくお願いします。

noname#101548
noname#101548
  • CSS
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.3

ANo.1です。 頂いたソースを元に検証してみました。が、IE6 on Windows XP上でも質問者さまが直面されている様な「Indexページは真っ白になって」しまう、という現象は起こらず、各HTMLファイル単体で表示した時と同様に表示されましたが。Firefox、Opera、Safari等でも結果は同じでした。 こちらで試したものは以下のソースになります。 【インデックス】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ボタン</title> </head> <frameset rows="*,120" frameborder="0" border="0" framespacing="0" marginwidth="0" marginheight="0"> <frame src="main.html" name="main" id="main" scrolling="Auto" noresize marginwidth="0" marginheight="0" framespacing="0" frameborder="0" border="0"> <frame src="bot.html" name="botoom" id="botoom" scrolling="No" noresize marginwidth="0" marginheight="0" framespacing="0" frameborder="0" border="0"> <noframes> <body bgcolor="#FFFFFF"> </body> </noframes> </frameset> </html> 【メイン】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ボタン</title> </head> <body> <div align="center"> <table border="0" cellpadding="12" width="800"> <tr> <td valign="top"> <table bgcolor="#FFF000" width="120" height="150" class="td1"> <tr> <td align="center"><font class="title">★</font><br><font class="title2">☆</font></td> </tr> </table> </td> <td valign="top" align="center" rowspan="2"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"> <table width="1" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFF000" height="350"> <tr> <td class="td1"><img src="spacer.gif" width="1" height="10" border="0" alt=""></td> </tr> </table> </td> </tr> <tr> <td> <table width="8" height="18" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFF000"> <tr> <td class="td1"><img src="spacer.gif" width="8" height="18" border="0" alt=""></td> </tr> </table> </td> </tr> </table> </td> ～テキスト～ </table> </div> </html> 【ボタン】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>ボタン</title> <script language="JavaScript1.2"> <!-- function chg_bg(id,clr,num) { for (i = 0; i < num; i++) { if(document.all) { document.all[id +(i + 1)].style.backgroundColor = clr; } } } // --> </script> </head> <body topmargin=0 bottommargin="0" leftmargin=0 rightmargin="0" marginwidth="0" marginheight="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#5A5E66"> <td class="td1"> <table width="100%" border="0" cellspacing="1" cellpadding="6"></tr> <tr> <td bgcolor="#999999" id="e1" onmouseover="chg_bg('e','cacbd8',1)" onmouseout="chg_bg('e','999999',1)" align="center"><a href="#">◇◇◇</a></td> <td bgcolor="#999999" id="f1" onmouseover="chg_bg('f','cacbd8',1)" onmouseout="chg_bg('f','999999',1)" align="center"><a href="#">▼▼▼</a></td> <td bgcolor="#999999" id="g1" onmouseover="chg_bg('g','cacbd8',1)" onmouseout="chg_bg('g','999999',1)" align="center"><a href="#">▽▽▽</a></td> </tr> </table> </td> </tr> </table> </body> </html> オリジナルのソースから手を加えたのは以下の点のみです。 (1)DOCTYPEの記載がなかったので、とりあえずインデックスファイルにはHTML4.01 Framesetを、メイン／ボタンファイルにはHTML4.01 Strictを宣言。 (2)head内に文字コード等最低限のmeta情報を追加。 (3)表記が見づらかったのでタグを小文字に統一、改行を適宜入れる (1)(2)に関してはコピペの際、省略されただけかもしれませんし、(3)については表示結果には影響を与えるものではありません。 この状態でもとりあえずは主要な環境で表示はされています。この様に、同じ現象が発生しませんでしたので、提供された情報に基づく現段階での検証では、質問者様の抱えてらっしゃるトラブルの原因は残念ながらわかりかねました。 ただし、「とりあえず表示」と申し上げたのにはわけがあります。3ファイルとも、文法上のミスがかなり見受けられます。もしかしたらコピペのミスに過ぎず、オリジナルではそうなっていないのかもしれませんが、タグの入れ子状態が計算が合っていなかった（開始タグと閉じタグの組み合わせが不正）り、テキスト・データが入れない筈の場所に入っていたり、などかなりよろしくない状況になっています。一度、それぞれのファイルをHTML文法チェッカーにかけて、（致命的な）エラーを極力なくし、適切な構造に修正できてから再度お試しになってみる事をお奨めします。そうしておかないと、今の状態ではたまたまブラウザが適当に補正して何とか表示させてくれている様に見えますが、この先編集を進める段階で表示もぐちゃぐちゃになる可能性が高いです。 【文法チェッカーの一例】http://openlab.ring.gr.jp/k16/htmllint/htmllint.html

noname#101548
質問者

お礼

ありがとうございます。 １と２に関してはご指摘の通り省略をしました。 しかし、文法ミスが多いんですね。。。 私自身、文法自体は手を入れておらずソースはそのまま使用しました。 まだまだ勉強不足なのでこういう間違いすら気付きませんでした。 少しずつ見直してやってみます。

その他の回答 (2)

回答No.2

＞◆メインページ ◆ボタンページ をそれぞれ作って、Indexページに貼りつけています。 フレームでしょうか？インクルードさせているということでしょうか？ ＞フォントの問題かな？とも思うのですが．．． familyを指定していますか？ sizeを指定していますか？ colorを指定していますか？ ソースを見ないと状況が分かりません。

  • abril
  • ベストアンサー率69% (388/560)
回答No.1

> ◆メインページ > ◆ボタンページ > をそれぞれ作って、Indexページに貼りつけています。 これは、フレームを使用されている、という意味ですか？ つまり、（以下のファイル名は適当） ・「メインページ」：main.html ・「ボタンページ（ナビゲーション／メニューの事かと思います）」：navi.html ・「Indexページ」：（左右もしくは上下フレームを切ったファイルで、左もしくは上にnavi.html、右もしくは下にmain.htmlを呼び込んでいる）index.html という様なファイル構成でしょうか？ もしそうであるなら、フレーム内に表示されているHTMLファイル単体でなら正常に表示されているが、フレーム内に表示させた時に挙動がおかしい、という事になりますので、index.htmlの書き方に何か問題がある可能性が高い様に思われます（ただそうするとSafari on Macではちゃんと表示されている、というのがちょっと解せませんが…）。 いずれにせよ、HTMLソースを公開して頂かないと詳細はわかりかねますので、それぞれの3つのファイルの大枠でかまいませんので提供して下さい。

noname#101548
質問者

補足

いちからでは到底無理なので、 無料配布のテンプレートを修正しながら作業しています。 ポイントになる大枠が分らないので、ほぼ全文です (^-^;; よろしくお願いします。 【ボタン（メニュー）】 <HEAD> <SCRIPT LANGUAGE="JavaScript1.2"> <!-- function chg_bg(id,clr,num) { for (i = 0; i < num; i++) { if(document.all) { document.all[id +(i + 1)].style.backgroundColor = clr; } } } // --> </SCRIPT> <TITLE>ボタン</TITLE> </HEAD> <BODY TOPMARGIN=0 BOTTOMMARGIN="0" LEFTMARGIN=0 RIGHTMARGIN="0" marginwidth="0" marginheight="0"> <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#5A5E66"> <td class="td1"> <table width="100%" border="0" cellspacing="1" cellpadding="6"></tr> <tr> <td bgcolor="#999999" ID="e1" onMouseOver="chg_bg('e','cacbd8',1)" onMouseOut="chg_bg('e','999999',1)" align="center"><a href="#">◇◇◇</a></td> <td bgcolor="#999999" ID="f1" onMouseOver="chg_bg('f','cacbd8',1)" onMouseOut="chg_bg('f','999999',1)" align="center"><a href="#">▼▼▼</a></td> <td bgcolor="#999999" ID="g1" onMouseOver="chg_bg('g','cacbd8',1)" onMouseOut="chg_bg('g','999999',1)" align="center"><a href="#">▽▽▽</a></td> </tr></table></td></tr></table> 【メイン】 <BODY> <div align="center"> <table border="0" cellpadding="12" width="800"> <tr> <td valign="top"> <table bgcolor="#FFF000" width="120" height="150" class="td1"> <tr> <td align="center"><font class="title">★</font><br><font class="title2">☆</font></td></tr></table></td> <td valign="top" align="center" rowspan="2"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center"><table width="1" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFF000" height="350"> <tr> <td class="td1"><img src="spacer.gif" width="1" height="10" border="0" alt=""></td></tr></table></td></tr><tr> <td><table width="8" height="18" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFF000"> <tr> <td class="td1"><img src="spacer.gif" width="8" height="18" border="0" alt=""></td></tr></table></td></tr></table></td> ～テキスト～ </table> </div> 【INDEX】 <frameset rows="*,120" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0" MARGINWIDTH="0" MARGINHEIGHT="0"> <frame src="main.html" name="main" id="main" scrolling="Auto" noresize marginwidth="0" marginheight="0" framespacing="0" frameborder="0" border="0"> <frame src="bot.html" name="botoom" id="botoom" scrolling="No" noresize marginwidth="0" marginheight="0" framespacing="0" frameborder="0" border="0"> <noframes> <body bgcolor="#FFFFFF"> </body> </noframes> </frameset>

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • Windows用テキストエディタとフォントについて

    どうもいつもお世話になります。 Windows用テキストエディタとフォントの関係について教えて下さい。 前から気になっていた事なのです。 私は普段Macをメインに使っておりますがMacのテキストエディタではどんなフォントでも使う事が出来ます。 しかしWindowsのテキストエディタでは等幅フォントしか使えないものが多いようです。 どうしてですか？ 私が知っているWindowsのテキストエディタでは秀丸、iTextなどがプロポーショナルフォントが使えて、他の多くは使えません。 以前、エディタに右端で折り返すような機能がある際、等幅フォントなら1行あたりの文字数が一定になり、その文字数に達したら自動的に折り返すように出来るが、プロポーショナルフォントではそれが一定にならないから、テキストエディタでは等幅フォントのみを用いるのだという事を聞いた事があります。 しかしそれならどうしてMacのエディタは全て（かどうかは分かりませんが、Mac用エディタで等幅フォントしか表示出来ないものは見た事がありません）プロポーショナルフォントも表示出来るのでしょうか？ Windowsではテキストエディタにプロポーショナルフォントを使う事はそんなに難しい事なのでしょうか？ Windowsでも秀丸はそれだけすぐれているとか。 MacとWindowsではソフトのしくみが違うという事なのでしょうか？ これも前から思っていた事ですが、MacとWindowsではテキストエディタの雰囲気がずいぶん違いますよね。 私は専門的な知識は何もありません。 宜しくお願い致します。

  • ＨＴＭＬのタグが正常に表示されない

    ヤフーオークションにストア登録をしているものですが、このたびＨＴＭＬタグを使用してページデザインをカスタマイズを考えています。ＨＴＭＬなどの知識は皆無なので、書店なので関連書籍を購入し悪戦苦闘しているところです。 そこで質問の内容ですが、アドビ社のphotoshopで簡単なバナーというかロゴを作り、アドビ社のGoLiveでレイアウトを整えて、そのソースをコピー＆ペーストでヤフーオークション上のＨＴＭＬ編集の指定されたところに貼り付けたのですが、プレビューで確認したところテキスト部分は正常に反映されているのですが、ロゴの部分がリンクされていない状態の表示がでて、正常に反映されていません。 この状態の原因はどこにあるのか教えてください。 よろしくお願いいたします。

  • テキストボックスが複数タブに表示される。

    お世話になります。 現在、Access 2010にてフォームを作成しています。このフォームにて「タブコントロール」の機能を使用しています。 タブを切り替えてそれぞれのページに含まれるテキストボックスなどに内容を入力できるようにしているのですが、一部のテキストボックスは複数のタブで選択される複数のページに表示されてしまいます。しかも、このうち、どれかひとつのページででも該当のテキストボックスを削除すると、すべてのページから該当のテキストボックスが削除されてしまいます。 いろいろしらべて悪戦苦闘しているのですが改善に至りません。恐れ入りますが考えられる対処方法をご教授くださいますようよろしくお願いします。 なお、主な環境等は以下の通りです。 ・intel core i5 ・Windows 7 Professional ・Office　2010(Access2010)

  • Tera Pad でHTMLとブラウザでの表示

    ホームページビルダー11でほぼページの作成ができるようになりましたので、今度は本格的に やってみようと、「HTML&CSS超入門」を購入してきて勉強しております。 テキストエディタはフリーウェアのTera Padです。 本の指示に従って、一応見本のページが完成しました。次に見本を応用しながら自分のページ をHTMLとCSSで作成しております。フォントは自分の気に入ってるメイリオにしようとしたのです が、TeraPadには入っておりません。 そこでいろいろ検索して、他のサイトの方のご指示に従って、メイリオをWindowsの中のFontに ペーストすることができました。 早速Tera Padの表示→フォントを見ますと、Meiryo_Console　と　Meiryo_Gothic　が出てきまし たので、CSSのfont-styleをMeiryo_Consoleにしました。 HTMLを見ますと全て綺麗なメイリオの文字になっており、やっと出来たと思いながらブラウザ （Intenet Explorer）で見てみますと全く文字が変化しておりません。 表示→オプションをみたのですが,手につきませんでした。 このような状態ですが、皆様宜しくお願い致します。

    • ベストアンサー
    • CSS
  • ブラウザ上で表示されている文字のフォントを知る方法

    ブラウザ上で表示される文字のフォントはページのソースやブラウザの設定やOSの持っているフォントによって変わりますが、最終的にどのフォントが描画に使われているのかを知る手段はありませんか? また、最終結果ではなく、ページのソースで指示されているフォント名を知る方法もあれば教えてください。

  • HTMLファイル内リンクからソースをエディタで開く

    お世話になります。王次郎です。 標記の件、 HTMLファイル内のリンクで、htmlファイルをエディタで開くリンクを作ることは可能でしょうか？ 例えば リンクを押したら、「index.html」をエディタで開かせたいです。 以下の例の様に書いてしまうと、ブラウザで開いてしまいます。 やりたいことは、リンクをクリックした時にエディタ（テキスト編集可能な状態）で開きたいです （例） <A HREF="index.html"> ファイルを開く </A> よろしくお願いします。

  • IllustratorCS2(mac)のフォントの表示をwin風に。

    現在イラストレーターCS２をmacで主に使用しているのですが 諸事情でwinも少し併用していました。 そこでどなたか教えていただきたいのですが winだとフォントを選ぶ際にキーボードの↑↓キーでフォントが選べ、 いま選択している文字列に反映することができるのですが macだとキーボードではフォントは選べませんし、 いちいち決定しないと文字列に反映されないですよね？？ なんとかwinのようにキーボードの矢印キーでフォントを選べるように設定できないでしょうか？？ 300近くフォントがあるのでこれができるとすごく便利です。 環境設定などもみてみましたがいまいちよく分かりません。 結構切実になやんでます。 どなたか教えてください。

  • 外部CSSが反映されるHTMLとされないHTML

    レンタルサーバのファイルマネージャを使ってサイトを作っています。 外部CSSで文字のフォントをＭＳ Ｐゴシックに統一したいのですが、反映されるページとされないページができました。 CSSには、 @charset "Shift_JIS"; p { font-family: "ＭＳ Ｐゴシック",sans-serif; } 読み込みには、 <link href="./style.css" rel="stylesheet" type="text/css"> と記述しました。 反映されたのはサイト２ページ目の２分割フレームの片側だけで、その他のページはブラウザで指定したフォントのままCSSが反映しません。 HTML、CSS共に文字コードはShift_JISで統一していて、それぞれ<head></head>間の同じ位置に記述してあります。 反映されたHTML内にはボックスの幅指定でCSSを使っていますが、その他のページにはCSSを使っていません。違いはこれだと思うのですが、それがきっかけで反映されたりされなかったりと変わるものなのでしょうか？ HTML、CSS共に初心者です。この質問が初歩的なことなのか難しいことなのかもわかりません。 よろしくお願いします。

  • index.htmlしか表示されない

    FC3をインストールしています。 PHP5、MySQL5をいれたあとにページ確認をしようとしたら、index.htmlのページだけ表示されるのですが、例えば同じファイルでもaaa.htmlにするとブラウザ上で真っ白くなってしまいます。 ブラウザからソース表示させるとソースはきちんとしているので原因がわかりません。 何卒、ご教授くださいm(_ _)mペコリ

  • フレームの際のHTMLタグ表示について

    ホームページを新たにフレーム式に作成しました。 ページの表示には問題が無いのですが、 何故か、右側のメインのページのHTMLタグがソースで すべて表示されています。 通常フレームの場合のタグは見えなくなりますよね。 （御覧になるにはフレームが読み込めるブラウザーが必要です・・・とかの表示で） OSはウインドウズME ブラウザーはIE5.5 ホームページビルダーによって作成しました。 普通のフレームのページのようにタグが見えないように したいのですが、何が間違えているのか、問題なのか わかれば、是非お教えください。よろしくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する