htmlのheader内で外部ファイル(css)を読み込ませたいが反映されません

htmlに外部ファイルのcssを読み込ませたい

htmlで自作のwebページを作っています。

<header>内で外部のhtmlを読み込みたいのですが、全く反映されません。

作成したhtmlファイル

ファイル名はcontents.htmlです。
以下のようにして外部ファイルの読み込みを行いました。

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>CyberAcademy Contents</title>
    <link rel="stylesheet" href="./../css/MainTest.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>

  <body>
    <div class="BodyContents">

      <!--header-->
      <header>
        <div class="headerContainer">
          <div class="header-left">

ディレクトリの構造は
・testフォルダ内に、3つの作業フォルダ(html css picture)が入っている
・上記のcontents.htmlはhtmlフォルダ内に入っている
・読み込ませたいcssファイル(MainTest.css)は、cssフォルダに入っている
となっているため

<link rel="stylesheet" href="./../css/MainTest.css">

のように指定しました。それでも反映されません。

試したこと

contents.htmlとMainTest.cssを同じ階層の作業フォルダに入れ

<link rel="stylesheet" href="MainTest.css">

とした場合は、問題なく反映されました。
また、htmlフォルダ内に新たにcssフォルダを作成し

<link rel="stylesheet" href="css/MainTest.css">

とやった場合も反映されました。
少し試していく中で、上の階層に一度上がる命令

./../

に問題があると感じています。
一応

<link rel="stylesheet" href="../css/MainTest.css">

も試しました(./を省略しただけ)。
それでも反映されませんでした。

環境

MacBook : Pro
OS : Catalina
テキストエディタ : atom

html難しい

恥ずかしい話、この問題が解決せず3ヶ月近く経ってしまいました。
しばらく放置してから考え直したらわかるだろうと楽観的でしたが、全くわかりません。

お忙しい中恐縮ですが、回答をお願いいたします。

追記

追記いたしました。

