PHPのincludeで読み込んだファイルのCSSが適用されない

タイトルの通りです。

テキストや画像はちゃんと表示されるのですが、
なぜかCSSだけ適用されていません。

そういった仕様ではないですよね？

調べても分からなかった為お力添えください。

よろしくお願い致します。

「toppages.php」

<?php
  define('cssinc', 'toppages');
  include('header.php');
?>

<link rel='stylesheet' type='text/css' href='./css/<?php echo cssinc; ?>.css'>

    <section id='about'>
      <h2 class='title'>ABOUT</h2>
      <p class="description">
        内容
      </p>
    </section>
    <script src='https://code.jquery.com/jquery-2.1.3.min.js'></script>
  </body>
</html>

「header.php」

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>タイトル</title>
    <link rel='stylesheet' type='text/css' href='./css/header.css'>
  </head>
  <body>
    <header>
      <section id="main">
        <p>見出し</p>
      </section>
        <div class="collapse navbar-collapse" id="navbarEexample">
          <ul class="nav navbar-nav">
            <li>TOP</li>
            <li>ABOUT</li>
            <li>MENU</li>
            <li>NEWS</li>
            <li>ACCESS</li>
            <li>CONTACT</li>
          </ul>
          <a href='toppages.php'>トップへ</a>
        </div>
      </nav>
    </header>

※実際にはheaderタグ内にはコードがあります。

toppages.phpとheader.phpは同じ階層にあります。

「header.css」

p {
  color: red;
}

「toppages.css」

p {
  color: blue;
}

m.ts10806

2019/01/30 07:53

階層が分かる情報をご提示ください。これだけでは正しく再現確認できません。

kaba

2019/01/30 08:15

href='css/header.css'のパスが間違っているかもしれません。その場合、ブラウザのコンソールにエラーが表示されます

退会済みユーザー

2019/01/30 09:16

おそらくお二方が言っている通りでパス違いが原因かと

stone_yama

2019/01/30 09:22

フォルダ階層の写真を追加しましたのでご確認お願い致します。

stone_yama

2019/01/30 09:39

勘違いしていたのですが、header.cssが適用されていないのではなく、 toppages.cssが優先して適用されているようです。 (toppages.cssの中身を削除してみたらheader.cssが適用されました) ですが問題が解決出来た訳ではないのでもう少しお力添えください。ファイルのパス指定を変更してみましたが変わらずでした…

退会済みユーザー

2019/01/30 09:49

その toppages.css はどこで読み込んでいるのか、質問文に示されていないので、わけがわからない

stone_yama

2019/01/30 09:59

失礼いたしました。 toppages.cssはtoppages.phpにてこのように読み込んでいます。 <link rel='stylesheet' type='text/css' href='css/toppages.css'>

m.ts10806

2019/01/30 10:11

もはやcssの問題ですね。私の回答見てますか？ブラウザで「ソースを表示」した結果を提示してください

行動規範の内容に同意します

回答2件

ベストアンサー

phpは単に文字列を出力しているだけなのでこの場合みるべきはphpではなく
ブラウザに表示されたhtmlコードと「実行しているファイル」とそのhtmlから参照しているファイル(画像やcssなど全て)との位置関係と内容が正しいかです。

cssならそのパスが正しいか、そもそもcss自体の記述が間違ってないか。
こういうものは表示確認のため背景を真っ黒にするとか文字サイズを大きくするとか視認しやすい形でテストコードを入れることです。

相対パスだとファイルごとに変えたり煩雑になりがちなので
DocumentRootからの絶対パスにするよう強くすすめます。

ちなみにcssは!importantが宣言されていない限りは後勝ちです。

投稿2019/01/30 09:07

編集2019/01/30 12:07

m.ts10806

総合スコア80850

stone_yama

2019/01/30 12:20

回答を見落としておりました。申し訳ありません。ページのソースを表示で確認したところそれぞれのcssは問題なく読み込まれているようでした。あれから試行錯誤してみたのですが、現状header.cssで例えばp要素の色を赤に指定した場合、toppages.phpのp要素も赤くなってしまいます。 (ページのソース上ではtoppages.cssを読み込んでいることになっている) 両方のシートでp要素に色をつけた場合はtoppagesが優先されます。やはり記述に問題があるということでしょうか？長々と失礼いたしました。よろしくお願いいたします。