htmlファイルがブラウザによっては開かない

同じhtmlファイルでもGoogleChromeでは開くと意図通りの表示でないのですが、Safariになると開くことができないものがあります。
また、以下のように開く前から若干表示方法が違っています。
どのようにすればSafariでもこのhtmlファイルを閲覧することができますか。
右がSafariでも表示されるもので、左のファイルが表示されません。
GoogleChromeでは意図したものがちゃんと表示されます。
しかし同じファイルをSafariで開こうとするとの下の画像のようになってしまいます。

よろしくお願いします。

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>航空機</title>
6    <link rel="stylesheet" href="stylesheet2.css"　stlye type="text/css">
7    <link rel="stylesheet" href="responsive.css" style type="text/css">
8    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
9  </head>
10
11  <body>
12    <div class="header">
13
14      
15      <div class="header-logo"><a href="https://www.boeing.com"　style="text-decoration:none;">
16          <span style="color:aqua">航空機</span>
17        </div></a>
18        
19        <div class="header-list">
20          <ul>
21            <a href="https://www.google.com"><li>航空機について</li></a>
22            <a href="https://www.yahoo.co.jp"><li>揚力について</li></a>
23            <a href="https://neomana39.hatenablog.com"><li>抗力について</li></a>
24            <a href="http://www.boeing.com/commercial/747/"><li>ジャンボジェット</li></a>
25          </ul>
26        </div>
27        
28      </div>
29    <a href="#" class="menu-icon">
30      <span class="fa fa-bars"></span>
31    </a>
32
33
34    <div class="top-wrapper">
35      <div class="copy-container">
36
37        <h1>流体<span>力学</span></h1>
38        <h2>航空機の飛ぶ仕組み</h2>
39
40      </div>
41    </div>
42
43
44
45    <div class="main">
46    
47
48      <div class="contents">
49        <h3 class="section-title">航空機について</h3>
50        <div class="contents-item">
51          <a href="https://www.boeing.com"><img src="DSC_0039.jpg" width="350" height="220">
52          <p>Boeing B787-9</p></a>
53        </div>
54        <div class="contents-item">
55          <a href="https://www.airbus.com"><img src="DSC_0141.jpg" width="350" height="220">
56          <p>Boeing B747-8 intercontinental</p></a>
57        </div>
58        
59        
60      </div>
61      
62      <div class="container">
63        <center><span class="btn message"><a href="https://www.boeing.com">飛行機が好きだ！</a></span></center>
64      </div>
65      <div class="contact-form">
66        <h3 class="section-title">お問い合わせ</h3>
67        <p>メールアドレス<span>（必須）</span></p>
68        
69        <input>
70
71        <p>お問い合わせ内容<span>（必須）</span></p>
72     
73        <textarea></textarea>
74
75        <p>※必須項目は必ずご入力ください</p>
76        
77        <a href="mailto:neomana39@gmail.com"><input class="contact-submit" type="submit" value="送信"></a>
78      </div>
79
80    </div>
81
82
83
84    <div class="footer">
85      <div class="footer-logo">航空機</div>
86      <div class="footer-list">
87        <ul>
88          <a href="https://www.google.com"><li>航空機について</li></a>
89          <a href="https://www.boeing.com"><li>揚力</li></a>
90          <a href="https://www.airbus.com"><li>抗力</li></a>
91        </ul>
92      </div>
93    </div>
94  </body>
95</html>
96

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <title>Progate</title>
6    <link rel="stylesheet" href="test.css">
7  </head>
8  <body>
9    <div class="header">
10      <div class="header-logo">Progate</div>
11      <div class="header-list">
12        <ul>
13          <li>プログラミングとは</li>
14          <li>学べるレッスン</li>
15          <li>お問い合わせ</li>
16        </ul>
17      </div>
18    </div>
19
20    <div class="main">
21      <div class="copy-container">
22        <h1>HELLO WORLD<span>.</span></h1>
23        <h2>プログラミングの世界へようこそ</h2>
24      </div>
25      
26      <div class="contents">
27        <h3 class="section-title">学べるレッスン</h3>
28        <div class="contents-item">
29          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg">
30          <p>HTML & CSS</p>
31        </div>
32        <div class="contents-item">
33          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg">
34          <p>PHP</p>
35        </div>
36        <div class="contents-item">
37          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg">
38          <p>Ruby</p>
39        </div>
40        <div class="contents-item">
41          <img src="https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg">
42          <p>Swift</p>
43        </div>
44      </div>
45      
46      <div class="contact-form">
47        <h3 class="section-title">お問い合わせ</h3>
48        <p>メールアドレス（必須）</p>
49        <!-- <input>要素を追加してください -->
50        <input>
51        
52        <p>お問い合わせ内容（必須）</p>
53        <!-- <textarea>要素を追加してください -->
54        <textarea></textarea>
55        
56        <p>※必須項目は必ずご入力ください</p>
57        <!-- <input>要素を追加してください -->
58        <input class="contact-submit" type="submit" value="送信">
59        
60      </div>
61    </div>
62
63    <div class="footer">
64      <div class="footer-logo">Progate</div>
65      <div class="footer-list">
66        <ul>
67          <li>会社概要</li>
68          <li>採用</li>
69          <li>お問い合わせ</li>
70        </ul>
71      </div>
72    </div>
73  </body>
74</html>

