• ベストアンサー

外部スタイルシートが読み込めない

こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。

  • rheda
  • お礼率69% (257/372)
  • HTML
  • 回答数2
  • ありがとう数0

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

  • ベストアンサー
  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

たぶんなにか簡単なミスがつみかさっているのでしょうね。 とりあえずurl欄にcssを直打ちしてソースが表示されることを 確認してみてください。 キャッシュをクリアするためctrl+f5もしてみてください

その他の回答 (1)

noname#100277
noname#100277
回答No.2

ローカルでの挙動は? ファイル名は正しいかの再確認。 ソース上のプロパティの順序入れ替えを実行したらどう成りますか? 等・・・ 確認して見て下さい。

関連するQ&A

  • 外部スタイルシートへの記入方法について

    外部スタイルシートへの記入方法について 下記ボックスを利用したいのですが 外部ファイルにまとめて記載できたらと思いましたがどうも上手くいきません。 どなたか詳しい方にご教授願えないでしょうか、 よろしくお願い致します。 <div class="box_01"> この中にタイトルを記載と 本文を記載する </div> <TABLE width="400"><TR><TD> <DIV style="width : 400px"> <DIV style="border-width : 1px;border-color : #333333 ;border-style : solid"> <DIV style="border-width : 1px;border-color : #FFFFFF #999999 #999999 #FFFFFF;border-style : solid;"> <DIV style="background-color : #D0D0D0;padding : 1px"> <DIV style="padding : 3 3 4 3px;text-align : center">- タイトル -</DIV> <DIV style="border-width : 1px;border-color : #999999 #FFFFFF #FFFFFF #999999;border-style : solid;"> <DIV style="border : 1px #333333 solid;background-color : #FFFFFF;padding : 10px;"> <br><hr> ↓<BR> ↓<BR> <center> ↓<BR> ↓<BR> </center> ↓<BR> ↓<BR> <hr> </DIV> </DIV> </DIV> </DIV> </DIV> </TD></TR></TABLE> くれくれで恐縮ですがどうぞよろしくお願い致します。

    • ベストアンサー
    • CSS
  • タグに直接書き込むスタイルシートを、外部あるいはページ内にわけるには?

    下記テンプレートソースですが、タグに直接書き込むスタイルシートになっています。 このソースを、外部あるいはhead内に設定するには、どういうわけ方をしたらいいですか? いろいろ自分で試したのですが、うまく表示されません宜しくお願いします。 <table><tbody><tr><td> <div style="border:1px solid #ff6699;background:#ffcccc;font-size:13px"><div style="padding:3px" align="center"> * ここにタイトル * </div><div style="border-top:1px solid #ff6699;background:#fff;padding:10px" align="left"> * ここに本文 * </div></div> </td></tr></tbody></table>

    • ベストアンサー
    • HTML
  • Opera(10.10)でのスタイルシートの表示について

    Opera(10.10)でのスタイルシートの表示について  Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body>  <div id="layout">   <div id="box1">    <p>ボーダーのテスト</p>   </div>  </div> </body> ------------------------------------------------------------------ *{   margin : 0px;   padding : 0px; } #layout{   width : 800px;   height : 600px;   padding : 10px;   margin-left : auto;   margin-right : auto;   background-color : #FFF; } #box1{   width : 780px;   height : 580px;   padding : 10px;   border-top : solid 1px #D1D1D1;   border-left : solid 1px #D1D1D1;   border-right : dashed 1px #D1D1D1;   border-bottom : dashed 1px #D1D1D1;   background-color : #FFF; } ------------------------------------------------------------------  このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。  また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。  どちらの問題も、IE6やFirefox(3.5.7)では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 直接書き込むCSSを外部ファイルに設定したい

    CSS初心者です。下記の携帯テンプレートを使ってサイトを作りたいです。 タグに直接書き込むタイプのCSSが多いのですが、 このソースの一部を外部ファイルに設定するには、どういう書き方をしたら良いでしょうか? 【外部に設定したい項目】 ★タイトル下線のMARGIN-RIGHT: 47% ★真ん中の線(画像位置)BACKGROUND-POSITION: 53% ★一番下線のMARGIN-LEFT: 53%; 外部にしたい理由は携帯とパソコンで見た時にそれぞれ線の位置を変えたいと思って いるからです。出来ますでしょうか?CSSに詳しい方、どうかお願いします(>_<) 【全タグ】 <html> <HEAD> <TITLE>TITLE</TITLE> </HEAD> タイトル <H1 style="PADDING-LEFT: 7px; MARGIN: 0px; PADDING-TOP: 10px; BACKGROUND-COLOR: #ffffff"></H1> <DIV style="BACKGROUND-POSITION: 53% 40%; BACKGROUND-IMAGE: url(http://deai.mokuren.ne.jp/up/src/up3891.gif); BACKGROUND-REPEAT: repeat-y"> <DIV style="BORDER-TOP: #000000 1px solid; MARGIN-RIGHT: 47%"> <P style="PADDING-RIGHT: 0px; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 7px"></P></DIV> <DIV style="MARGIN-LEFT: 40%; PADDING-TOP: 17px"> <DIV style="WIDTH: 300px; MARGIN-RIGHT: 20px"> <H2 style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 13px; PADDING-BOTTOM: 2px; MARGIN: 0px 0px 3px; PADDING-TOP: 3px; BACKGROUND-COLOR: #000000"> <font color="#ffffff">コンテンツ</font></H2></font> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">小説2</a></div> <div style="border:solid 1px #000000;margin-bottom:5px; padding:5px;background-color:#ffffff;"><Font Color="#000000"><A Href="">その他</a></div> </DIV></DIV> <DIV style="MARGIN-LEFT: 53%; BORDER-BOTTOM: #000000 1px solid"> <P style="PADDING-RIGHT: 5px; MARGIN: 0px; PADDING-TOP: 17px" align=right></DIV></DIV> <P style="PADDING-RIGHT: 5px; PADDING-LEFT: 0px; PADDING-BOTTOM: 10px; MARGIN: 0px; PADDING-TOP: 5px" align=right> </HTML>

    • 締切済み
    • CSS
  • htmlできれいな画像のような表を作りたいです。

    htmlで添付画像のようなものを作りたいです。 tabelを利用し作りましたが、 セルとセルの間に空白ができてしまい 思い通りのものができませんでした。 このようなものを作る場合何を利用するのが正しいでしょうか? ↓↓↓tableで作った表↓↓↓ <html> <title>サンプル</title> <head> <body> <style type="text/css"> <!-- .a1 { width:500px; border-collapse:separate; border-spacing:0; } th.a2{ width: 200px; text-align: center; padding-top: 40px; padding-bottom: 40px; border-bottom: 1px solid #330; border-top: 1px solid #330; background-color: #330; color: #fff; } td.a3 { width: 300px; padding: 5px; border-bottom: 2px solid #330; border-top: 2px solid #330; } --> </style> </head> <div class="a1"> <table> <tr> <th class="a2">あああああ</th> <td class="a3">ああああああああああああああ</td> </tr> </table> </div> </body> </html>

  • テーブルの上と左に白い線を付けたい

    下記に書いたのHTMLについて質問があります。 説明が下手かもしれませんが、宜しくお願いします。 このHTMLを書いたら外側が黒枠のテーブルっぽいのがが出るんです、 見出し部分の「ここにタイトル」という緑部分の、上と左部分が白色になってる部分があるんですが、これって新規で作る場合はどんな手順で作ればいいのでしょうか? 当方使用しているソフトはDreamweaver8です。 <table><tbody><tr><td> <div style="background:#000;font-size:13px;color:#000;padding:1px"><div style="border-width:1px;border-style:solid;border-color:#fff #80dd99 #80dd99 #fff;background:#90eeaa;text-align:center;padding:3px"> * ここにタイトル * </div><div style="margin-top:1px;border-right:1px solid #dddddd;border-bottom:1px solid #dddddd;background:#fff;padding:8px"> ここに本文 </div></div> </td></tr></tbody></table>

    • ベストアンサー
    • HTML
  • スタイルシートで背景を伸ばしたい

    以下のソースで、文字列のside side...の高さをmain,main...に揃えたいです。 色々試してみたのですが、side の文字のある側の背景が下まで伸びてくれません。 どうしたらよいでしょうか。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style TYPE="text/css"> <!-- body{ font-size: 10pt; text-align: center; } #container { width: 752px; border-left: 1px solid #599E3D; border-right: 1px solid #599E3D; } #main { float: right; width: 570px; background: #FFFFFF; } #side { float: left; width: 180px; background: #E0FFFF; border-right: 1px solid #F2992F; } --> </style> </head> <body> <div id="container"> <div id="main"> main<br> main<br> main<br> main<br> main<br> </div> <div id="side"> side<br> side<br> side<br> </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • ホームページビルダーでスタイルシートを使ったのですが?

    今、ホームページビルダーで簡単な2カラム(右メニュー)のテンプレートを作っています。 質問ですが、メニューバー(サイドバー)に色を付けたくて、画像を使う事にしました。 <div class="main">に画像(background.gif)を入れ属性で繰り返す(垂直方向)にチェックをいれたのですが、IEやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか? よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにh1</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }

  • 左右の高さを揃えたいんですが

    css.divのみでレイアウトする勉強中です。 テーブルのように表示内容によって変化する左右の要素の高さを 揃えるにはどうすればいいのかで悩んでいます。 <html> <head> <style type="text/css"> html{height:100%;} body{height:100%;text-align:center;magin:0;} .head{width:800;background:#f8ffff;border:1px solid #000;} .main{height:100%;width:800;} .left{height:100%;width:20%;float:left;background:#f8f8ff;border:1px solid red;} .right{height:auto;width:75%;float:right;background:#aaaaaa;padding:5px;} .center{height:1500;width:200;background:#00ffff;} .foot{clear: both;background:#444666;color:#fff;} </style> <title>test</title> </head> <body> <div class="head">title</div> <div class="main"> <div class="left"> left <br> <font color=red> ※この要素を右と揃えたい</font> </div> <div class="right"> right <div class="center"> この要素の高さが変わる </div> </div> <div class="foot"> foot </div> </div> </body> </html>

    • ベストアンサー
    • HTML
  • 枠の幅が次のようにすると

    画面いっぱいに広がってしまいます どうしたら文字列サイズにあわせて枠幅が決まるようにできるでしょうか? <html> <head> <style type="text/css"> <!-- .title { background-color:lightyellow; border-color:blue; border-style:solid; border-width:1px; } --> </style> </head> <body> <div class="title"> 芹沢鴨 </div> </body> </html>

    • ベストアンサー
    • HTML