css
1body {
2  margin: 0;
3  font-family: "Hiragino Kaku Gothic ProN";
4}
5
6a {
7  text-decoration: none;
8}
9
10
11
12
13/*共通するツール*/
14.btn {
15  padding: 10px 50px;
16  color: white;
17  display: inline-block;
18  opacity: 0.8;
19  border-radius: 4px;
20  font-size: 25px;
21}
22
23.btn:hover {
24  opacity: 1;
25}
26
27.facebook {
28  background-color: #3b5998;
29  margin:10px 10px 0px 0px;
30}
31
32.twitter {
33  background-color: #55acee;
34}
35
36/*アイコンを入れたいとき*/
37.fa {
38  margin-right: 5px;
39}
40
41/*ページ上部の画像*/
42.top-contents{
43  padding: 180px 0 100px 0;
44  background-image: url(fractal.jpg);
45  background-size: cover;
46}
47.top-about{
48  padding: 180px 0 100px 0;
49  background-image: url(yokohama.jpg);
50  background-size: cover;
51}
52.top-contact{
53  padding: 180px 0 100px 0;
54  background-image: url(wabisabi.jpg);
55  background-size: cover;
56}
57.top-menu{
58  padding: 200px 0 200px 0;
59  background-image: url(phone.jpg);
60  background-size: cover;
61}
62
63
64
65
66
67/*最初のページ*/
68.BodyFirst{
69  background-color: rgba(34, 49, 52, 0.9);
70}
71
72/*最初のページのボタン*/
73.welcome {
74  background-color: #239b76;
75}
76
77.firstImage {
78  padding: 180px 0 100px 0;
79  background-image: url(welcome.jpg);
80  background-size: cover;
81  color: white;
82  text-align: center;
83}
84
85.btn-first {
86  margin: 50px 20px;
87}
88
89.firstImage h1 {
90  opacity: 0.8;
91  font-size: 75px;
92  font-weight: bold;
93}
94
95.firstImage p {
96  opacity: 0.8;
97  font-weight: bold;
98}
99
100.footer {
101  height:100px;
102}
103
104/*メニュ〜〜*/
105.MenuPicture{
106  height:3000px;
107  background-color: yellow;
108}
109.PicturePair{
110  width:98%;
111  height:30000px
112  padding:10px 0 10px 0;
113  background-color: blue;
114  margin: 0 auto;
115}
116.OnePicture{
117  width:49%;
118  height:600px;
119  background-color: blue;
120  margin-top:10px;
121  margin-left: 7px;
122  float:left;
123
124}
125.OnePicture img{
126  width:98%;
127  margin-top:10px auto 10px auto;
128}
129.PictureDiscription{
130  width:90%;
131  margin-left: auto;
132  margin-right: auto;
133  background-color: red;
134}
135.btn-center{
136  text-align: center;
137}
138
139
140
141/*コンタクト*/
142.contactForm{
143  border-top: solid 1px #eee;
144  border-bottom: solid 1px #eee;
145  width:98%;
146  margin: 10px auto;
147}
148.contact{
149  width:500px;
150  margin: 10px auto;
151}
152.contact input{
153  width:500px;
154}
155.contact textarea{
156  width:500px;
157
158}
159
160
161
162
163/*コンテンツ*/
164.BodyContents{
165  background-color: Green;
166}
167
168
169header {
170  height: 65px;
171  width: 100%;
172  background-color: rgba(34, 49, 52, 0.9);
173  position:fixed;
174  top:0;
175  z-index:10;
176}
177
178/*header関連*/
179
180.headerContainer {
181  width: 1200px;
182  padding: 0 15px;
183  margin: 0 auto;
184}
185.header-left {
186  float: left;
187}
188.header-left h1{
189  margin-top:0px;
190  font-size: 40px;
191  color:white;
192}
193
194.header-right {
195  float: right;
196}
197
198.header-right a {
199  line-height: 65px;
200  padding: 0 25px;
201  color: white;
202  display: block;
203  font-size:20px;
204}
205.menu{
206  float:left;
207  transition: all 1s;
208}
209.menu :hover{
210  background-color: rgba(255, 255, 255, 0.5);
211}
212
213/*上部の画像付きリンク*/
214.Rink{
215  height:210px;
216  padding:10px 0 10px 0;
217  background-color: yellow;
218}
219
220.RinkMenu img{
221  width:24%;
222  float:left;
223  margin-right:5px;
224  margin-left: 5px;
225}
226
227
228/*コンテンツのメイン*/
229.container {
230  width: 1200px;
231  padding: 10px 15px;
232  margin: 0 auto;
233}
234
235.mainBody{
236  width:69%;
237  float:left;
238  background-color: Red;
239
240}
241
242.mainBodyTitle{
243  width:95%;
244  background-color: blue;
245  margin: 20px auto 10px auto;
246}
247.mainBodyTitle p{
248  padding-left:30px;
249}
250.TitleName h1{
251  margin-top:0;
252  margin-bottom:0;
253  padding-left: 30px;
254  font-size: 50px;
255  background-color: green;
256}
257.menuTitleName h1{
258  margin-top:0;
259  margin-bottom:0;
260  padding-left: 30px;
261  font-size: 48px;
262  background-color: green;
263}
264
265.mainBodyContents{
266  width:95%;
267  background-color: Yellow;
268  margin:20px auto;
269  padding-top:10px;
270  padding-bottom:10px;
271}
272.mainBodyContents h1{
273  border-left: solid 8px #4682b4;
274  border-bottom: solid 1px #eee;
275  padding:5px 10px;
276}
277.mainBodyContents h2{
278  background: linear-gradient(transparent 70%, #a7d6ff 70%);
279}
280
281.mainBodyContents ul {
282  border: solid 2px skyblue;
283  border-radius: 5px;
284  padding: 0.5em 1em 0.5em 2.3em;
285  position: relative;
286  width:400px;
287  margin:10px auto;
288}
289
290.mainBodyContents ul li {
291  line-height: 1.5;
292  padding: 0.5em 0;
293  list-style-type: none!important;
294}
295
296.mainBodyContents ul li:before {
297  font-family: "Font Awesome 5 Free";
298  content: "\f138";/*アイコンの種類*/
299  position: absolute;
300  left : 1em;/*左端からのアイコンまでの距離*/
301  color: skyblue;/*アイコン色*/
302}
303.img{
304  text-align: center;
305}
306.img img{
307  width:95%;
308}
309.Tweet{
310  margin: 0 auto;
311}
312.YouTube{
313  text-align: center;
314}
315
316
317
318/*コンテンツの右側面*/
319.subBody{
320  width:30%;
321  float:right;
322  background-color: Blue;
323  padding-bottom: 20px;
324}
325.subBodyContents{
326  width:95%;
327  background-color: White;
328  margin:20px auto;
329}
330
331.subBodyContents h1 {
332  border-bottom: double 5px #4682b4;
333  font-size: 25px;
334}
335
336.subBodyContents p{
337  border-bottom: 1px solid #eee;
338  text-align: center;
339}
340
341.TwitterSection{
342  margin-top: 10px;
343}
344.TwitterMethod{
345  text-align: center;
346}
347
348
349
350
351
352
353
354
355
356footer{
357  border-top: solid 1px #eee;
358  clear:both;
359  background-color: blue;
360}
361
362footer p {
363  font-size: 12px;
364  text-align: center;
365}
366footer a{
367  padding-bottom: 10px;
368  margin-left: 10px
369}
370.footerSeparate{
371  height:500px;
372  padding:10px 0 10px 0;
373  background-color: green;
374
375}
376
377.footerContents{
378  width:33%;
379  height:500px;
380  float:left;
381  border-right: 2px solid #eee;
382}
383

階層図は以下の通りです
test(フォルダ)
|
html(フォルダ) css(フォルダ) picture(フォルダ)
|.................................|.................................
contents.html MainTest.css

解決の糸口？？

なぜか、ブラウザをSafariからGoogle Chromeに変更したら

<link rel="stylesheet" href="../css/MainTest.css">

でうまくいきました。
理由は全くわかりません。

sink66

2020/03/03 19:03 編集

こちらのローカル（Windows）でディレクトリ構造を再現したところ、・<link rel="stylesheet" href="./../css/MainTest.css"> ・<link rel="stylesheet" href="../css/MainTest.css"> の2つはいずれも正しく読み込まれましたブラウザのキャッシュかファイルを配置している環境が怪しいと思いますお手すきの時にでも下記を調べて頂いて、状況について追記をお願いしたいです・どうやってファイルを開いていますか？ブラウザにドロップするなどして直接開いていますか？それともMac上にHTTPサーバーなどを立ててますか？・正しく読み込まれなかったブラウザの名前は何ですか？ブラウザを変えても同じでしょうか・<link rel="stylesheet" href="../css/MainTest.css">に修正した上で、contents.htmlを開いて「Command ＋ r」と押下するとどうなりますか？

m.ts10806

2020/03/03 21:38

各ファイルの配置が分かる階層図と、 CSSのコードを提示してください。どんな指定をしてどういう結果を期待してるか分からないので、答えようがありません。

Murasaki_PurPle

2020/03/04 04:01

sink66様・どうやってファイルを開いていますか？ブラウザにドロップするなどして直接開いていますか？それともMac上にHTTPサーバーなどを立ててますか？ htmlファイルをダブルクリックして、直接ブラウザ(safari)で開いています・正しく読み込まれなかったブラウザの名前は何ですか？ブラウザを変えても同じでしょうか safari : ダメだった google chrome : なぜかできました・<link rel="stylesheet" href="../css/MainTest.css">に修正した上で、contents.htmlを開いて「Command ＋ r」と押下するとどうなりますか？ Safari Chromeのいずれでも「Command＋r」を試しましたが、何も起こりませんでした。

Murasaki_PurPle

2020/03/04 04:09

m.ts10806様ご指摘ありがとうございます。質問内容の修正を行いました。

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

回答2件

ベストアンサー

追記を受けて回答してみます
恐らくSafariに固有の現象ではないでしょうか
うろ覚えで申し訳ないのですが、確かSafari+Macでは質問者様のなさっているようにHTTPサーバーなどを介さず直接ファイルを開くとこういう挙動になった気がします
Chromeで読み込めたことから考えても、パスの指定は<link rel="stylesheet" href="../css/MainTest.css">で合っていると思います

これを確かめるには、お手元のMacにHTTPサーバーを立ててSafariで開いてみるのが最も良い方法です
この記事などを参考にやってみてほしいです
https://qiita.com/sudahiroshi/items/e74d61d939f18779970d

投稿2020/03/04 04:58

編集2020/03/04 05:05

sink66

総合スコア88