kyoya0819

2019/08/29 10:11

わかりません。中身をマークダウン文法で記載してください。

neomana-39

2019/08/29 10:25

情報不足で申し訳ありませんでした。以下がそれぞれをマークダウン文法で記述したものになります。・index2.html <meta charset="utf-8"> <title>航空機</title> <link rel="stylesheet" href="stylesheet2.css" 　stlye="" type="text/css"> <link rel="stylesheet" href="responsive.css" style="" type="text/css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="header"> <div class="header-logo">[ <font color="skyblue"> 航空機 </font>](https://www.boeing.com)</div> <div class="header-list"> [1. 航空機について](https://www.google.com) [1. 揚力について](https://www.yahoo.co.jp) [1. 抗力について](https://neomana39.hatenablog.com) [1. ジャンボジェット](http://www.boeing.com/commercial/747/) </div> </div> <span class="fa fa-bars"></span> <div class="top-wrapper"> <div class="copy-container"> 流体<span>力学</span> ================= 航空機の飛ぶ仕組み --------- </div> </div> <div class="main"> <div class="contents"> ### 航空機について <div class="contents-item">[![](DSC_0039.jpg) Boeing B787-9](https://www.boeing.com)</div> <div class="contents-item">[![](DSC_0141.jpg) Boeing B747-8 intercontinental](https://www.airbus.com)</div> </div> <div class="container"><center><span class="btn message">[飛行機が好きだ！](https://www.boeing.com)</span></center></div> <div class="contact-form"> ### お問い合わせメールアドレス<span>（必須）</span> <input> お問い合わせ内容<span>（必須）</span> <textarea></textarea> ※必須項目は必ずご入力ください[<input class="contact-submit" type="submit" value="送信">](mailto:neomana39@gmail.com) </div> </div> <div class="footer"> <div class="footer-logo">航空機</div> <div class="footer-list"> [1. 航空機について](https://www.google.com) [1. 揚力](https://www.boeing.com) [1. 抗力](https://www.airbus.com) </div> </div> ・test.html(Progate初級編の内容) <meta charset="utf-8"> <title>Progate</title> <link rel="stylesheet" href="test.css"> <div class="header"> <div class="header-logo">Progate</div> <div class="header-list"> * プログラミングとは * 学べるレッスン * お問い合わせ </div> </div> <div class="main"> <div class="copy-container"> HELLO WORLD<span>.</span> ========================= プログラミングの世界へようこそ --------------- </div> <div class="contents"> ### 学べるレッスン <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/html.svg) HTML & CSS</div> <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/php.svg) PHP</div> <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/ruby.svg) Ruby</div> <div class="contents-item">![](https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/html/study/swift.svg) Swift</div> </div> <div class="contact-form"> ### お問い合わせメールアドレス（必須）  <input> お問い合わせ内容（必須）  <textarea></textarea> ※必須項目は必ずご入力ください  <input class="contact-submit" type="submit" value="送信"> </div> </div> <div class="footer"> <div class="footer-logo">Progate</div> <div class="footer-list"> * 会社概要 * 採用 * お問い合わせ </div> </div> よろしくお願いします。

m.ts10806

2019/08/29 11:26

こちらのコメント欄では見て分かるようにマークダウンはききません。あくまで追記修正依頼のコメント欄です。質問本文に追記してください。また利用してもらいたいマークダウンはリンクではなくcodeです。（他の質問参考にしてもらいたい）

kyoya0819

2019/08/29 12:36

てかそもそも宣言文がない時点でなんだかなって思います。 html,head,bodyタグは省略できるからいいけど

kyoya0819

2019/08/29 12:37

あとfontタグそろそろ使うのやめたほうがいいと思います。

kyoya0819

2019/08/29 12:41

あとChromeOSは関係ありません。 ChromeとChromeOSは別物です

otn

2019/08/29 13:33

もしかして、「開かない」とは、「開くと意図通りの表示でない」という意味？日本語がおかしい。

neomana-39

2019/08/29 13:43

m.ts10806さんコメントありがとうございます。質問本文に追加させていただきます。

neomana-39

2019/08/29 13:46

asuchi0819さんコメントありがとうございます。すみません。自分の打ったコードをマークダウン文法に変換するサイトを利用してそのまま貼りました。その他のコメントもありがとうございます。参考にさせていただきます。

neomana-39

2019/08/29 13:47

