外部CSSが適用されない!効かない理由は?

このQ&Aのポイント
  • dreamweaver8でテーブルとcssを使用してサイトを作成していますが、特定の箇所でcssが効かない問題が発生しています。デザインビューでは正常に表示されているのに、ブラウザで表示するとmenu_page.cssに定義されたスタイルが反映されていません。他のページでは同様の方法でスタイルが適用されているため、おそらく簡単なミスが原因かもしれませんが、解決策を教えていただけると助かります。
  • dreamweaver8を使用してテーブルとcssを組み合わせたサイトを作成中ですが、一部の要素においてcssが適用されていません。問題のある箇所では、menu_page.cssに記述されたスタイルが全く反映されていません。他のページでは同様の方法でスタイルが正しく適用されているため、何かミスがあるのかもしれませんが、具体的な原因と解決策を教えていただけると助かります。
  • dreamweaver8を使用してテーブルとcssを使ってサイトを制作していますが、ある特定の箇所でcssが反映されません。デザインビューで正しく表示されているのに、ブラウザで表示するとmenu_page.cssに記述されたスタイルが適用されていません。他のページでは同様の方法でスタイルが正しく適用されているため、何かミスがあるのかもしれません。解決策をご教示いただければ幸いです。
回答を見る
  • ベストアンサー

適用されているはずの外部cssが適用されない。。

すみませんが教えてください! dreamweaver8でテーブルとcssでサイトをつくっているんですが、 ある一部分だけ全くcssが効きません。 <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="menu_page.css" rel="stylesheet" type="text/css" /> ↑このページで使っているcss   #2f-txt {   margin-top: 20px;   margin-right: 10px;   margin-bottom: 20px;   margin-left: 0px;   }   #2f-txt p {   font-size: 13px;   color: #FFFFFF;   text-align: right;   } ↑menu_page.cssの方に書かれてます。 <table width="390" border="0" cellspacing="0" cellpadding="0"> <tr> <td ><h2></h2></td> </tr> <tr> <td>           <table width="390" id="2f-txt">   <tr>    <td>              <h3><p>ここのテキスト</p></h3>             </td>            </tr>   </table> </td> </tr> </table> ↑id="2f-txt"のテーブル・テキスト等にかけたい ※見にくくてすみません・・・ dreamweaverのデザインビュー上ではしっかり効いているんですが、 ブラウザで見るとmenu_page.cssに書いてある#2f-txt ・#2f-txt p が全く効いていません。 他のページでも同じような使い方をしている箇所があるんですが、 そこは問題ありません。いろいろと試してはみたんですが、全くだめで、どういうことか全く分かりません。 まだレベルが低いんで、簡単なミスかもしれませんが、 すみませんが、どなたか分かる方いらっしゃいますでしょうか?

  • HTML
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.1

こんにちは idは数字から始めてはいけません アルファベットから始めてください それからこれはそのままの形で使用していますか? 至る所に全角スペースがあるようなのですが・・・ スタイルシートの場合は正しい記述と見なされずスタイルが適応されません(IEは効いてくれるみたいですけど) tableの場合はtable上部に余分なスペースとして吐き出されます(質問文では4行~7行ほど余分なスペースができています) <table>***<tr>***<td></td>***</tr>***</table>(***の部分の全角スペースなど) 字下げするときは『半角スペース』か「Tabキー』になります

emarry
質問者

お礼

すみません、ありがとうございました!! idはアルファベットから!一つ勉強になりました。。

