Q&A
幅広い視野でのご回答、深く感謝申し上げます。
Chromeのインスペクタでコードを試し書きすると、反映されました！
ただ、ローカル環境でのブラウザには反映されないのです。
何でしょうか、この摩訶不思議な動き・・・。
ありがとうございました。
お世話になります。
CakePHPで文章を追加しており、行間を空ける設定をcssでしましたが、cssの内容が反映されないです。
advice contracts_detail_historyというクラスを指定しています。
advice というクラスは他に使っているので、そのクラスの内容が反映されてしまいます。
こういう場合、入れ子という構造にするのかも考えてみて、
contracts_detail_historyというクラスをそれぞれ２つのファイルで記述してみましたが、
それでも反映されません。
【text.ctp】
<div class="box center"> <h1><?php echo h($campaign['Campaign']['title']); ?> 詳細nの表示</h1> -- 略 -- <?php if (!array_key_exists('status', $this->request->query)) : ?> <p class="advice contracts_detail_history">※テキストテキスト。</p>【style.css】
html,
body{
height: 100%;
}
body {
background-color : #fff;
color : #000;
font-size : 14px;
font-family : "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "メイリオ";
margin : 0;
}
-- 略 --
/*** テキストテキストのスタイル ***/
.advice contracts_detail_history {
line-height : 45px;
}
書き方について、お詳しい方、ご意見頂けませんでしょうか
よろしくお願いします。
回答3件
0
半角スペースでclass属性を区切ると二つのクラスを持つのはご存じのことと思います。
CSSではhoge1クラスとhoge2クラスの両方を持つ要素にスタイルを当てる場合、セレクタを
lang
1.hoge1.hoge2 {}
と記述します。
後はお分かりかと思います。
投稿2015/04/29 08:12
総合スコア870
0
cssに書き込む順番でクラスの優先が変わります。
たとえばこんな感じでしょうか。ヒントになればいいですが。
lang
1<html> 2 <head> 3 <style> 4 .abc { line-height: 10px;border:solid 1px #F00; } 5 .def { line-height: 20px;border:solid 1px #0F0; } 6 .ghi { line-height: 10px;border:solid 1px #00F; } 7 </style> 8 </head> 9 <body> 10 <p class="abc">Hello,<br/> wolrd</p> 11 <p class="def">Hello,<br/> wolrd</p> 12 <p class="abc def">Hello,<br/> wolrd</p> 13 <p class="def abc">Hello,<br/> wolrd</p> 14 <p class="def ghi">Hello,<br/> wolrd</p> 15 <p class="ghi def">Hello,<br/> wolrd</p> 16 </body> 17</html>
投稿2015/04/29 10:22
総合スコア17
0
ベストアンサー
ご質問の内容を見る限りでは間違っていないように見受けられます。
一度以下のように書き換えて試してみてはいかがでしょうか。
lang
1.contracts_detail_history { 2 line-height : 85px !important; 3}
これでも有効にならない場合、
他にline-heightを設定されている個所はありませんか？
CSSは基本的に書き順が下にあるものが有効になります。
例外として
important > id > class > tag
という優先順位が存在するので、もし関連するIDにline-heightが書かれていたら
そちらが有効になります。
こういったケースではChromeなどのインスペクタ（F12）を使用することをお奨めします。
インスペクタで対象のタグを選択すると
適用されているスタイルが確認できるはずです。
.contracts_detail_historyの個所に書かれたline-heightに
打消し線が入っていたり、そもそもline―heightのプロパティが書かれていないのだとしたら
書き方や書き順などが間違っているということです。
投稿2015/04/29 09:28
総合スコア94
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/04/29 08:33
2015/04/29 09:17
2015/04/29 10:33