otnさんコメントありがとうございます。すみませんでした。以後気をつけます。

kei344

2019/08/29 16:55

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

neomana-39

2019/08/29 16:57

kei344さんコメントありがとうございます。コードブロックで囲みました。よろしくお願いします。

kei344

2019/08/29 17:05

どのコードがどの状況なのでしょう。

neomana-39

2019/08/29 19:08

kei344さんコメントありがとうございます。１つ目のコードがindex2.htmlでして、２つ目がtest.htmlのコーデです。どちらもGoogleChromeでは意図したように正しく表示されるのですが、どちらもSafariで開くと2枚目のような表示になっている状況です。よろしくお願いします。

yoshinavi

2019/08/30 00:45

確認したOS・ブラウザの名称とバージョンを提示してください。

neomana-39

2019/08/30 03:11

yoshinaviさんコメントありがとうございます。確認したOSはmacOS Catalina 10.15Beta でそれぞれのブラウザのバージョンは Safari バージョン13.0 (15608.2.5) GoogleChrome バージョン: 76.0.3809.100（Official Build）（64 ビット) です。よろしくお願いします。

kyoya0819

2019/08/30 04:38

回答してるんですけど結果はどうだったんですか？

neomana-39

2019/08/30 05:39

asuchi0819さん返信遅くなってしまいすみませんでした。今、回答させていただきました。

dit.

2019/08/30 05:59

直接関係ないと思うのでこちらに書きますが、DSC_0039.jpg等のファイル名が気になります。デジカメで撮った画像ファイルをそのまま使っていてファイルサイズがめちゃくちゃ大きい…ということはありませんか？

neomana-39

2019/08/30 08:33

dit.さんコメントありがとうございます。そのまま使っていますが、以前まではSafariでも閲覧することができていたので問題ないとは思います。

dit.

2019/08/30 10:28

見られていたタイミングがあるならやはり質問内容とは関係がありませんね。ただ、もし画像のファイルサイズが大きい場合表示に時間がかかるなどするので、ある程度サイズを抑えることも視野に入れておくといいかもしれません。

neomana-39

2019/08/30 13:27

dit.さんわかりました。ありがとうございました。

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

回答2件

ベストアンサー

直接の回答では無いのですが、「質問への追記・修正」の欄には長すぎるので回答にしています。

index2.html をコピーして、test.html という名前にリネームした場合表示されるでしょうか。
また、コピーした index2.html をエディタで開き、test.htmlの中身に書き換えた場合どうなるでしょうか。

前者が表示される場合、ブラウザ側のキャッシュ系の問題な気がします。
後者が表示される場合、ファイルの文字コードやファイル自体に何らかの問題がある気がします。

キャッシュ類のクリアも試せるのであれば試してみてください。
※ 提示した物は細かい設定も消す可能性があるため、慎重に行うことをお勧めします。

【Safari　ページを開けません。　対処法　（Mac） - 元CAバンビのずぼら日記】
https://www.bambi.red/entry/2018/01/05/113000

【Mac Safariの調子が悪い時や異常な動作をする時の対処方法まとめ / Inforati】
http://inforati.jp/apple/mac-tips-techniques/internet-hints/how-to-troubleshoot-mac-safari-browser.html

投稿2019/08/30 07:01

kei344

総合スコア69612

neomana-39

2019/08/30 08:55

kei344さん回答ありがとうございます。回答を参考にさせていただきました。 Safariのタブバーにindex2.htmlを同じタブに2回以上ドラッグすることによって正しく表示することができました。なぜこのようなことが起こるかわかりますか。

kei344

2019/08/30 09:01

test.html と index2.html の表示できないほうを test.html と勘違いしていました。 > なぜこのようなことが起こるかわかりますか。詳しいわけではないので、わかりません。

neomana-39

2019/08/30 09:14

kei344さん回答ありがとうございます。ありがとうございます。

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

同様の事例がありました。
Safari: kCFErrorDomainCFNetwork error 1 on local (HTML) files - Ask Different

Some Googling on kCFErrorDomainCFNetwork error 1 indicates that it may be a file permissions error

Safari 12.0 can’t open a local Home page – The Eclectic Light Company

Once I have loaded another page in Sierra, and I go back to my Home page, those errors vanish, and it then loads as expected. Other than pointing Safari at the file for my new Home page, I have made no other relevant changes in its settings.

又は

HTML
1<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

を

HTML
1<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

にしてみてください。

投稿2019/08/29 12:38

編集2019/08/29 23:19

kyoya0819

総合スコア10429

neomana-39

2019/08/30 05:38

回答ありがとうございます。回答していただいた通りに変更してみたのですが表示されませんでした。

kyoya0819

2019/08/30 08:35

他の２つの方法は試されましたか？

neomana-39

2019/08/30 13:24

asuchi0189さんはい。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.34%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

htmlファイルがブラウザによっては開かない

関連した質問