PHPにCSSが適用されない

phpにcssが適用されません。

css,phpの記述にも探した範囲では間違いが見つけられませんでした。

phpコード

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="content-type" charset="utf-8">
  <title>お問合せ内容確認</title>
  <link rel="stylesheet" href="assets/CSS/confirmation.css">
 </head>
 <body>
<div class="contact title">
  <h1>contact</h1>
</div>
<p>お仕事のお問い合わせ、ご質問などはこちらまで</p>
</div>
  <form action="assets/php/complete.php" method="post">
   <!--name-->
 <div class="contact-box">
  <label for="name"><strong>name</strong></label>
 <div class="contact-cover">
   <input id="name" type="text" name="name" id="name" required>
 </div>
 </div>
<!--mail-->
 <div class="contact-box">
  <label for="email"><strong>email</strong></label>
 <div class="contact-cover">
   <input id="email" type="email" name="email" id="email" required>
 </div>
 </div>
<!--massage-->
<div class="contact-box">
  <label for="massege"><strong>massage</strong></label>
 <div class="contact-cover">
  <textarea id="text" name="text"  cols="40" rows="8" id="text" required></textarea>
 </div>
 </div>
 <button class="contact-btn" type="button" name="submit" id="sent">send</button>
 <!--footer-->
 <footer>
  <div class="footer-menu">
    <ul class="footer-list">
      <li><a href="#about-section">About</a></li>
      <li><a href="#work-section">Work</a></li>
      <li><a href="#blog-section">Blog</a></li>
      <li><a href="#contact-section">Contact</a></li>
    </ul><hr>
    <p><strong>2021/1 ryoma's Portfolio</strong></p>
  </div>
</footer>
  </form>
 </body>
</html>ヘディングのテキスト
コード

CSSコード

*{
  margin: 0;
  padding: 0;
box-sizing: border-box;
}

/*contact-section*/
.contact-section{
  margin:90px 90px 50px 90px;
  display: block;
}
/*title*/
.title{
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  margin-bottom: 20px;
  font-size: 30px;
  width: 70%;
}
/*contact-form*/
.contact-form{
  margin: 0px 45px;
  text-align: center;
}
.contact-box{
  display: flex;
  justify-content: space-between;
  border-bottom:1px solid black ;
  width: 100%;
  padding: 15px;
}
.contact-cover input,.contact-cover textarea{
  width: 100%;
  border: none;
  padding: 2px;
  font-size: 1.5rem;
}
.contact-cover{
  width: 90%;
}
.contact-btn{
  margin: 30px 0 60px 0;
  padding: 7px 50px;
  font-size: 2rem;
  border-radius: 5px;
  border: none;
  background-color: black;
  color: azure;
  cursor: pointer;
}
/*footer*/
footer{
  background-color: black;
  height: 130px;
  margin-top: 20px;
}
.footer-menu{
  width: 15%;
  margin: auto;
}
.footer-list{
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 10px 0 20px 0;
  font-size: 20px;
}
.footer-list ul{
  margin-top: 300px;
}
.footer-list a,.footer-menu p{
color: white;
text-decoration: none;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin:20px;
text-align: center;
}
.footer-list a:hover{
transition: 0.2s;
color: gray;
}
コード

■フォルダ分け

■表示された画面

yambejp

2021/01/12 00:42

CSSの始まりがいきなり文法ミスに見えますが、コピペミスですか？

hohoso

2021/01/12 00:48

*{ margin: 0; padding: 0; box-sizing: border-box; } すいません、これが正しい始まりです！

yambejp

2021/01/12 00:51

上記、本文を修正して下さい

maisumakun

2021/01/12 00:53

・ブラウザのコンソールにエラーは出ていませんか？・「適用されません。」というのは、「どの要素」に「どんなスタイル」が適用されるべきところが「実際はどうなっている」ということでしょうか？

hohoso

2021/01/12 01:00

エラーは出ていません。 phpの全てにcssが１つも適用されていない状態です。

dit.

2021/01/12 01:01

``` <p>お仕事のお問い合わせ、ご質問などはこちらまで</p> </div> ``` に対応する開始divが無いようですが、実際のコードもこのようになっていますか？「検証でCSSも表示されました」とあるので読み込みはできていると考えていいのですよね。 maisumakunさんの指摘にもありますが、「適用されない」の具体的な記載をお願いします。

hohoso

2021/01/12 01:11

申し訳ありません。適用されないの具体的な記載が詳しく理解できないのですがどのように記載すればよろしいですか？

yambejp

2021/01/12 01:13

「エラー」ってブラウザでF12押してデバグ画面で確認していますか？またブラウザは何を使用する前提でしょうか？

hohoso

2021/01/12 01:16

Mac、Chromeで使用しています。 MacでもF12でよろしいですか？

yambejp

2021/01/12 01:21

macは専門外なのですが「option + command + I」とかじゃないですか？

dit.

2021/01/12 01:25

2021/01/12 10:00の書き込みを見ていませんでした。「CSSが一切適用されていない」のですね。何も適用されていないのであればパスの記載が間違っているのでは？

hohoso

2021/01/12 01:33

デバクというのはChromeの検証のことでしょうか？そこでならエラーは出ていませんでした。 ditさんのいう通りにパスを確認したら href="assets/CSS/confirmation.css" と記載したいましたがMANPにはファイルのみ入れていて適用されていませんでした。解決したと思いましたがローカルファイルでCSSを変更してMANPに更新したフォルダを入れても変更したCSSが適用されていませんでした。

dit.

2021/01/12 01:45

現在のHTML(PHP?)からみて「confirmation.css」はどこにあるのでしょうか。パスの書き方についてわかりやすいと思うページがあったので紹介しておきます。 https://webliker.info/78726/

hohoso

2021/01/12 01:59

フォルダ分けのスクリーンショットを追加しました。パスのURLありがとうございます。確認しましたが同じ階層なので問題はないと思いましたがどうでしょうか？

dit.

2021/01/12 02:06 編集

href="../CSS/confirmation.css"かな（直接関係ないですがメッセージのスペルはmessageです。massege、massageと両方とも間違ってますのでご注意を。）

hohoso

2021/01/12 02:14

スペルミスの指摘ありがとうございます。（お恥ずかしいです） hrefの入力変更しCSSが適用されましたが、.titleのfont-sizeが適用されません。 CSSの読み込みはできたのですが、ここだけ適用されないことはあり得ますか？

hohoso

2021/01/12 02:21

なぜか急に全CSSが適用されました。もしかしてmessageのスペルミスが関係していたのでしょうか？

dit.

2021/01/12 02:29

スペルミスは関係ないと思いますがとりあえず解決ですかね。

hohoso

2021/01/12 03:18

はい、理由がわからないのが気になりますが！助かりましたありがとうございます！

dit.

2021/01/12 03:39

あぁ、「contact」のサイズは.titleで指定したサイズではなくブラウザごとのh1のデフォルトのサイズになっていると思いますよ。リセット系のCSS入れるとか、「.title h1」に対してサイズを指定する必要があると思います。どちらにしろパスに関する回答はyambejpさんがしてますし、ベストアンサー選んで解決済みにしておいてください。