HTMLファイルがchromeで表示できません。

Question

使用しているパソコンはMacで
Visual Studio Code を使用しコードを書いてクロムで表示しようとしたが
以下のエラーメッセージが表示され、確認する事ができない

ファイル名
index.html

コード

<h1>はじめまして</h1>
<p>私の名前は〇〇です</p>

表示させたい形
はじめまして
私の名前は〇〇です

エラーメッセージ
ファイルへのアクセスが拒否されました
(ファイル名).htmlのファイルを読むことができません。削除されたか移動された可能性があります。ファイルに対するアクセス権がない場合もあります。
ERR_ACCESS_DENIED

試したこと
同じ様な質問はあったのですが具体的な回答が書いていなかったので解決方法がわかりませんでした
とても困っています
解決法をお教えいただけると幸いです

Comments

[m.ts10806]

どのようなファイルのどのようなコードをどのように表示させようとしているのでしょうか。
この内容では何一つできるアドバイスがありません（どういう質問を見たのか書いてないし）

[oooooo]

返信いただき有り難うございます

<h1>はじめまして</h1>
<p>私の名前は〇〇です</p>

この様な簡単な文章を表示させたいんですが・・・

https://teratail.com/questions/249471
ちなみに似ている質問はこちらです
同様の内容かと思われます

[m.ts10806]

質問は編集できます。
「どのようなファイル名で」
「どのようなコードで」
「どのように表示させようとしているか」
追記してください。
現在の内容では何一つ他者が再現できる情報がありません。
任意のファイル名で提示のコードで任意のやり方でChromeに表示させようとしたら出来るのは当然です。
ご自身がやっていることを提示してください。
そこに間違いがあれば当然できませんし、この内容で「できない」のであれば根本的に理解を間違っているのでそこから正さなければなりません。
「同様の内容」がどこまで同じなのか現状では判断できません。

[oooooo]

なるほど、わかりました！

[m.ts10806]

編集したらここのコメントした人に通知が来るので毎回書かなくても良いですよ。

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

Answer 1

ファイル名

index-html

拡張子は.htmlとしないとHTMLとして認識しません。

本件とは直接関係しませんが、HTML作るときもDOCTYPE宣言から最小構成で良いのでHTMLの枠は組んでおいた方が良いです。
HTML5の最小構成サンプルとその説明

index.htmlというファイル名で
提示のコードを組んで
Chromeにドラッグして表示

Comments

[oooooo]

.にしてみても表示できませんでした

[m.ts10806]

「どのように表示させようとしているか」
が書かれてないのでこちらでは再現できませんね。

[m.ts10806]

念のため、Visual Studio Codeで今見ている画面のキャプチャもとって添付してください。

[oooooo]

まったくの初心者で質問も分かり辛くすみません、
宜しくお願い致します

[m.ts10806]

コードは全部コピペで提示してくださいね。
で「クロムで表示」をもっと具体的に記載してください。
私で確認したやり方と結果を追記しました。
※Windows環境ですがMacでも違いはないです。

[oooooo]

ドラッグして持ってきたら表示する事ができました！
昔同じ様な事をした時はファイルクリックで表示出来た気がしますが
これはファイル名をクリックするとこの様なエラーメッセージが出てきてしまうものなのでしょうか？

[oooooo]

すみません、ご指摘頂いてから前後のコードは足しました
初めは質問内容の２行のみでした

[m.ts10806]

VSCodeなどエディタ内でファイルクリックしたらふつうはエディタ内で編集モードになるかと思います。
きちんと手順や状況は説明してください。
そちらの画面を見れているわけでもないし、文章でのやりとりが多いので、丁寧すぎるくらいでちょうど良いです。
「どこに置いてあるどの状態のファイルを」「どのようにして」クリックしたのか。
昔がどういうことか知らないですが、状況と手順が100％同じなら起きることは100％同じです。

[m.ts10806]

＞すみません、ご指摘頂いてから前後のコードは足しました
いえ。ですから、足したのでしたらテキストで提示されたコードも更新してください。

[m.ts10806]

VSCode上でもデバッグ機能、プラグインを利用すればVSCodeから直接Chromeを実行できるようです。
https://qiita.com/C3REVE/items/273646ad028e98758e70

[oooooo]

不慣れな質問で大変ご迷惑、不快な思いをおかけしました
ご回答いただき有り難うございました
大変助かりました

[m.ts10806]

特に不快とかはないです。よくあるので。
ただ、「見るのは赤の他人。質問者の前提や背景など何も知らない」というところは意識してほしいかなと。
どんな熟練者であっても、相手の状況が分からないとアドバイスできませんし、エスパーはほぼ外れます（というか書いたとおりにしか動かないプログラム上で「勘」という概念はなるべく排除してストレートに解決したいと考えるのがエンジニア）

[oooooo]

そうですよね
伝え方が的確でなく失礼しました
この度は有り難うございました

[m.ts10806]

的確かどうかというより省略された部分が多かったということですね。
問題が再現しないとアドバイスできないものなので、赤の他人が質問に書かれた内容だけで再現できるかどうか考えると良いです。
質問テンプレート利用してください。「質問するときのヒント」読んでください。
沿って書けば過不足ない質問内容にできるはずです。

多くの人は説明書読まないまま自由気ままに使ってしまっているので何度もヒアリングが必要になって解決まで時間を要してお互い浪費してしまいます。
どんなに何年もやってきたエンジニアであっても神様ではないですからね。書いてあることが全てです。