PHPでHPを書く際のCSSが適応されなくて困っています！

解決済

質問者：yuppiiiiii
質問日時：2021/08/13 17:14
回答数：5件

PHP でHP作成の勉強をしているのですが、色々なサイトを調べながらCSSを書き、headerに読み込ませているのですが、一番左上のプレビューの通り、
赤色の文字が赤にならなかったり、ナビのカ中点や下線の無効化などがそのままで、
全く反映されていません。
何か原因や根本的にここが違う等、お知恵をいただきたく、よろしくお願いします。

申し訳ありません、先ほどheaderの記述内容を記載したコメントをしたのですが、文字化けしてしまいましたので、こちらで書かせていただきます。

補足日時：2021/08/14 15:38
通報する
<!doctype html>
<head>
<meta charset="UTF-8">
<title>ポートフォリオ</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="profile" href="https://gmpg.org/xfn/11" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2 …
<script src="scroll_motion.js" type="text/javascript"></script>
</head>

補足日時：2021/08/14 15:38
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

No.5ベストアンサー

回答者： wanderer1
回答日時：2021/08/14 18:49

あ、追記です。

WordPressでのCSSのファイル名は「style.css」が基本ですので、そちらも変更してください。

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます！ご指摘いただいた通り、
<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">
で反映されました！諦めかけていたので、本当に嬉しいです！！
ありがとうございます！
ベストアンサーに選ばせていただきます！

通報する

お礼日時：2021/08/15 15:11

No.4

回答者： wanderer1
回答日時：2021/08/14 18:47

あ、WordPressですか。

通常の運用では、CSSの読み込みはテーマファイルのフォルダを作って、その中に入れて使います。

そうなってますか？

仮に今使われているテーマディレクトリ直下にCSSが入っているとして。
（下記のようにテンプレートとCSSが同階層にあると想定）

index.php
header.php
mystyle.css

という感じでファイルが並びますよね。

ここで「WordPressから見たCSSの入ってるディレクトリ」を指定してやらないとダメなので

<link rel="stylesheet" type="text/css" href="mystyle.css">

ではなく

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/mystyle.css">

と書いてやるとうまくいくと思いますがどうでしょうか？

- 0
- 件

通報する

No.3

回答者： fujillin
回答日時：2021/08/14 16:02

No1です

補足を見ましたが
＞<link rel="stylesheet" type="text/css" href="mystyle.css">
の部分が反映されないということでしょうか？

一旦ブラウザで表示してみて、「開発ツール」（←大抵F12で表示できます）で当該要素を選択して右クリックででるメニューから「Open in new Tab」（←Chromeの場合）を選択すると、CSSの内容が別タブに表示されます。（ブラウザによって操作が違いますが同様のことはできるはず）
これで、内容を読めているかを確認できます。
読めていないようであるなら、URL等がおかしいということになります。

＞全く反映されていません。
とのことですので、上記の可能性が高いとは思いますけれど・・・

「読めていて、かつ、反映されない」ようである場合は、記述の内容が問題になりそうです。
解釈できない文字（例えば全角空白など）が混ざっていると、解釈されないなど。
部分的に適用されないのなら、別の設定で（知らないうちに）上書きしているなども考えられますが、「全部」とのことなので、おかしな文字コードになっているとか・・・？
記述方法が、はなから間違っているとか・・・？

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます！開発ツールから確認するという方法を初めて知りました！ありがとうございます。

通報する

お礼日時：2021/08/15 15:13

No.2

回答者： wanderer1
回答日時：2021/08/13 17:35

cssファイルの拡張子は.cssですが。

………「.php」になっていませんか？

htmlファイルの5行目ですよね、cssのリンク指定は。

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます。
元々は.cssで記入していたのですが、できなかったので、.phpに変更していました。念のため、.cssで書き直したのですが、反映されないままでした。もし他にも思い当たる節がありましたら、ご教示いただけないでしょうか？

通報する

お礼日時：2021/08/14 15:31

参考程度に

No.1

回答者： fujillin
回答日時：2021/08/13 17:20

こんにちは

添付図は全く読めないので、事象だけからの回答ですけれど・・・

CSSを読み込むのに、link要素で行っているのではないかと推測しますが、参照先に目的のCSSファイルはちゃんと存在していますか？
（HTMLの文法が間違っているか、参照先が間違っているかの可能性が大ではないかと想像します）

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます。HPはwordpressで作成しており、WP File Managerというものでファイル管理しているのですが、CSSファイルは他のheader.php、index.phpと同じフォルダ内に管理しています。
もし他に思い当たる事象がありましたら、ご教示いただけないでしょうか？
headerの記述内容は現在は下記の通りになっています。
<!doctype html>
<head>
<meta charset="UTF-8">
<title>ポートフォリオ</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="profile" href="https://gmpg.org/xfn/11" />
<script src="js/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2 …
<script src="scroll_motion.js" type="text/javascript"></script>
</head>
<h1><img src="http://yumaport.wp.xdomain.jp/wp-content/uploads … width="180" height="45" alt=""/>
</h1>
<div>
<nav class="style-nav">
<ul class="menu">
<li><a href="">home</a></li>
<li><a href="">about us</a></li>
</ul>
</nav>
</div>
<?php
echo "<div class=red>";
echo "赤色";
echo "</div>";
?>