関連するQ&A

  • 適用されているはずの外部cssが適用されない。。

    すみませんが教えてください! dreamweaver8でテーブルとcssでサイトをつくっているんですが、 ある一部分だけ全くcssが効きません。 <link href="../style.css" rel="stylesheet" type="text/css" /> <link href="menu_page.css" rel="stylesheet" type="text/css" /> ↑このページで使っているcss   #2f-txt {   margin-top: 20px;   margin-right: 10px;   margin-bottom: 20px;   margin-left: 0px;   }   #2f-txt p {   font-size: 13px;   color: #FFFFFF;   text-align: right;   } ↑menu_page.cssの方に書かれてます。 <table width="390" border="0" cellspacing="0" cellpadding="0"> <tr> <td ><h2></h2></td> </tr> <tr> <td>           <table width="390" id="2f-txt">   <tr>    <td>              <h3><p>ここのテキスト</p></h3>             </td>            </tr>   </table> </td> </tr> </table> ↑id="2f-txt"のテーブル・テキスト等にかけたい ※見にくくてすみません・・・ dreamweaverのデザインビュー上ではしっかり効いているんですが、 ブラウザで見るとmenu_page.cssに書いてある#2f-txt ・#2f-txt p が全く効いていません。 他のページでも同じような使い方をしている箇所があるんですが、 そこは問題ありません。いろいろと試してはみたんですが、全くだめで、どういうことか全く分かりません。 まだレベルが低いんで、簡単なミスかもしれませんが、 すみませんが、どなたか分かる方いらっしゃいますでしょうか?

    • ベストアンサー
    • CSS
  • 【CSS】floatで左右に並べた<div>のマージンが効かない。

    CSS(スタイルシート)においてfloatで2つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A">   <div class="B">    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div>   <div class="C" >    <h3>テキスト</h3>    <p>タイトル</p>    <table>     <tr>      <th scope="col">テキスト</th>      <td>テキスト </td>     </tr>     <tr>      <th scope="col">テキスト</th>      <td>テキスト</td>     </tr>    </table>   </div> </div> 【CSS】--------------------------------- #A {     margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }

    • ベストアンサー
    • HTML
  • cssで、1行2段のtableを記述するには?

    cssで、1行2段のtableを記述するには? → htmlのページに以下を挿入しました。 <table> <tr> <td width="2"></td> <td width="588"></td> </tr> </table> → htmlのページの<head>と</head>の間に以下を挿入しました。 <link rel="stylesheet" type="text/css" href="table.css"> → table.cssファイルを、onimotsuさんの指示に従い、以下のように記述しました。 TABLE{width : 640px;border-width : 0px 0px 0px 0px; padding-top : 0px;padding-left : 0px;padding-right : 0px; padding-bottom : 0px; background-color : #FFFFFF;} → table.cssファイルに以下を挿入するにはどうしたらいいのでしょうか? いろいろ試しましたが、うまくいきません。 <tr> <td width="2"></td> <td width="588"></td> </tr> → うまく挿入できれば、htmlのページのtableの項は次のようにすっきりとなります。 <table> </table> よろしくおねがいします。

  • css(div)の中にtableタグを使うとなぜかcellpaddingがきかない

    cssのdivの中にtableタグを入れ子にして作成していますが、中側tableのcellpaddingを5に指定しているにもかかわらず余白があきません。 過去ログにCSSの設計思想からすると、DIVの中にTABLE要素を組み込むことは論理矛盾であると書かれていましたが、複雑な表になってくると知識がないため、テーブルを使っているのが現状です。 なぜ余白があかないのでしょうか?また対応する方法はあれば教えていただきたいです。よろしくお願いします。 <div id="fee_table"> <table width="460" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#C4D6A7"><table width="460" border="0" cellspacing="1" cellpadding="5"> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> <tr> <td bgcolor="#FFFFCC">テキスト</td> <td valign="top" bgcolor="#FFFFFF">テキスト</td> </tr> </table></td> </tr> </table> </div> ■---css---------------------------------------■ #fee_table { font-size: 95%; margin : 10px 0 10px 15px; }

  • css

    <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="a.gif" width="100" height="100" border="0" /></td> <td > <div class="ab">left</div> <p>説明文 </p> </td> </tr> </table> </td> <td width="20"></td> <td> <table width="300" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="110"><img src="b.gif" width="100" height="100" border="0" /></td> <td> <div class="ab">right</div> <p>説明文 説明文 </p> </td> </tr> </table> </td> </tr> </table> .ab { border-bottom:1px solid #E3E3E3; padding-left:5px; margin: 0px 0px 10px 0px; テーブル内の文字数が変わると片方が上から下に下がってきます。両方上に揃えるには どうすればいいんでしょうか。よろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSで左に画像、右にテキストを並べたい。

    CSSで左に画像を置いて右にテキストを同じ列で並べたいのです。 (●=画像 ▲=テキスト) 現在の表示は ●▲ となっているのですが、これを ●     ▲ と表示して画像は左端、テキストは右端にしたいのです。<td>で区切ればできると思うのですが、これをCSSだけで何とかできないでしょうか? 色々試したのですが、どうしても下のように改行してしまいます。 ●       ▲ ソースは以下です。 <table border="0" cellpadding="0" cellspacing="0" width="750" > <tr> <td colspan="2" id="head"><img src="img/777.gif" border="0">おはよう</td> </tr> </table> 外部CSS #head{background-color:#009900 width:750px; height:60px; margin-right:5px} どなたか宜しくお願い致します。

    • ベストアンサー
    • HTML
  • CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか?

    CSSだけで<table>の<td>や<tr>要素を並べ替えることができAますでしょうか? 例えば、HTMLで一行に3列になるよう以下の様に記述した時に <table> <tr> <td> <p>テキスト左</p> </td> <td> <p>テキスト中</p> </td> <td> <p>テキスト右</p> </td> </tr> </table> CSSでのそうさのみによって 見栄え的に縦3行、横1列に見えるようにできますでしょうか? 幅などをピクセル制限したりするのでも構いません。 もしHTMLで実現するとするならば <table> <tr> <td> <p>テキスト左</p> </td> </tr> <tr> <td> <p>テキスト中</p> </td> </tr> <tr> <td> <p>テキスト右</p> </td> </tr> </table> 上記のような記述になると思いますが、あくまで最初のHTMLをCSSで変更して、HTML本体は書きかえない方法です。 もし、何らかの形で実現できそうな場合がありましたらアイディアをください。 お忙しいところお手数おかけしますが、よろしくお願いいたします。 ※CSS記述の変更のみ。 ※特定のブラウザに依存させたくない。 ※Javasprictは使用しない。

  • 入れ子にしたテーブルの罫線について

    htmlとcssを学習し始めた者です。 下記のような表を作りましたが 罫線が2重になってしまいます。 この罫線をダブらないようにしたいのです。 一番左の列で言えば、外枠を残し、100の上、左、右 を消し、200の左右を消し、300の左、右、下を消し 一本の線で書かれた表にしたいと考えています。 ご教示くださるようお願いいたします。 <LINK href="style.css" type="text/css" rel="stylesheet"> <table> <tr> <td> <table> <tr><td>100</td></tr> <tr><td>200</td></tr> <tr><td>300</td></tr> </table> </td> <td> <table> <tr><td>101</td></tr> <tr><td>201</td></tr> <tr><td>301</td></tr> <tr><td>401</td></tr> <tr><td>501</td></tr> </table> </td> <td>12345<br>67890 </td> <td> <table> <tr><td>102</td></tr> <tr><td>202</td></tr> <tr><td>302</td></tr> <tr><td>402</td></tr> </table> </td> </tr> </table> style.css table{ border-collapse: collapse; border: 1px solid #000000; line-height:130%; margin:auto; border-spacing:0; } td{ border: 1px solid #000000; padding:5px;}

    • ベストアンサー
    • HTML
  • 外部CSSを使ったテーブルが作りたいのですが・・・。

    以前こちらで質問させて頂いて、「スタイル作りはCSSで」、と教えて頂き、CSSの勉強を始めました。 早速壁に当たっていまして、お知恵を拝借したいです。 外部CSSファイルに、ul.gaibu{color:ff0000}と記すと、 HTMLファイルに<ul class="gaibu">ここは赤で表示</ul> となる事は出来たのですが、 テーブルの場合、 外部CSSファイルにdiv#table{設定値}を記し、 HTMLに<div id=table>とすると、外部CSSの設定値が反映されましたが、 <tr>や<td>の内容をどう設定して、HTMLにどう記載すれば反映するかが分かりません。 因みに外部CSSに tr.table1 {border:1px #333333 solid; line-height:25px; padding-left:10px; paddting-right:10px; text-align:left; vertical-align:middle} と記載し、HTMLの方に <tr><td class="table1">表1</td><tr>としましたが、 CSSの内容は反映されていません。 宜しくお願い致します。

  • リンク先から戻ったら、表示がおかしい。

    未完成品です。 サイトの各ページからメインページに戻ると、文字の色が変わったり、 大きさが変わります。 どこに不具合があるか、初心者なのでよくわかりません。 いじりすぎて、構成もめちゃくちゃだと思いますが、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>ゲームのすべて</title> </head> <!--全体の背景--> <body bgcolor="#696969" text="#FFFFFF" link="#0000FF" alink="#DC143C" vlink="#8B008B"> <title>デザイン</title> <style type="text/css"> <!-- body { line-height:150%; font-size: 12px; color: #222222; margin:10px 0px; } .menu_c { font-size:12px; color:#cccccc; } .menu_c a { color:#ffffff; text-decoration: none; } .menu td { padding:2px 8px; } .side { background:#D3D3D3; margin:0px 0px 10px 0px; padding:5px 8px; border-left: #80838F 1px solid; border-right: #80838F 1px solid; border-bottom: #80838F 1px solid; } h3 { color:#ffffff; font-size:12px; margin:0px; padding:2px 12px; background:#808080; } h4 { color:#ffffff; font-size:12px; margin:0px 0px 0px 8px; padding:2px 12px; background:#808080; } .comb { margin:0px 1px 10px 8px; padding:5px 10px 5px 4px; background:#D3D3D3; } --> </style> </head> <!-- ページの全体幅テーブルタグ --> <table width="780" align="center"> <tr><td> <!--一番上のところ--> <table width="100%" > <tr> <td width="18%"><img src="logo.gif" width="132" height="40"></td> <td width="82%" align="right"><a href="index">ホーム</a> <hr noshade size=1></td></tr> </table> <br> <table width="100%" border="0" cellspacing="0" bgcolor="#DCDCDC" class="menu"> <tr><td width="72%">ああああああああああああああ</td> <td width="28%" align="right">デザイン</td></tr> </table> <table width="100%" border="0" cellspacing="0" class="menu"> <tr><td bgcolor="#808080" class="menu_c"><a href="#">ホーム</a> | <a href="#">おもなゲーム</a> | <a href="#">ソフト</a> | <a href="#">作られる過程</a> </td></tr> <tr><td><a href="#">ホーム</a> &gt; ページナビ</td></tr></table> <!--左サイドメニュー--> <table width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-bottom: #B6B6B6 1px solid;"> <tr><td width="25%" height="70" valign="top" bgcolor="#696969"> <h3>おもなゲーム</h3> <div class="side"> ・<a href="page1.html#1">PS3</a><br> ・<a href="page1.html#2">PSP</a><br> ・<a href="page1.html#3">PSP go</a><br> ・<a href="page1.html#4">Xbox360</a><br> ・<a href="page1.html#5">Wii</a><br> </div> <h3>ソフト</h3> <div class="side"> <br> </div> <h3>おもなゲーム</h3> <div class="side"> ・<br> ・<br> ・<br> ・<br> </div> <h3>プログラマー</h3> <div class="side"> </div> <!--左サイドメニュー 終--> <!--右サイドメニュー 始--> <br></td> <td width="75%" valign="top"> <h4>自己紹介</h4> <div class=comb>ああああああああああああああああああああああああああああああああ<br> aaaaaaaa<br> aaaa </div> </td></tr></table> </td></tr></table> <table width="100%" > <tr><td align="center"><a href="index.html">ホーム</a> | <a href="page1.html">おもなゲーム</a> | <a href="page2.html">ソフト</a> | <a href="page3.html">作られる過程</a> | <a href="page4.html">プログラマー</a></td></tr> <tr><td align="center">Copyright &copy; Your site. All Rights Reserved. </td></tr> </table> </html>