- 締切済み
IEにおいて、CSSの記述順番によって表示が異なる？！
CSSの外部ファイルを読み込んで、スタイルを効かせているのですが、 ブラウザIEだとスタイルの書き順によってスタイルが効いたり効かなかったりします。 例えば、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="http://sample.com/style.css"/> </head> <body> <div id="style0"> <!--style0の始まり--> <div id="style1"><p>■■■</p></div> <p id="style2">■■■</p> <ul class="style3"> <li id="style4">■■■</li> <li id="style4">■■■</li> </ul> </div> <!--style0の終わり--> </body> </html> というHTMLにおけるCSSの書き順は、 #style0{ ▲▲▲ } #style1{ ▲▲▲ } #style2{ ▲▲▲ } .style3{ ▲▲▲ } #style4{ ▲▲▲ } の様に、HTMLファイル内でスタイルを指定した順に（スタイルの登場順に）、CSSファイル内ではスタイルを記述しきゃならないのでしょうか？ もっとも、登場順に指定した方が良いかどうかも、私には分かっていません。ただ言えるのは、IEにおいて、書き順によって表示に違いが生じるということだけです。 なお、私が知りたいことは、 ・こういう現象が起こることは一般的にあることなのかどうか ・この現象の発生メカニズム ・IEにおけるCSSの正しい記述法（記述順番） 以上３点です。 ちなみに、FireFoxやOperaでは、順不同で問題なさそうです。 くどくなりますが、IEで問題が生じる場合というのは、 例えば、上の例で言えば、 スタイルの書き順を、 style3{ ▲▲▲ } style2{ ▲▲▲ } style4{ ▲▲▲ } のように順番を変えて記述した場合です。 この問題についてネット上で色々と調べたのですが、解決に至りませんでした。 リンクのスタイルなど、書き順が重要なものがあるということは知っているのですが、本件とはまた別の話だと思っています。 質問の記載方法に不備がありましたら、適宜補足をさせて頂きます。 以上、どなたか回答をよろしくお願い致します。
- march4
- お礼率83% (628/754)
- HTML
- 回答数5
- ありがとう数6
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
@charsetは、指定がない場合、HTMLの文字コードを準拠するブラウザが多いと思います。 指定と異なっていた場合、日本語・・たとえば"MS 明朝"なんて読み取れないものが合ったりすると、firefoxでは、次の}あたりまでは読み取りませんが、IEだと以後の設定がすべて無効になってしまう。 そのあたりが原因ではないかと・・・
- ORUKA1951
- ベストアンサー率45% (5062/11036)
id属性、すなわち「一意セレクタ」は、詳細度が100ですから、他のセレクタよりは優先されます。 問題は、 ★一つのスタイルシートにおいて ★異なる一意セレクタで指定されている要素 が適用されるかということなら、Noです。これはブラウザの種類は問いません。 #dtyle1 が、#style2よりも後で指定されていたとしても、そもそも#style2での指定が#style1の要素に適用されることはありえないからです。 実際にそれが発生する事例を示していただければ・・・
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
さらなるアドバイスをありがとうございます。 頂いた回答を読み、idの適用のされ方について、共通の認識であることを確認しました。 もうこうなったら、例を示すしかないっ！ という気持ちで、ガシガシとＨＴＭＬとＣＳＳを作成していたのですが、 なんとっ、作成途中に本件とは別の問題点を発見し、それを改善したら、あら不思議。 本件もスッキリ解決されちゃいました。 こんなことがあるなんて… というオチでした。 では、その問題点と改善方法を説明します。 問題点は、ＣＳＳファイル内の先頭に記述する @charset "○○○"; にありました。 ＨＴＭＬファイルでは、charset を UTF-8にしていましたが、 ＣＳＳファイルでは、@charset "euc-jp"; となっていました。 つまり、文字コードが、ＨＴＭＬとＣＳＳで不一致だったわけです。 euc-jpとなっていたのは、UTF-8に変更し忘れていたというミスです。 このミスに先ほど気がつき、改善したところ、ＩＥでのスタイルの乱れがピタっと止まりました。 まとめますと、 ＩＥでは、ＨＴＭＬとＣＳＳで同じ charset をちゃんと指定してあげないと、スタイルが正常に効かない。 ということです。 ※ただし、ＩＥと言っても、すべてのバージョンを指すわけではありません。私が使用しているバージョン（６かな？７でもダメだった気がします）において、問題が発生したことを確認したというだけですので、その点は誤解なきように。 FireFoxやOperaでは、この辺りは大らかなのでしょうね。 問題なくスタイルは効きます。 （こちらのバージョンについても上記［※箇所］同様です。） euc-jp → UTF-8 この変更だけで全てが改善されたわけですから驚きです。 こんなミスを指摘できる回答者はまずいないでしょうね。。＾＾； しかし、それを自分で見つけるきっかけを与えて下さった回答者の方達にはとても感謝しています。 ありがとうございます。 これが多くの迷える子羊たちの肥やしになれば良いなと思います。 （試しに、自サイトで@charsetをイジッてみるとすぐに分かります＾＾） と、解決した気でいますが、全てをチェックしたわけではないので、 これが原因であったかどうかは、まだよく分かっていません。 しかし、ざっと確認した感じでは、９割方、これが原因であろうと思います。 本件の問題についてもう少し自分で調べ、問題が無さそうであれば、回答を締め切らせて頂きます。 それでは、私の悩みにお付き合い頂き、本当にありがとうございました。 もし何かありましたら、感想などお寄せ下さい。＾＾
- ORUKA1951
- ベストアンサー率45% (5062/11036)
CSSを学ぶ順番は重要なのですが、なぜか参照方法からいきなりプロパティへ進む方が多く、CSSをCSSたらしめているカスケーディングという最も重要な部分を抜かしてしまう人が多い。Cascading Style SheetsのCascadingとは継承 ＞同じ属性をしていている場合、記述が後の方が優先されます。 は正確ではありません。 正確には、出所や重要度が同じで、詳細度が同じ場合は、後で登場したものが優先されます。 簡単な説明は、 優先順位( http://ja.wikipedia.org/wiki/Cascading_Style_Sheets#.E5.84.AA.E5.85.88.E9.A0.86.E4.BD.8D ) わご覧ください。 ブラウザによっては正確ではない・・・というよりCSSの仕様書で明確に指定されていないものについては、判断が異なる場合があります。 重要な詳細度については ★詳細度によって整理する の項目です。 1)そのセレクタ内で指定先を一意に決められるもの（IDの類）が多い方を優先する 2)IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する 3)それでも優先順位が決まらない場合は、要素の数が多い方を優先する この前段階の詳細度について記述がありませんが、次のように計算します。 【参考サイト】 Assigning property values, Cascading, and Inheritance http://www.y-adagio.com/public/standards/tr_css2/cascade.html#specificity 【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 選択子の固有性の計算を次に示す。 ★選択子のID属性の数を数える。 (= a) ★選択子のその他の属性及び擬似クラスの数を数える。(= b) ★選択子の要素名の数を数える。 (= c) ★擬似要素を無視する。 三つの数a-b-cを基数が大きい数値システムで連結することにより，固有性を提供する。 ￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance( http://www.y-adagio.com/public/standards/tr_css2/cascade.html#specificity )］より ★それよりも気になったのは、 <div id="style1">という記載ですが、CSSのためだけにidを付加する事は好ましくはありません。<div class="main">とか<div class="nore links">のように意味があるものにしておくほうがよいでしょう。
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
回答ありがとうございます。 色々と詳しく書かれているようなのですが、正直、ピンとくる箇所はありませんでした。 よく理解できなかった、ということなのかもしれません。 はたして、私の疑問を払拭する記述が、この回答の中にあるのだろうか。 ちょっと疑わしい。。。 という気もしています。 なので、質問を少し変えてみます。 divに設定したスタイルidが、複数個あり、そのidのスタイルの記述を ＣＳＳファイル内において並び替えることで、ＩＥでの表示が狂うことはあり得るのかどうか。 この点が知りたいわけです。 以下、全て、divのidスタイル。 また、それぞれのdivは、1つのidでのみスタイル指定をしています。 #style0{○○:▲▲;} #style1{○○:▲▲;} #style2{○○:▲▲;} #style3{○○:▲▲;} 上記の順番を下記のようにすると、ＩＥにおいて、スタイル表示は乱れますでしょうか。 #style2{○○:▲▲;} #style3{○○:▲▲;} #style0{○○:▲▲;} #style1{○○:▲▲;} スタイルはすべてid表記ですから、 その箇所固有のスタイルになるはずです。 順番を入れ換えることで、スタイルが乱れることはないように思うのですが、そうではないのでしょうか？ FireFoxやOperaでは起こらず、ＩＥでのみ起こります。 この、改めて焦点を絞った質問において、新たに回答を頂けると大変助かります。 最初に頂いた回答の中から、重要箇所を改めてピックアップして頂き、それを用いて回答頂いても結構です。 （そうして頂いた場合には、「あ～、そういう意味だったのか～」と私は思うに違いありません。） 次に、頂いた回答の最後の部分ですが、 ＞★それよりも気になったのは、 <div id="style1">という記載ですが、CSSのためだけにidを付加する事は好ましくはありません。 この箇所ですが、 まずは、回答者#1の所で補足している例をご覧下さい。 その中で、Ａ～Ｄの枠を書いています。 これらの範囲分けにdivを使い、それぞれにおいて、スタイル分けをしています。 これについては、好ましくない わけではないですよね？ また、style1等のような属性値の付け方をmainなどのように意味のあるものにしておくほうが良いというのは、理解しています。 実際のサイト制作ではそうしています。その方が見て分かりやすいので。 なお、この、属性値の付け方についての指摘は回答者#２の所でもあり、そこで補足をしていますので、ここでは省略します。 以上、よろしくお願い致します。
- suzuko
- ベストアンサー率38% (1112/2922)
う～～～ん。 自分は前後させて書いていますが、そんなことにはなりません。 元々CSSの名称に「style○」は使用しませんので。 書かれている例は、classとidの使い方がごちゃごちゃのような気がするんですが。 idはそのhtmlに１度だけ使用する物ですよね。 classは何度使用してもいいカテゴリわけですよね。 ですから、 <body> <div id="main"> <!--mainの始まり--> <p class="center">■■■</p> <ul class="attention"> <li class="red">■■■</li> <li class="red">■■■</li> </ul> </div> <!--mainの終わり--> <div id="navi"><p>■■■</p></div> </body> というHTMLにおけるCSSの書き順は、 #main { ▲▲▲ } #navi{ ▲▲▲ } .center { ▲▲▲ } .red { ▲▲▲ } .attention { ▲▲▲ } でも、IEは表示されると思うのですが・・・・
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
回答ありがとうございます。 「元々CSSの名称に「style○」は使用しませんので。」の箇所で、 便宜上、style○という書き方をしただけですので、 これは、mainでも構いません。 問題の本質がその点にあるのでしたら、大変参考になるのですが、 そうではありませんよね？ 私が知りたいのは、問題の本質なので、その点についてご助言頂けると助かります。 また、 「idはそのhtmlに１度だけ使用する物ですよね。」の箇所で、 私の挙げた例では、idとして作ったスタイルstyle0やstyle1などは、 どれも１度しか使っていませんので、この点も問題ないかと思います。 id自体は、id="style0"、id="style1"というように、 そのhtml内で何度も使って良いわけですから。 おっしゃられているのは、 id="style0" のスタイルを、1つのhtml内で、複数箇所使うことがよろしくないという話なわけですよね？ 例（イケナイ例） <div id="style0">AAAA</div> <div id="style0">BBBB</div> 私の挙げた例に、そのような箇所はありませんので、これもまた、問題の本質とは関係がなさそうです。 最後に、.red と .attention の入れ換えによるスタイル表示の違いはないだろうというお話は、試していないので分かりません。 この点において、 「そうはならなかった！なぜなら～。」 という風に回答頂けたら、とても回答として有り難いものになったように思います。
- t_ohta
- ベストアンサー率38% (5061/13226)
スタイルシートでは同じ属性をしていている場合、記述が後の方が優先されます。 例で書かれているHTMLの場合、 #style0{ color: black; } #style1{ color: red; } とスタイルを指定したら <div id="style1"><p>■■■</p></div> の部分は赤く表示されますが #style1{ color: red; } #style0{ color: black; } とスタイルを指定したら <div id="style1"><p>■■■</p></div> の部分は黒く表示されます
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
回答ありがとうございます。 挙げて頂いた例では、style0とstyle1を入れ換えることで、色表示が異なるというお話でしたが、実際、本当にそうでしょうか？ idで、しっかりstyle0とstyle1という風に分けているので、 idをstyle0として指定した要素に、style1のスタイルは適用されないと思います。 というか、 おっしゃられていた、 「スタイルシートでは同じ属性をしていている場合、記述が後の方が優先されます。」 の部分ですが、style0とstyle1では、そもそも属性が異なります。 属性とは、id="style1" の部分ですから、 どう見ても、 id="style0"と、id="style1"は同じものには見えません。 よって、 #style1{ color: red; } #style0{ color: black; } と #style0{ color: black; } #style1{ color: red; } では、 同じスタイル表示がされるはずです。 実際に検証してみました所、やはりそのようなことは起こりませんでした。 もし、挙げて頂いた例のようなことが起こるとしたら、下記例では、 Ａ、Ｂ、Ｃ、Ｄ、すべての範囲が黄色になることになります。 （つまり、styleDが最後に出てきているので、このスタイルがすべてのdiv要素に反映されるという話になりますが、実際にはそうはなりませんでした。） //////////////////////////////////////////////// (例） ┏━━━━━━━━┓ ┃ ＡＡＡＡＡA ┃ ┃┏━━┓┏━━┓┃ ┃┃ B ┃┃ C ┃┃ ┃┃ＢＢB┃┃ＣＣC┃┃ ┃┃ B ┃┃ C ┃┃ ┃┗━━┛┗━━┛┃ ┃┏━━━━━━┓┃ ┃┃ＤＤＤD ┃┃ ┃┗━━━━━━┛┃ ┗━━━━━━━━┛ ■ＨＴＭＬファイル <div id="styleA"> ～Ａ枠～ <div id="styleB"> ～Ｂ枠～ </div> <div id="styleC"> ～Ｃ枠～ </div> <div id="styleD"> ～Ｄ枠～ </div> </div> ■ＣＳＳファイル（色指定はここでは便宜上、漢字で書いています。） #styleA{ background-color:白 width:100px; padding:10px; } #styleB{ background-color:赤 width:40px; padding:7px; float:left; } #styleC{ background-color:青 width:40px; padding:7px; float:right; } #styleD{ background-color:黄 width:80px; padding:7px; clear:both; } ////////////////////////////////////////////////
関連するQ&A
- IE用CSSが適用されない
通常は12pxを指定して、IEのみフォントサイズを11px指定したいのです。 <!DOCTYPE HTML> <html lang="jp"> <head> <meta charset="UTF-8"> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="css/ie.css"><![endif]--> <style> body { background-color:#FFFFFF; color:#333333; font: 'Lucida Grande', Verdana, Arial, 'Hiragino Kaku Gothic Pro', Meiryo, 'メイリオ', sans-serif; } #figure_main { font-size:12px; margin-top:10px; margin-left:10px; width:510px; } </style> </head> <body> <div id="figure_main"> <div class="box1"> <span>取締役会</span> </div> <div class="box1"> <span>取締役社長</span> </div> <div class="box2"> <span>常勤役員会</span> </div> <div> <ul> <li class="list_l">営業局</li> <li>人材派遣部</li> </ul> </div> </div> </body> </html> HTMLには<!--[if IE]>を記述し、 ie.cssには @charset "utf-8"; /* CSS Document */ #figure_main { font-size:11px; } と記述しましたが、適用されませんでした。適用されない理由を教えてくださいますか？ 宜しくお願いします。
- ベストアンサー
- HTML
- CSS・IEでボーダーを表示したい
お世話になります。 ホームページ構築(CSS)に関する質問です。 よろしくお願いします。 フリーのCSSサンプルサイトより、ソースをいただいて、 ページを作ってみたのですが。 ナビゲーションリストの部分で、 FireFoxでは、各メニューの右側に、仕切りの部分の「線」が、 表示されているのですが、なぜかIEでは表示されません。 まだ理解が足らないのですが、 「#navigation li a」の 「border-right: 1px double#fff;」あたりかなと思い、 線種を変えてみたりと、いろいろしているのですが 変化がありません。 変更すべき点をどうかご教授ください。 以下は実際のソースです。 「index.html」 --------------------------------------------------------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" href="common.css" type="text/css" /> <title>テストサイト</title> </head> <body> <div id="container"> <div id="header"> <h1>タイトル「テストサイト」 </h1> </div> <div id="navigation"> <ul> <li><a href="index.html">トップページ</a></li> <li><a href="menu2.html">メニュー２</a></li> <li><a href="menu3.html">メニュー３</a></li> <li><a href="menu4.html">メニュー４</a></li> </ul> </div> <div id="content"> <p>テストののページです。</p> <p>上記メニューよりご利用ください。</p> </div> <div id="footer"> Copyright テスト著作権, 2012 </div> </div> </body> </html> --------------------------------------------------------------------------------------------------------------------------- common.css --------------------------------------------------------------------------------------------------------------------------- @charset "UTF-8"; #container { margin: 0 auto; width: 600px; background:#fff; } #header { background:#ccc; padding: 20px; } #header h1 { margin: 0; font-size: 120%;} #navigation { float: left; width: 600px; background:#333; } #navigation ul { margin: 0; padding: 0; } #navigation ul li { list-style-type: none; display: inline; } #navigation li a { display: block; float: left; padding: 5px 10px; color:#fff; text-decoration: none; border-right: 1px double#fff; } #navigation li a:hover { background:#383; } #content { clear: left; padding: 20px; } #content h2 { color:#000; font-size: 160%; margin: 0 0 .5em; } #content h3 { font-size: 110%; } #footer { background:#ccc; text-align: right; padding: 20px; height: 1%; } -------------------------------------------------------------------------- 以上が内容になります。 どうかよろしくお願いします。
- ベストアンサー
- HTML
- IE8でCSSハックが効かないです。
IE8でCSSハックが効かないです。 IE8のCSSハックを使用したくて、下記のように指定したのですが、 IE8で見るとIE8用に記述したCSSハックが効かないです。 ちなみにIE6用のハックとデフォルトで指定したクラスはきちんと表示されます。 記述方法が原因なのでしょうか。それとも他に原因があるのでしょうか。 教えて欲しいです。 ■サンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="imagetoolbar" content="no"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="keywords" content="キーワード1,キーワード2"> <meta name="description" content="ディスプリクション"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> #main_contents p.test_style { font-weight: bold; color: #000; } /* IE6対策 */ *html #main_contents p.test_style { font-weight: bold; color: #ff0000; } /* IE8対策 */ html>/**/body #main_contents p.test_style { font-weight /*\**/: bold\9; color: #0033ff\9; } </style> <title>IE8表示テスト</title> </head> <body> <div id="main_contents" class="reset"> <p class="test_style">デフォルトのテキスト 黒で表示されます。</p> <p class="test_style">IE6用(css hack)のテキスト IE6で見ると赤で表示されます。</p> <p class="test_style">IE8用(css hack)のテキスト IE8で見ると青で表示されます。</p> <!--/main_contents--></div> </body> </html>
- 締切済み
- HTML
- CSSが悪いんでしょうか？
下記ソースをIE6で見ていただくとわかりますが、ナビ部分にカーソルをもっていくと、footerの背景が伸びたり縮んだりします。 IE6だけでこのような現象が出ています。 ※手元のデータは外部リンクです。 -----ソース----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> body {background: #EFEFEF;} #wrapper{background: #fff; padding: 0; width: 700px; line-height: 1.4em;} #header{border: 3px solid #333;} #nav{float: left; width: 150px;} #nav ul{margin:0; padding:0; list-style-type:none;} #nav li a{display:block; width:150px; margin:0 0 1px 0; background-color:#CCC;} #nav li a:hover{background-color:#FF9900; color:#000000;} #rightbox{padding:0 5px; width: 140px;} #main{border:4px solid #FF0000; float: right; width: 542px;} #footer{background-color:#CCC; clear: both;} </style> <title>test</title> </head> <body> <div id="wrapper"> <div id="header"> <h1>header</h1> </div> <div id="nav"> <ul> <li><a href="#">nav1</a></li> <li><a href="#">nav2</a></li> <li><a href="#">nav3</a></li> </ul> </div><!-- end nav --> <div id="main"> <h2>main</h2> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> <p>本文</p> </div><!-- end main --> <div id="footer"> footer </div><!-- end footer --> </div><!-- end wrapper --> </body> </html>
- ベストアンサー
- HTML
- CSSの外部参照について。
XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。 初心者です。 いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。ｍ（＿ ＿）ｍ index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。 XHTMLファイルはindex.html,works.htmlで （biography.htmlやaccess.htmlは後でつくります。）、 CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。 この回答にある４つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120846271 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />） *XHTMLソース <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <head profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS body,div,ul,ol,li,h1,p{margin:0; padding:0;} body{ text-align:center; min-width:780px; background:#f5f5f1; coler:#666666; fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif; font-size;62.5%; } h1{display:none;}h1 #wrapper{width:740px; margin:0 auto; text-align:left;} #main a {height:100px; color:#ffffff; font-size:1.8em; text-tramsform: uppercase; text-decoration: none; display: block;} #main a:hover,a:active{color: #cccccc;} #main ul{list-style:none;} #main ul li{padding:5px 0px 5px 0px;} #header{height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center;} .biography{background:url("blue.gif") no-repeat left center;} .works{background-image:url(./img/works.gif) no-repeat left center;} .access{background-image:url(./img/access.gif) no-repeat left center;} #footer ul li {padding:10px; display:inline;} #footer ul {text-align:right;} #footer p {text-align:center;} どうぞよろしくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- ＨＴＭＬ、ＣＳＳ
ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>
- ベストアンサー
- HTML
- float+IE8で形が崩れます。
float+IE8で形が崩れます。 Webクリエイターの模試をやっていたら以下の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-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="base.css"> <title>模擬</title> </head> <body> <div class="menu"> <h1>番号</h1> <ul> <li>トップ</li> <li><a href="spring.html">１</a></li> <li><a href="summer.html">２</a></li> <li><a href="autumn.html">３</a></li> <li><a href="winter.html">４</a></li> </ul> </div> <div class="season"> <p>ああああああああああああああああああああああああああああああああああああああああああああ</p> </div> </body> </html> を以下のcssと関連付けるものがあったのですが、 @charset "Shift_JIS"; body{ border:solid 1px #993366; width:800px; } h1{ color:#ffffff; background-color:#993366; font-size:140%; } h2 { font-size:120%; } ul{ line-height:200%; list-style:square; } .menu{ border-right:solid 1px #993366; width:150px; float:left } .season{ padding:10px; width:620px; } IE8で見るとまったく形が崩れてしまいます。 何故でしょうか？ これをIE6などで見るときちんとした形になると思うのですが、同じように表示するにはどうしたらよいのでしょうか？ なかなかうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- HTML
- html+cssでHPを組んでますが
言葉ではうまく説明できないので、html+cssコードを下のほうに貼り付けました。 すいませんが、まずはそちらを参考してほしいです。 続いて質問ですが、「ulも#tate」のほうも縦横300pxで指定してるのに、ulのリスト側はなぜか幅が大きくなってしまいます。この改善点と説明を教えて頂けないでしょうか。 それと「ilの点」の位置を左ツラに合わせるのはどうやるのでしょうか。 疑問点が解決できず、とても困ってます。 *************html+css****************** <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- ul { background-color: #C0F; height: 300px; width: 300px; } #tate { height: 300px; width: 300px; background-color: #F9F; } ul li { } --> </style> </head> <body> <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> <div id="tate"> s </div> </body> </html> ********************************************************** よろしくお願いします。
- ベストアンサー
- HTML
- CSS3の記述の一部が反映されない。
職業訓練のグループ課題で、ウェブサイトを造っているのですが、CSS３の記述が反映されない所がありまして、marginやpaddingでやっても無理でした。「．」と「＃」の違いかなとも思ったのですが全然反映されませんでした。 divタグも考えられる並べ方を試したのですが実行されませんでした。 不躾な質問ですがよろしくお願いします。 問題点 HTML <div id="copyright">をmarginを使い真ん中に、fontを白文字の太文字に装飾 結果 copyrightだけ反映されない。 以下ソースコード ○HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="chat noir,シャノワール,神奈川,箱根,生活雑貨,雑貨,木製、布ナプキン,タオル,かご,ほうき,道具,暮らし,ナチュラル,ハンドメイド,ネットショップ,ヘアゴム,黒猫,インテリア"> <meta name="description" content=" chat noirはフランス語で黒猫の意味です。自然素材を使った布ナプキン、ヘアゴム、ポーチなどのハンドメイド雑貨や、暮らしにちょっぴり彩りを添えるシンプルナチュラルな生活雑貨を取り扱っています。"> <title>【chat noir】生活雑貨と自然素材を使ったハンドメイド雑貨のお店</title> <style>/*CSS*/</style> <script>/*JavaScript コード*/</script> <link rel="stylesheet" href="css/cahtnoir.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"></script> <style type="text/css"></style> </head> <body id="body"> <div id="footer"> <div class="inner"> <ul> <li><a href="index.html">TOPへ戻る</a></li> </ul> <div id="copyright">Copyright Chat noir 2013 All Rights Reserved.</div> </div><!--inner--> </div><!--footer--> </body> </html> ○CSS3 @charset"utf-8"; #footer{ width:1060px; padding:0; margin:0; float:left; list-style-type: none; } #footer li{ width:20%; list-style: none; text-align:center; } #footer li a{ width:auto; color:#fff; font-size:18px; font-weight:bold; padding:35px 0 35px; text-decoration:none; display:block; background:url(../img/footer-link01.png) no-repeat; } #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; .copyright{ margin-left:300px; } ※HTML、CSS３の記述はこれ以外にもあります。
- ベストアンサー
- HTML
- CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。 よろしくお願いいたします。 サンプルをIE、Firefoxそれぞれで見ていただけると わかっていただけると思うのですが、Firefox側が 意図した通りのレイアウトになっていません。 サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような 工夫が必要でしょうか。 ぜひご教示くださいますよう、お願いいたします。 以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
お礼
ありがとうございました（＾＾） また何かありましたら、教えて下さいね。
補足
補足をありがとうございます。 自サイトでは、ＭＳ明朝 などの設定はしていませんが、 ＩＥにおいて、ＨＴＭＬとＣＳＳで、最初の文字コード設定が異なっていると、正常にスタイルが効かなくなるのは、この補足回答で挙げて頂いた例と何か関係しているかもしれませんね。 ただ、全く効かなくなるというわけでもなく、効くものもあれば、効かないものもあるといった感じで、その効き具合については謎のままです。 もっとも、そのしくみまで知ることができたら完璧なんでしょうけども、時間もないので、追究はこのくらいにしておきます。 いつか時間のあるときにでも、調べてみたいと思います。