- ベストアンサー
アップするとスタイルシートが反映されない
現在メモ帳で外部CSSの段組レイアウトを制作しています。上下に二つ、その間に縦に分かれたローカルでは問題なく見られるのですが、ネットにアップすると全く反映されず、HTMLのみの状態になってしまい大変困っています。初心者ゆえ全く原因が分かりません。 htmlに問題があるんじゃないかなと思い下にhtmlタグを書き込みました。どこに問題があるか、それとも他の原因か、またどうすれば解決されるのかをご教授願います。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja> <head> <body> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>タイトル</title> <link rel="stylesheet" type="text/css" href="ファイル名.css"> <script type="text/javascript"> <!-- function expand(id) { if (id.style.display == "none") { id.style.display = "";} else {id.style.display = "none";} window.event.cancelBubble = true;} // --> </script> <style type="text/css"> *.grad { width:100%; color: #000099; filter: Alpha(opacity=100,finishopacity=0,style=1); } </style> <div id="wrapper"> <div id="header"> ヘッダーの内容</div> <div id="container"> <div id="main"> メインの内容</div> <div id="menu"> メニューの内容</div> </div> <div id="footer"> フッターの内容</div> </div> </body> </html>
- anago27
- お礼率50% (1/2)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
状況だけでまず考えるのは、スタイルシートが読み込めていない。 ・link文に書いてあるファイル名が間違っている ・スタイルシートファイルがアップされていない。したけど何かのタイミングでファイルが壊れている。 ・スタイルシートファイルのパーミッションが違う。 ・サーバの設定がスタイルシートファイルの読み出しを許可していない。 とりあえず、ブラウザのURL欄に直接スタイルシートのURLを入れてファイルにアクセスできるか確認してみてはどうでしょう。
その他の回答 (1)
ローカルでのテストで反映して、ホストでは反映しないと云うなら・・・ １のホストでのCSS実行が許可されて無い。 コレは考えられませんが、可能性が高いですね。 だとするとホストにUPした時点で自動的に削除される筈です。 （.htaccess不許可のサーバーでは受付同時に削除される場合も在り。） 「外部」では無く「内部」参照では反映しますか？ 又は「直接」記述でも・・・ ファイル名の再確認。 ファイルを「バイナリ」でUPして仕舞った。 等を改めて確認して見ては？
関連するQ&A
- スタイルシートでスクロールは可能ですか？
以下のように、フッターを下部に固定し上部をスクロールするようにしました。スクロールバーは出て(IE6.0)フッターとの重なりは阻止されますが、スクロールバーの操作はできません。 ＜scroll=内容を切り抜く＞ということから当然のことなのでしょうか？ <!DOCUTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Test</TITLE> <STYLE type="text/css"> #left { position:absolute; top: 130px; left: 100px; width: 300px; overflow: scroll; } #main { position:absolute; top: 130px; left: 400px; } #right { position:absolute; top: 130px; left: 700px; } #footer { position:absolute; bottom: 0px; left: 100px; } </STYLE> </HEAD> <BODY> <div id="left"> left<br/> <br/> left<br/> </div> <div id="main"> main </div> <div id="right"> right </div> <div id="footer"> footer </div> </BODY> </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
- DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに 乗り換えようと奮闘中のものです。 外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが 適用されません。 デザインビューでは適用されているのですが、、、 何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
- スタイルシート（CSS）の外部リンク方式を使用したテキストリンクの色変更
お手数ですが、webページ作成に詳しい方は回答お願いします。 webページを作成しております。 スタイルシート（CSS）を外部リンク式でhtml文書に適用して、テキストリンクの色を変更しようとしています。 未訪問リンクは青色、訪問済みリンクはグレー、マウスオーバーリンクは赤色が希望ですが、うまくいきません。 未訪問、訪問済み、マウスオーバー時に関わらず常に赤色です。 ちなみに内部埋め込み式ではうまくいきました。 以下html及びスタイルシート詳細です。 （外部リンク式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <LINK rel="stylesheet" href="css/body.css" type="text/css"> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> </HEAD> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> |<a href="sitemap.html">サイトマップ</a> <br /> </div> （外部リンク式スタイルシート） a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} （埋め込み式html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <a name="jump"></a> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- a:link {color:blue;} a:visited {color:gray;} a:hover {color:red;} body{ color:#666666;} #main { line-height: 150%;} #footer { color:#ffffff; font-size: 100%;} --> <SCRIPT type="text/javascript" src="css/default_css.js"></SCRIPT> <TITLE></TITLE> </style> ～抜粋～ <TABLE width="740" border="0" cellspacing="0" cellpadding="0"> <TR> <TD height="40" align="center" bgcolor="#504040" class="t0"> <div id="footer"> <br /> <a href="home.html">HOME</a> <a href="sitemap.html">サイトマップ</a> <br /> </div> </TD> </TR> </TABLE></TD> よろしくお願いします。
- 締切済み
- HTML
- ＪＳの記述を別ファイルに移す
下記のＨＴＭＬ内の <script type="text/javascript">～</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- スタイルシートで上手く段組が出来ません。
スタイルシートで段組をして、いわゆる擬似フレームのHPを作りたいのですが、いまいち上手く出来ません。 下の画像の赤紫部分(HTML内ではtopsとしている部分)も分割して、全部で5つのフレームに分けたいのですが、そこを分割しようと <!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"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- body { margin:0px; padding:0px; } #top { width:450px; height:200px; float:left; background-color:#cc6600; } #tops { width:300px; height:200px; float:left; background-color:#cc5555; } #left { width:250px; height:600px; clear: both; background-color:#ff9933; } #right { width:500px; height:600px; float:left; background-color:#ffcc66; } #under { width:750px; height:10px; clear: both; background-color:#ff9955; } --> </style> </head> <body> <div id="top"></div> <div id="tops"></div> <div id="left"></div> <div id="right"></div> <div id="under"></div> </body> </html> というタグを打つと、topsの部分はちゃんと回り込んでくれるのですが、画像のように、回り込みを解除したleftの横のrightがちゃんとfloat:left;と打ち込んでいるのにも関わらず、leftの下にいってしまうのです。 どうしたらちゃんと5つに分割出来るのでしょうか？ よろしくお願いしますm(_ _)m
- ベストアンサー
- その他([技術者向] コンピューター)
- CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います 丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。 しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。 また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。 背景を赤に設定しているのですが、それも反映されません。 なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。 どうかよろしくお願いします。 以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */ <!-- * { margin:0; padding:0; } h1, h2, p { margin: 0 1em; } <!--背景の設定--> body { background-color: red; } <!--コンテンツの幅を指定--> #wrapper, #main, #header, #menu, #footer { width:1120px; } <!--角を丸くする--> #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ } <!----> #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!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"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
- IEでスタイルシートがまったく反映されない
WindowsのIEで表示した時、スタイルシートがまったく反映されません。 他のブラウザではちゃんと表示されます。 原因を教えてください。よろしくお願いします。 ちなみにDreamweaver8で作成しています。 -----確認ブラウザ----- IE6.0(Win)：× Safari3.0.3(Win)：○ IEバージョン不明(Mac)：○ Firefoxバージョン不明(Mac)：○ -----ヘッダのソース----- <!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"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style1.css" rel="stylesheet" type="text/css" /> <title>日本語タイトル</title> </head>
- ベストアンサー
- HTML
- Wordpress スタイルシートが反映されない
Wordpress 初心者です。 「Wordpress レッスンブック」という本を見ながら学習中なのですが、サンプルテーマのスタイルシートで設定した内容が全く反映されません。ネットでいろいろ調べたのですが解決方法が見当たりません。 どのような原因が考えられますでしょうか？よろしくおねがいします。 Sample Theme: メインインデックスのテンプレート (index.php) <!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="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" /> </head> <body> <!-- ヘッダー --> <div id="header"> <h1><a href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?></a></h1> <p id="desc"><?php bloginfo('description'); ?></p> <p id="image"><img src="<?php bloginfo('template_url'); ?>/header.jpg" alt="*" width="760" height="200" /></p> </div> </body> </html> Sample Theme: スタイルシート (style.css） /* Theme Name: Sample Theme Theme URI: http://makoto.pcnoah.com/wp/ Dscription: This is my sample theme. */ /* ヘッダー */ div#header h1 {font-size: 1.875em; margin: 0; float: left; margin-bottom: 4px} div#header h1 a {text-decoration: none; color: #000000} div#header p#desc {font-size: 0.75em; color: #444444; margin: 0; float: right; margin-top: 18px} div#header {border-bottom: #a3d2f2; padding-bottom: 10; margin-bottom: 20px}
- ベストアンサー
- ホームページ作成ソフト
- HTMLの文法チェックをするとCSS関連でエラーが出て困っています。
http://validator.w3.org/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html でHTMLの文法チェックをすると， <body><style TYPE="text/css"><!-- という行があるとエラーが出ます。 実際のHTMLは外部スタイルシートを使っているのですが <!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"> <title>タイトル</title> <meta name="Keywords" content="キーワード "> <meta name="Description" content="内容説明"> <link rel="stylesheet" href="./css.css" type="text/css"> </head> <body> <div id="page"> 以下略 であり，<body>タグの後ろは<div>タグなのですが，何故かそう認識されます。 スタイルシートの指定がおかしいのかと考えたのですが， いくら検索しても<head></head>間に <link rel="stylesheet" href="./css.css" type="text/css"> を入れるとしか書いてなく理由がわかりません。 ちなみにcss.cssの内容は *{} というような内容の羅列のみで，その他の情報は一切入れていません。 どこがおかしい点なのかわからず悩んでおります。 理由のわかる方いましたら是非ご教授願います。
- ベストアンサー
- HTML
お礼
お返事が遅くなってしまい申し訳ありません。 お答えの程、ありがとうございました。 ブラウザのURL欄に～…のお言葉が大変ためになりました。そういう調べ方があるのですね！目から鱗でした。 結果としては、「ファイル名.CSS」という名前で制作していたのに、タグを「ファイル名.css」と小文字で指定していたのが原因だったようで、問題なくCSSのファイルを反映させることが出来ました。 ありがとうございました！