• 締切済み

CSSが反映されないのです。。

名言集.com様のようなランダム名言ブログパーツを作りたいです。 http://www.meigensyu.com/tools/blogparts.html 早速ソースを自分用に作り替えてみたのですが、 名言をランダムに書き出してくれることまで上手くいきましたが、 名言集.com様のように綺麗な色やdivタグなどのCSSが反映されず、文字だけが出てきてしまいました。 なぜCSSが反映されないのでしょうか。。 すっごく情報が少ないと思うのですが、教えてgooの質問制限に直接連絡禁止まであるので、どう表現したらいいか判りません。。 自サイト誘導もダメですよね、これ。 不足な情報ですが、ご教授いただければ幸いです。

  • HTML
  • 回答数5
  • ありがとう数0

みんなの回答

回答No.5

>自分用に作り替えて この一文で、お手上げです・・・・・。 何を書き換えたのか??? とりあえず、ご提示のサイトからのコピペそのままでは 問題なく結果が出ますよね? で、そこから「CSSを反映させない」意図的な方法ですら、容易に沢山想像出来てしまい・・・。 とりあえずCSSの記述箇所に #test001{color:#ff0000;} と追記し HTML上に <span id="test001">TEST001</span> とでも追記する事によって まずCSSの記述箇所による問題か絞り込みを行うべきかと・・・。 そもそも <span style="color:#ff0000;">TEST001</span> と記述してCSSが効果なければ、ブラウザの側の問題という事も・・・。 (ブラウザによっては、CSSを無効にできます・・・。) それこそ、CSSは機能しているが他の指定により更に上書きされている可能性も・・・。 質問でソースが提示できていない処から、そもそも絞り込みが出来ていない様子。 手間でも少しずつ想定する結果が出る処から順次望む記述に書き換えて、どこで期待する結果でなくなるか。

  • partita
  • ベストアンサー率29% (125/427)
回答No.4

チェックサイト http://jigsaw.w3.org/css-validator/ あとは、文字コードがおかしいかもしれませんね。

  • Ikonos00
  • ベストアンサー率28% (86/302)
回答No.3

id、classがスペルミスとかで一致していないのかもしれませんね。 ソースを載っけていただけると早いのですが…。

  • crepon133
  • ベストアンサー率51% (399/776)
回答No.2

オリジナルのパーツを挿入して 正常に動くことを確認しているという前提で . ; : } などの抜けや打ち間違いがないか、 オリジナルと比べながら確認してください。

noname#20633
noname#20633
回答No.1

とりあえず、HTMLのヘッダ部分と、CSSのファイル名を書き込めませんか? 自サイト名とか書き換えてで。

