PHPでCSSのファイルが読み込まれません。

なぜでしょうか？

やりたいこと
↓

現状
↓

index.php

php
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>BINGO!</title>
6    <link rel="stylesheet" href="styles.css">
7  </head>
8  <body>
9    <div id="container">
10      <table>
11
12      <tr>
13        <th>B</th>
14        <th>I</th>
15        <th>N</th>
16        <th>G</th>
17        <th>O</th>
18      </tr>
19
20      <tr>
21        <td>1</td>
22        <td>1</td>
23        <td>1</td>
24        <td>1</td>
25        <td>1</td>
26      </tr>
27      </table>
28
29    </div>
30
31  </body>
32</html>

styles.css

css
1body {
2  font-family: Arial, sans-erif;
3  text-align: center;
4  font-size: 16px;
5}
6
7#conteiner {
8  margin: 0 auto;
9  width: 322px;
10}
11
12td, th {
13  width: 60px;
14  height: 45px;
15}
16
17td {
18  background: #F06292;
19  color: #fff;
20}
21
22th {
23  color: #F06292;
24  font-size: 22px;
25}

宜しくお願い致します。

s8_chu

2017/11/12 05:23

どのようにうまくいかないのかもう少し詳しく教えていただけませんか？

dog57

2017/11/12 05:33

上記の「やりたいこと」と「現状」に画像を追記しました。CSSがなざか反映されません。

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

回答2件

ベストアンサー

index.phpの内容を以下のようにして実行してみましたが、問題が再現しませんでした。一度以下の項目を確認してみていただけませんか？

CSSファイルのファイル名があっているか
パスの指定先にファイルが存在するか
ソースコード中に全角スペース、全角文字が混入していないか
下のコードをキャッシュの消去を行ったうえでindex.phpで実行したとき、問題が再現するか

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>BINGO!</title>
6    <style type="text/css">
7        body {
8            font-family: Arial, sans-erif;
9            text-align: center;
10            font-size: 16px;
11        }
12
13        #container {
14            margin: 0 auto;
15            width: 322px;
16        }
17
18        td, th {
19            width: 60px;
20            height: 45px;
21        }
22
23        td {
24            background: #F06292;
25            color: #fff;
26        }
27
28        th {
29            color: #F06292;
30            font-size: 22px;
31        }
32    </style>
33</head>
34<body>
35<div id="container">
36    <table>
37
38        <tr>
39            <th>B</th>
40            <th>I</th>
41            <th>N</th>
42            <th>G</th>
43            <th>O</th>
44        </tr>
45
46        <tr>
47            <td>1</td>
48            <td>1</td>
49            <td>1</td>
50            <td>1</td>
51            <td>1</td>
52        </tr>
53    </table>
54
55</div>
56
57</body>
58</html>