CSSが効かない要因について

前へ 次へ
このQ&Aのポイント
  • CakePHPで一部のCSSが反映されない問題について質問します。
  • ctpファイルで指定したクラスのスタイルが正しく反映されない現象に困っています。
  • Chromeデベロッパーツールではスタイルが反映されるが、ブラウザのプレビュー画面では反映されない問題についてアドバイスをお願いします。
回答を見る
  • ベストアンサー

CSSが効かない要因について

こんにちは。 CakePHPでcssが一部反映されない要因について、ご享受頂きたいです。 ctpファイルでクラスをnoticeとし、line-height :5; を指定していますが、反映されません。 【detail.ctpの記述】 <p class="notice">※注意事項に関するテキスト</p> 【style.cssの記述】 .notice { font-size : 12px; color : #ff0000; margin : 0; line-height: 5; } cssは、app/View/Layouts/default.ctpでcssを読み込んでいて、下記の様な記述です <?php echo $this->Html->css('style'); ?> configファイルも、Configure::write('Asset.timestamp', 'force'); と書いています。 Chromeデベロッパーツールで指定すると反映されます（添付画像）が、プレビュー画面（Safari, FireFox, Chrome等のブラウザ）では反映されません。 CSSの読み込みを妨害している要因について、お知恵をお貸し頂きたく投稿させて頂きました。 どうぞよろしくお願い申しあげます。

画像を拡大する

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

  • ベストアンサー
  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.1

>CSSの読み込みを妨害している なんてことは発生していません。 5pxなのか5kmなのか、単位が無いからわからないというだけではないでしょうか。 単位をつけましょう。

lala200
質問者

お礼

ありがとうございます！ 50px; と書いても読み込めなかったのですが、何度か再起動したり キャッシュのクリアー読み込みを繰り返す事で解消されました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. ITシステム運用・管理
  4. その他（ITシステム運用・管理）

関連するQ&A

  • CSSの反映を解除したいのですが

    うまく伝えられるか微妙なんですが、MTを使ってます。すでにCSSでTABLE全体のスタイル設定がされているのですが、その設定を反映させたくないTABLEがあります。それを実行するにはどのようにしたらよいでしょうか。ちなみに何ができないかというと、エントリー内にTABLEを記述し、tr bgcolorで色指定をしているのですが、反映されません。その原因がCSSモジュールのTABLE部分だと思われるのです。何かタグ指定などでCSSが反映されないような手段はありますでしょうか。

  • 外部CSSが反映されるHTMLとされないHTML

    レンタルサーバのファイルマネージャを使ってサイトを作っています。 外部CSSで文字のフォントをＭＳ Ｐゴシックに統一したいのですが、反映されるページとされないページができました。 CSSには、 @charset "Shift_JIS"; p { font-family: "ＭＳ Ｐゴシック",sans-serif; } 読み込みには、 <link href="./style.css" rel="stylesheet" type="text/css"> と記述しました。 反映されたのはサイト２ページ目の２分割フレームの片側だけで、その他のページはブラウザで指定したフォントのままCSSが反映しません。 HTML、CSS共に文字コードはShift_JISで統一していて、それぞれ<head></head>間の同じ位置に記述してあります。 反映されたHTML内にはボックスの幅指定でCSSを使っていますが、その他のページにはCSSを使っていません。違いはこれだと思うのですが、それがきっかけで反映されたりされなかったりと変わるものなのでしょうか？ HTML、CSS共に初心者です。この質問が初歩的なことなのか難しいことなのかもわかりません。 よろしくお願いします。

  • cssでのレイアウトの仕方

    次の2ファイルを作成しました。 ---index.html <html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <div class="notice"> <dl> <dt>タイトル</dt> <dd class="noticeDesc"><p>→一覧</p></dd><br /> <dd class="noticeBox"> <ul> <li>リスト１</li> <li>リスト２</li> </ul> </dd> </dl> </div> </body> </html> ---index.htmlここまで ---style.css @charset "utf-8"; .notice { width: 210px; background-color: #ffff00; border-bottom-style: solid; height: 80px; } .notice dl { background-color: #00ffff; border-top-style: solid; } .notice dt { padding-top: 3px; padding-right: 5px; padding-bottom: 2px; padding-left: 5px; border-right-style: solid; border-left-style: solid; border-bottom-style: solid; } .notice .noticeBox { margin: 0px; padding: 0px; background-color: #00ffff; border-bottom-style: solid; } .notice .noticeDesc p { width: 60px; position: absolute; top: 3px; right: 5px; line-height: 1; } .notice dd { border-right-style: solid; border-left-style: solid; float: left; width: 204px; margin: 0px; padding: 0px; } ---style.cssここまで ここの掲示板は画像をUPしてもかなり劣化されてしまうのでどれだけ見えるかわかりませんが実際に表示したイメージも添付しました。 これで希望と違うところが2点あります。 ●「→一覧」というのは「タイトル」と同じ箱の中に右詰めで表示したい ●「タイトル」の箱の周りの枠と下の「リスト」が入った箱の隙間は開けたくない 何通りかのやり方があるんだとは思いますが、style.cssの方を修正する方法でどこをどう調整すればよいのか教えてください。 よろしくお願い致します。

    • ベストアンサー
    • CSS
  • 外部CSSの一部が反映されません。

    ホームページビルダーとメモ帳でサイトを作っています。 外部スタイルシートを指定したのですが、一部分だけ反映されません。 反映されないのは下二行のテーブルへのclass指定です。 CSSは以下になります。 * { margin : 0 ; padding : 0 ; } body{ width :100% ;} body,table {font:normal 13px;} table {margin : 0 ; padding : 0 ;} #my_body { margin: 0 auto; width : 700px ; } #my_navigation { float : left ; width : 150px;} #my_contents { float : left ; width : 550px ;} #my_header { width : 100% ; height : 97px;} #my_footer { width : 100% ; clear : both;} /*リンク*/ A:HOVER{color : #006500;text-decoration : none;} A{color : #00a600;text-decoration : none;} /*指定テーブル内*/ table.a01{width:150;background-color:#cccccc;} html内には <TABLE class="a01"> のように記述しています。 試しにCSSの下一行以外の全ての記述を削除してみても反映されません。 tableでなく、tdで指定してみても反映されません。 ビルダーのページ指定画面では反映されるのですが、プレビュー画面や アップロード後のIE7やFierfoxで見ると反映されていません。 同じ記述をhtml内に<style type="text/css">で指定すると反映されます。 CSSに詳しい方いらっしゃいましたら、どうかよろしくお願い致します。

  • JqueryでCSSの設定値を変更する

    こんにちは。 JqueryもしくはjavascriptでCSSの操作を行いたいのですが、 CSSの設定値そのものを変更させ、保持することは出来るのでしょうか。 例えば、以下のようなCSS設定があり、 p.class-abc{ line-height : 120%; } 描画されている<p class = "class-abc">***</p>に対して、 $('p.class-abc').css({'line-height' : '200%'});とすると、 firebugsで見る限り、 描画されている<p>に対してstyle属性を付与し、line-heightの値を上書きしているように見えます。 私がやりたいのは、 「.class-abc」をあるイベントで「line-height : 200%」に変更して保持し、（これを(1)とします。） その後、あるイベントに連動して、例えば$('p.#zyx').addClass('.class-abc');とした時に、 line-height : 200%である.class-abcを付与したいということなんですが・・・。 この質問を書いていて思ったのですが、 ”クラス”というのは、あくまでセレクタであり、スタイルシートで設定する p.class-abc{ line-height : 120%; } のような記述は、何らかのオブジェクトとしてブラウザに保持されるものでは無いということでしょうか。 雑多な質問になってしまいましたがご教授頂けますと幸いです。 宜しくお願い申し上げます。

    • ベストアンサー
    • CSS
  • ＣＳＳで、わからないところがあります

    ＣＳＳを独学で勉強していますがあるところでソースをもらったのですがこういうのがありました。 ＣＳＳのはフォルダを作っています。 default.css　import.css　style.css の3つです。 内容は下に書いています。 default.cssには @charset "UTF-8"; body { margin: 0; padding: 0; background-color:#FFFFFF; text-align:left; } import.cssには @charset "UTF-8"; /* CSS Document */ @import "default.css"; @import "style.css"; style.css これは他のＣＳＳと同じように沢山書いています。 @charset "UTF-8"; /* CSS Document */ * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } 以下続く 質問1 なぜ3つも必要のなのでしょうか？style.css1つにまとめてもいいのではないでしょうか？ 質問2 style.cssの * { font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック'; font-size: 14px; line-height: 1.6em; } これはアスタリスク*に対して指定しているのでしょうか？ 質問3 ＨＴＭＬ側にはShift_JISとなっていますが、ＣＳＳは@charset "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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> 質問4 <div id="header" style="background-image:url(img/header.jpg);"> <div id="a"> <div id="b"> <h1 id="a">猫の気持ち</h1> <div id="c"> <span class="blue big3 b">猫の気持ち</span> </div> というソースがありました。 <span class="blue big3 b">猫の気持ち</span> の中の、blue big3 bというの指定が見当たりません。 blue big3 b という各自の指定はＣＳＳでされています。 3つを合わせて指定することができるのでしょうか？ それともこれってタグですか？ <span class="">って、 色、サイズ、太さをこのように指定するとこのようになるのでしょうか？ 確かに色は青で太字でしたbig3は不明ですが・・・ 初心者並の質問ですみません。 よろしくお願いします。 ＣＳＳの簡単なサイトを見てもやはりよく分からないのです。

    • ベストアンサー
    • HTML
  • cssが長くなってしまう。他に良い方法は？

    サイトのレイアウトをCSSで行なっているのですが、例えばノーマルなテキストの色・スタイル、リンクの色などの設定がぺージ（コンテンツ）ごとに違います。なので「pタグ内のスタイルはこれ」と絶対的に定めることが出来ません。 全ページでテンプレートを使用していて、それが既に外部CSSを1つ呼び出しています。コンテンツごとにCSSを用意するのがスマートに思えますが、そうすると外部CSSを複数指定することになります。どこかでこの方法は推奨されないと聞いたんですが、本当ですか？ もしそうである場合、その1つのCSSに全ページ分のスタイルを記述することになりますが、それもまたCSSのソースがバカでかくなってしまいます。 これはどうするべきでしょうか？

  • cssでｈｔｍｌ｛width:100%;｝の意味がわかりません

    いつもお世話になっております。 早速質問です。 あるサイトのCSSを拝見すると、以下の様な記述がありました。 html{ width : 100% ; height : 100% ; } body{ width : 100% ; height : 100% ; } BOXに幅や高さを指定する記述はよく見かけますが、htmlやbodyに幅や高さを100%と指定する理由がわかりません。 上記のCSSの意味を教えてください。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTML、CSSに関して

    HTMLの初心者です。いくつかご質問させていただきます。 ①段落と段落の間に行間を空けたい場合、必ずCSSを使わなければなりませんか？行間を空けたい場合、HTMLの本文中で段落と段落の間に行間を空けて記述するのは間違っていますか？例えば以下のような例文です。 〈p〉ここでは私が旅先で撮影した写真を掲載しています。日本列島津々浦々、特に温泉巡り、行く先々の海の幸、山の幸には目がありません。〈/p〉 〈p〉それでは当サイトをお楽しみください。〈/p〉 このようなHTMLでもブラウザ表示は行間が空いて表示されると思うのですが。 ②CSSの書式として以下のような書式があります。 p{font-size: 1.3em;} このpというのは何ですか？CSSの書式を記述するときに使うものということで深く考える必要はありませんか？また字間についてですが、:と1.3emの間に半角スペースを必ず入れるということは知っていますが（手持ちのホームページ作成入門本にそう書いてあります）、pと{の間にスペースを入れる必要はありませんか？ ③行間を調整するCSSを記述した以下のファイルを例文として記載します。上記の手持ちのホームページ作成入門本から抜粋しています。 〈html〉 〈head〉 〈title〉序文に変えて〈/title〉 〈style type="text/css"〉 p{line-height 150%;} 〈/style〉 〈/head〉 〈body〉 〈h1〉序文に変えて〈/h1〉 〈p〉ようこそ、このサイトではラーメンマニアの私が食べ歩いたラーメンを写真付きで紹介しています。 〈/body〉 〈/html〉 この150%という値ですとファイルをブラウザにドロップしたとき〈p〉タグの内容の行間が少し広くなります（と入門本に記載があります）。普通に本文の文字の大きさで1行分空けたい時はどうすればいいですか？つまり現在知恵袋で記載しているような1行分です。150%ではなく1emと記述すればいいですか？また、このCSS書式のp{line-height 150%;}ではline-heightと150%の間に質問②で記載したCSS書式のような:がありません。設定名と値の間は:で区切っても半角スペースでもどちらでもいいのですか？ 宜しくお願いします。( ｀・∀・´)

  • cssでfont-styleだけ反映されない

    chromeで確認しながらCSSを作成しているのですが、 font-styleだけ反映されません。 他のfont-weightやtext-decoration等は値を変更すると反映されるのですが、 font-styleだけ何も表示が変わりません。 ちなみに、IEで確認した所、italic等に設定していると反映されていることが 確認出来たのですが、chromeでは何も反応しません。 ネットで調べてみてキャッシュの削除等もやってみたのですがうまくいきませんでした。 どうすれば反映されるかどなたか教えて頂けますでしょうか。

    • 締切済み
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する