アプリ版：「スタンプのみでお礼する」機能のリリースについて

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

解決済

  • 質問者：pagwanko
  • 質問日時：
  • 回答数：3件

初心者です。
現在、テキストエディタでホームページを作成しています。
悪戦苦闘中です。

現在．．．
◆メインページ
◆ボタンページ
をそれぞれ作って、Indexページに貼りつけています。
私のＰＣ環境はＭａｃ（10.04）で、ブラウザ（サファリ）にも反映されます。

これを別の環境（ＸＰ）、ブラウザ（ＩＥ）で表示させようとすると、
メインページ、ボタンページはブラウザにも反映されるのですが、Indexページは真っ白になってしまいます。（ソースは反映されています）
すべてが反映されない（メインとボタン）のであれば、フォントの問題かな？とも思うのですが．．．

この場合の原因や対応策はありますでしょうか？
よろしくお願いします。

通報する

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

質問の本文を隠す

A 回答 (3件)

No.1

  • 回答者： abril
  • 回答日時：

> ◆メインページ


> ◆ボタンページ
> をそれぞれ作って、Indexページに貼りつけています。

これは、フレームを使用されている、という意味ですか？

つまり、（以下のファイル名は適当）

・「メインページ」：main.html
・「ボタンページ（ナビゲーション／メニューの事かと思います）」：navi.html
・「Indexページ」：（左右もしくは上下フレームを切ったファイルで、左もしくは上にnavi.html、右もしくは下にmain.htmlを呼び込んでいる）index.html

という様なファイル構成でしょうか？
もしそうであるなら、フレーム内に表示されているHTMLファイル単体でなら正常に表示されているが、フレーム内に表示させた時に挙動がおかしい、という事になりますので、index.htmlの書き方に何か問題がある可能性が高い様に思われます（ただそうするとSafari on Macではちゃんと表示されている、というのがちょっと解せませんが…）。

いずれにせよ、HTMLソースを公開して頂かないと詳細はわかりかねますので、それぞれの3つのファイルの大枠でかまいませんので提供して下さい。

この回答への補足

いちからでは到底無理なので、
無料配布のテンプレートを修正しながら作業しています。
ポイントになる大枠が分らないので、ほぼ全文です (^-^;;
よろしくお願いします。

【ボタン（メニュー）】
<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>

補足日時：2008/10/14 17:40
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： font_color
  • 回答日時：

＞◆メインページ


◆ボタンページ
をそれぞれ作って、Indexページに貼りつけています。

フレームでしょうか？インクルードさせているということでしょうか？

＞フォントの問題かな？とも思うのですが．．．

familyを指定していますか？
sizeを指定していますか？
colorを指定していますか？

ソースを見ないと状況が分かりません。
    • good
    • 0
    • 件
通報する

No.3ベストアンサー

  • 回答者： abril
  • 回答日時：

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. …
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

１と２に関してはご指摘の通り省略をしました。

しかし、文法ミスが多いんですね。。。
私自身、文法自体は手を入れておらずソースはそのまま使用しました。

まだまだ勉強不足なのでこういう間違いすら気付きませんでした。

少しずつ見直してやってみます。

通報する
お礼日時：2008/10/21 12:58

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

Q質問する（無料）

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

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

Q質問する（無料）

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

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

おすすめ情報