- ベストアンサー
スタイルシートが実行できません・・・
- HPを作っています。下記の通りにCSSを組み込んだのですが、実行されません。
- ただの画像とテキストだけのページに同じCSSを組み込みましたら、実行されました。
- Javascriptと何か関係があるのでしょうか？
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
table要素が入っていたために、body要素のフォントサイズに関するスタイルシートがうまく適用されていなかったようです。 body要素に対して指定したフォントサイズのスタイルシート指定は、table要素内のテキストに対しては適用されないようです。 スタイルシートの記述に、以下の一文を入れてみて下さい。 table{ font-family:"MS UI Gothic"; font-size: 10px;} これを追加すれば、table要素内のテキストにもフォントサイズの指定が適用されると思います。 こちらでは、IE 6とNetscape 7で確認しました。 おそらくこれで解決できるのではないかと思います。 たびたび失礼しました。
その他の回答 (2)
フォントサイズだけが反映されない、ブラウザ(IE)で文字サイズの変更が有効になっているということですね? 本文の中で、<font>タグなどを使用していないでしょうか。 <font>タグで文字のサイズを指定してある場合、文書全体の文字サイズを指定するスタイルシートよりも、<font>タグでのサイズ指定が優先されると思います。 この場合、IEでもブラウザ側の文字の表示サイズの変更を行うことで、文字サイズを変更できます。 あるいは、それぞれの要素に対して個別にスタイルシートを適用してある場合、優先順位の関係でより細かいところで指定されたスタイルシートが優先されて反映されている可能性もあるかも知れません。 もし<font>タグでのサイズ指定をしていなかった場合は、こちらのほうも可能性として検討する必要があると思います。(ただ、IEでブラウザ側から文字サイズの変更ができるということから、可能性は薄いと思いますが…) このあたりは、いかがでしょうか? もしこれでなければ、差し支えない範囲でHTMLソースを開示していただいたほうが、解決しやすいかもしれません。 個人的な情報やここで開示するには差し支えのある情報(メールアドレス・リンク先URLなど)は削除して構いませんので、もし解決に至らなかった場合は、補足をお願いします。 ご質問にあるJavaScriptの記述は、基本的にはCSSとは関係ないと思いますので、こちらの可能性は考えなくても大丈夫だと思います。 なお蛇足ですが、スタイルシートを利用した場合でも、IE以外のブラウザのほとんどは、文字のサイズをブラウザ側の表示設定によって調整できますので、スタイルシートで文字サイズの完全固定は難しいと思います。 少なくとも、NetscapeやOperaであれば、文字を拡大できますし、そのほうがユーザーフレンドリーになると思われるところもあります。
補足
たびたびありがとうございます。 ソースは以下のようになっております。 １か所<FONT>タグを使っていましたが、はずしても変わりありませんでした。 お手数ですがよろしくお願いします。 ----------------------------------------------- <html> <head> <title>○○○</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- body{ color:#444444; background-attachment:fixed; font-family:"MS UI Gothic"; font-size:10px; } --> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- function new_win1(){ myWin=window.open("album01.html","","width=320,height=350"); } function new_win2(){ myWin=window.open("album02.html","","width=320,height=350"); } function new_win3(){ myWin=window.open("album03.html","","width=320,height=350"); } function new_win4(){ myWin=window.open("album04.html","","width=320,height=350"); } function new_win5(){ myWin=window.open("album05.html","","width=320,height=350"); } function win_close(){myWin.close();} //--> </SCRIPT> </head> <body onUnload="win_close()" bgcolor="#FFFFCC" link="#FFFFFF" vlink="#FFFFFF"> <table width="600" border="0" cellspacing="0" cellpadding="2" bgcolor="#FFFFFF"> <tr> <td colspan="8"><img src="album_title.gif" width="144" height="36"></td> </tr> <tr> <td colspan="8">□クリックすると大きな画像で見られます□</td> </tr> <tr> <td colspan="8"> <table width="550" border="0" cellspacing="3" cellpadding="0" align="center"> <tr> <td bgcolor="#FF9900" width="110" height="110"> <div align="center"><font color="#FFFFFF">○○○</font></div> </td> <td width="110" height="110"> <div align="center"></div> </td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win1();return false"> <img border="0" src="_01.jpg" width="110" height="110"> </a></td> <td width="110" height="110">○○○</td> <td width="110" height="110"><img src="img/main/shim.gif" width="110" height="110"></td> </tr> <tr> <td width="110" height="110"> </td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win2();return false"> <img border="0" src="_02.jpg" width="110" height="110"></a> </td> <td width="110" height="110">○○○</td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win3();return false"> <img border="0" src="_03.jpg" width="110" height="110"></a> <td width="110" height="110">○○○</td> </tr> <tr> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win4();return false"><img border="0" src="_04.jpg" width="110" height="110"></a></td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win4();return false"> </a>○○○</td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win5();return false"><img border="0" src="_05.jpg" width="110" height="110"></a></td> <td width="110" height="110"><a href="#" onClick="JavaScript:new_win5();return false"> </a>○○○</td> <td width="110" height="110"> </td> </tr> </table> </td> </tr> </table> </body> </html>
ちょっと状況が飲み込めないのですが、例にあるページを表示させたときに、そのページでのスタイルシートが反映されないということでしょうか? それとも、新しく開いたウィンドウ内容のページでスタイルシートが反映されないということでしょうか? ぱっと見た感じでは、スタイルシートには異常はありませんし、こちらでテストしてみた結果でも正常にスタイルシートは反映されていますが… よろしければ、お使いのOSとブラウザとブラウザのバージョン、CSSが適用されていないと判断される状況での表示の状態を補足していただけると、原因の推定がしやすくなると思います。 あと、とりあえず基本的なところからですが… ブラウザの設定で、スタイルシートが適用されるようになっているか確認するのも必要かもしれません。 ブラウザでスタイルシートを適用しないように設定されている場合は、当然スタイルシートは反映されないですよね。 ただ、他のページでは反映されるということなので、この線は薄いかもしれませんが… もし、新しく開いたウィンドウ内の表示にスタイルシートが反映されていないという状況が問題なのであれば、それは「album1.html」のファイルのほうでスタイルシートを定義していないためでしょう。 こちらの場合でしたら、「album1.html」の中にスタイルシートを導入する記述を入れれば解決になると思います。
補足
申し訳ありません、説明不足でした。 Win98でIE6.0を使用しています。 新しく開いたウインドウで反映されないということでは なく、この親ページ自体がCSSが反映されません。 さきほど改めてアップして確認しましたところ 文字色とフォントはCSSの通り正常に表示されましたが、 フォントサイズが反映されません。（ブラウザで表示→文字のサイズ、で表示を変えると変わってしまいます。） Javascriptを記述していないシンプルなhtmlだけの ページではCSSは正常に反映されるのに、Javascriptを 記述したページは反映されないので、もしかしてJavascriptと関係があるのかな？と思い、念のためJavascriptも記載しておきました。 でも関係ないですよね・・・ わかりずらい説明で申し訳ありませんが 原因が考えられましたらお願いいたします。
お礼
こんばんは。 できました！ テーブル内にはテーブルのテキストを入れないと反映されないのですねー。 勉強になりました。 ほんとに何度もおつきあいいただきありがとうございました。 これでステキなHPが作れます。感謝です。 lead1976さん、ありがとうございました。