質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.77%

cssの記述 line-height : 45px; が反映されません。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,323

score 24

お世話になります。

CakePHPで文章を追加しており、行間を空ける設定をcssでしましたが、cssの内容が反映されないです。

advice contracts_detail_historyというクラスを指定しています。

advice というクラスは他に使っているので、そのクラスの内容が反映されてしまいます。

こういう場合、入れ子という構造にするのかも考えてみて、
contracts_detail_historyというクラスをそれぞれ2つのファイルで記述してみましたが、
それでも反映されません。

【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;
}


書き方について、お詳しい方、ご意見頂けませんでしょうか
よろしくお願いします。


  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+1

半角スペースでclass属性を区切ると二つのクラスを持つのはご存じのことと思います。
CSSではhoge1クラスとhoge2クラスの両方を持つ要素にスタイルを当てる場合、セレクタを
.hoge1.hoge2 {}
と記述します。
後はお分かりかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/29 17:33

    ご回答ありがとうございます。
    こんな感じでまとめて書いてみましたが、まだ反映されません。
    .advice.contracts_detail_history {
    line-height : 85px;
    font-size : 12px;
    color : #a9a9a9;
    margin : 0;
    }
    もう少し調べてみます。ありがとうございました

    キャンセル

  • 2015/04/29 18:17

    私の回答では解決できなかったようで失礼しました。
    http://jsfiddle.net/htsign/2z50q215/
    私も試してみましたが、この場合はちゃんと反映されているようですね。
    他の箇所でもadviceクラスをご利用とのことですし、他の要因がありそうですね…。
    該当の <p class="advice contracts_detail_history">※テキストテキスト。</p> をデベロッパツールで見て、与えられているスタイルを確認してみるとよいかもしれませんね。

    キャンセル

  • 2015/04/29 19:33

    いえ、色々要因を探って頂きまして本当に感謝です!
    ご享受ありがとうございます!

    キャンセル

checkベストアンサー

0

ご質問の内容を見る限りでは間違っていないように見受けられます。

一度以下のように書き換えて試してみてはいかがでしょうか。

.contracts_detail_history { 
  line-height : 85px !important;
}

これでも有効にならない場合、
他にline-heightを設定されている個所はありませんか?

CSSは基本的に書き順が下にあるものが有効になります。
例外として
important > id > class > tag
という優先順位が存在するので、もし関連するIDにline-heightが書かれていたら
そちらが有効になります。

こういったケースではChromeなどのインスペクタ(F12)を使用することをお奨めします。

インスペクタで対象のタグを選択すると
適用されているスタイルが確認できるはずです。

.contracts_detail_historyの個所に書かれたline-heightに
打消し線が入っていたり、そもそもline―heightのプロパティが書かれていないのだとしたら
書き方や書き順などが間違っているということです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/04/29 19:30

    幅広い視野でのご回答、深く感謝申し上げます。
    Chromeのインスペクタでコードを試し書きすると、反映されました!
    ただ、ローカル環境でのブラウザには反映されないのです。

    何でしょうか、この摩訶不思議な動き・・・。
    ありがとうございました。

    キャンセル

0

cssに書き込む順番でクラスの優先が変わります。
たとえばこんな感じでしょうか。ヒントになればいいですが。

<html>
    <head>
        <style>
        .abc { line-height: 10px;border:solid 1px #F00; }
        .def { line-height: 20px;border:solid 1px #0F0; }
        .ghi { line-height: 10px;border:solid 1px #00F; }
        </style>
    </head>
    <body>
        <p class="abc">Hello,<br/> wolrd</p>
        <p class="def">Hello,<br/> wolrd</p>
        <p class="abc def">Hello,<br/> wolrd</p>
        <p class="def abc">Hello,<br/> wolrd</p>
        <p class="def ghi">Hello,<br/> wolrd</p>
        <p class="ghi def">Hello,<br/> wolrd</p>
    </body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る