関連するQ&A

  • moreタグの中にCSSを反映させるには?/WORDPRESS

    はじめまして、この記事をご覧頂きましてありがとう御座います。 早速ですが、質問をさせて頂きたく思います。 現在、WORDPRESSにてウェブページを制作している最中なのですが、当方、記事をあげる際に<more>のタグをよく使います。 そこで問題なのですが、<more>タグを使っている記事自体には、CSSを指定しているのですが、何故か<more>タグを使用した以降の記事(同記事内)にはCSSが反映されないという現象が起きてしまい、困っております。 説明が下手で大変申し訳御座いませんが、この現象の解決方法などを知っている方が居られましたらアドバイスを頂けますと幸いです。 下記、問題部分のcssタグを表記させて頂きます。 *** 【CSSを反映しているタグ/index】 <div class="storycontent"> <?php the_content(__('(more...)')); ?> </div> 【CSS】 .storycontent { line-height: 130%; padding-top: 1px; margin-right: 5px; width: 568px; overflow: auto; } *** どうぞ宜しくお願い致します。

  • CSSが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 CSSを勉強しているのですが、反映されません (本や、サイトのサンプルとおり記述しても、です) (タグ、スペルの間違いがないかは10回以上確かめています) (CSSサイトのサンプルをクリックすると、それは表示されます) ●ヘッダー内に指定すると、反映されない ○例  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント(色、サイズ)で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ (標準)になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●BODY内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○2回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○3回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • CSSが反映されない場合がある

    PHP + CSS + MySQLを独学中の者です。 作成中のHPで、CSSが反映されない事があり、原因究明に苦心しています。 【事象】  作成中のHPにアクセスすると、CSSが反映されない状態で表示(描画)される事がある。 【情報と考察】  ・PHP5.x、CSS、MySQL5のレンタルサーバで作成中。  ・10回に2回程度の割合で事象が発生する。  ・正常に適応されている時は、想定通りのCSSが描画されている為、コード上の問題は低い。  ・CSSは8つの外部ファイルで構成して、htmlの「link」タグで指定している。  ・事象が発生した場合も、生成されたhtml上では「link」タグで指定されている。   (パスも問題なし)  ・複数のブラウザ(IEとFirefox)でも事象は発生する。 以上から、何か原因の可能性として挙げられる事はありますでしょうか。 ご教授・アドバイス頂ければ幸いです。

    • ベストアンサー
    • PHP
  • CSSでのdivタグに付いての質問です。

    現在HTMLを学習し始めたばかりで困惑しております。 HTML内の<body>タグ内に<div>タグを作りidを"main"としました。 具体的には<div id="main">Main</div>と記述しました。 そこからCSSで#main {color: red;} と記述しましたが、文字色の変更が全く反映されない状態です。 他の<p>タグや<h1>タグ、また<body>タグは全て奇麗に反映されるのに<div>だけが全然ダメな状態です。 一体何が原因なのか教えて下さい。 初心者すぎる質問だと思いますが、どうぞよろしくお願い致します。

    • ベストアンサー
    • HTML
  • html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグ

    html/CSSでBOX内にBOXを作り、その両方に異なる<h2>タグを設定したい。 具体的には、 -------------------------------------------- #box1{・・・・・・} #box1 h2{ font-size:14px; border: solid red 1px; width: 800px; } #box2{・・・・・・} #box2 h2{ font-size:10px; border: solid blue 1px; width: 400px; } -------------------------------------------- というCSSがあり、html上ではbox1の中にbox2が入っています。 -------------------------------------------- <div class="box1"> <h2>あああああ</h2> <div class="box2"> <h2>いいいいい</h2> </div> </div> -------------------------------------------- このとき、CSSの「box1のh2タグの設定」がbox2内のh2タグにおいても反映されてしまいます。 box2内では「box2のh2タグの設定」を反映させたいのですが、どうすればできるのか 教えていただけますでしょうか。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • CSSでID等が何もないtableブログパーツを編集したい

    こんにちは。 ブログのパーツをCSSを使って編集したいのですが、 編集したいパーツのTABLEには、IDなどが設定がされていません。 css初心者のため、まだ手探り状態です。 ページの形は、以下のように配置されています。 1.編集できるパーツ(HTML・CSS入力可) 2.編集できないテーブル 3.編集できるパーツ(HTML・CSS入力可) 編集したいのは2.のテーブルでしてHTMLは、 <table width="100%"> <tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr> </table> みたいな感じです。 このテーブルのセルに、padding、borderなどを設定したいのです。 CSSの中に、 td { vertical-align: top; } とすることで上揃えのみは影響なくできましたが、 borderは、その他のセルにも大きな影響を与えてしまうためできません。 他に考えたのですが、divを使って、divに囲まれたテーブルなどを cssで編集するようなことはできませんでしょうか? 1のパーツの最後に <div ####(IDみたいな?)>と開始を入れて、 2のパーツの冒頭で</div>と することで、divで囲まれたテーブルにするような方法は可能ですので、 cssにあらかじめこのdivの情報を入れておけば、 このdiv内のテーブルのレイアウトが変更できるのではないかと考えたのですが・・・・。これって無理な話なのでしょうか? 色々やってみたのですが、cssを勉強し始めて1週間では分かりませんでした。 他にこういうことをすれば編集できる可能性があるなどの情報があれば 教えてください。よろしくお願いします。

    • ベストアンサー
    • CSS
  • スタイルシートがブラウザで反映されない

    dreamweaver8でサイト作成中です。 divタグの中のテキストにリンクを付け、外部CSSで、 .xx a:link{font-size: 14px;} としてあるのですが反映されません。 不思議なのは、リンクURLの一文字を変えると(例えば.comを.corに)反映されるのです。 ちなみにdreamweaver上ではCSSが反映されているのですがブラウザ上だとダメです。 また、同じソースのボックスで違うリンクURLがいくつもあるのですが"所々"やはりブラウザだと反映されていません。 どういう原因が考えられますでしょうか?

  • iframe?をCSSで作成することは可能でしょうか?

    現在ホームページを作成していまして、iframeというのでしょうか? 更新情報などで使われているスクロールできる部分なんですが、ソースを見ると「iframe」などのタグは書かれていなく、divが指定されているのみでした・・・ CSSで作成しているのできればCSSで作成したいと考えているのですが、作成することは可能でしょうか? どうかよろしくお願いいたします。

    • ベストアンサー
    • HTML
  • DWの拡張で、CSSの空を作成するもの

    こんにちは。 私が、HTMLをある程度作ってからCSSを入力していくのですが。 いつもこんな感じになります。 <div id="wraper"> <div class="content"> <div class="content_detail"> </div> </div> </div> こんな感じで適当にHTMLを書いて、 「wraper」という文字をコピーして、CSSにペースト。閉じタグをつける。 ↓こんな感じです。 #wraper{ } ---------------------- いつもいつもコピして、cssでid名やclass名を設定するのが面倒です。 DWの「新規CSSルール」を押しても、何も入力していない場合は、cssに反映されません。 ボタン1つで、HTMLのID、class名がCSSで「作成される」方法はないでしょうか? alt+クリックしても CSS側に設定されないと、表示されませんでした。

  • CSS3の記述の一部が反映されない。

    職業訓練のグループ課題で、ウェブサイトを造っているのですが、CSS3の記述が反映されない所がありまして、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、CSS3の記述はこれ以外にもあります。

    • ベストアンサー
    • HTML