こんにちは!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