HTML

【Chrome】記述したHTMLファイルを Google Chrome で確認する方法

こんにちは!ProgRiroです。

本日のテーマは「記述したHTMLファイルを Google Chrome で確認する方法」です。

Webサイトを作成していく上で必ず必要な知識なので、最後までご覧になることをお勧めします。

本日の記事を読むと自分で作成したHTMLファイルがブラウザ上でどのように表示されるのか確認できるようになります。とても簡単なので、気軽に読み進めてくださいね。

また、この記事では

  • Visual Studio Code(テキストエディタ)
  • Google Chrome(ブラウザ)
  • フォルダ(任意のフォルダ)
  • ファイル(〇〇.html

準備されていることを大前提として解説を進めていきます。

これが準備できていない方は 【HTML】簡単!HTMLの環境構築! 【HTML】超基本!HTMLの基本要素まとめ を読んで準備しましょう!

1. 記述したHTMLファイルを Google Chrome で確認する方法

今回はサンプルとして以下のようなファイル(index.htmlブラウザ(Google Chrome表示させたいと思います。

① ブラウザで確認したいファイル(今回は index.html )上にのせてマウスカーソルを右クリックします。

 「パスのコピー」を選択します。

Google Chrome の検索バーに先程コピーしたものを貼り付けます。

貼り付けたら「Enter」を押します。

以下のように表示されたら完了です。

これ以降、○○.html の内容を変更した際は、Google Chrome Webページを「再読み込み」すれば、すぐに反映されます。

2. 最後に

以上で今回の学習は終了です。

実際に手を動かして学習することで、学習効率や習得量が格段に上昇します!頑張っていきましょう!

 

最後までお読みいただき、ありがとうございました。

ABOUT ME
ProgRiro
理系大学生です。ITベンチャーでエンジニアとして働きながら、プログラミングスクールの講師も務めています。 趣味はプログラミング。 設計からコーディング、テストまでを行い、個人開発していきたい。 研究分野はデータ分析。世の中になくてはならないようなプロダクトを作りたいと思っています。