絶対パスの /index.html
という書き方ですと、環境次第かもしれませんが、そのままローカルで確認することができません。たとえばWindowsで、ユーザーフォルダのドキュメント以下に www というフォルダ(C:\Users\<ユーザー名>\Documents\www\)を作成して、そこに index.html と絶対パス(/style.css
)で指定したCSSファイルを入れてブラウザ(Firefox)で開いても反映されません。ソースで確認してみると、CSSファイルのアドレスが file:///C:/Users/<ユーザー名>/Documents/www/style.css ではなく file:///style.css になっているみたいなんですね。この場合、ブラウザが判別するドメイン? に相当する部分が file:/// ということなのかもしれません(/C:/Users/<ユーザー名>/Documents/www/style.css
のように指定したらちゃんと読み込まれました)
/index.html
や /style.css
のような書き方で、ローカルで確認するにはどうすればよいかという話になりますが、ひょっとしたらもっと簡単な方法があるかもしれませんけど、WWWサーバーを立てるという方法をとりました。C:\Users\<ユーザー名>\Documents\www\ をドキュメントルート(WEB公開用の仮想的なルート)にするということですね。もちろんサーバーといっても本格的なものでなくて簡易的なものですし、さらに言えばVS Codeの拡張機能として提供されているものです。本当にVS Codeはいろいろなことができますね。もちろんそれらの拡張機能を作ってくださる人のおかげであることは言うまでもありません。
今回、利用したのは「Preview on Web Server」という拡張機能です。かんたんな使い方としては、ファイルを開いている状態で右クリック>vscode-preview-server: サイドパネルでプレビュー表示(Ctrl+Shift+V)もしくは vscode-preview-server: ブラウザーで起動(Ctrl+Shift+L)を選ぶだけです。サーバーの機能を停止するには、表示>コマンドパレット(Ctrl+Shift+P) で vscode-preview-server: Webサーバーを停止(Ctrl+shift+S)を選びます。
VS Codeのエクスプローラー(Ctrl+Shift+E)に表示されるワークスペースに登録されているフォルダがドキュメントルートになるようですので、そのフォルダ(サブフォルダ含む)以外に存在するファイルを開こうとすると、Cannot GET~と表示されてエラーになります。またデフォルトのポート番号が8080番ですので、他のサービスで利用している場合は変更する必要があります(拡張機能の設定にある Preview Server:Port で変更します)
WWWサーバーとしての機能はもちろんですけれども、VS Codeで変更を加えてセーブをすると、サイドパネルのプレビュー表示はもちろん、ブラウザも自動的にリロードしてくれるので、とても便利です。▲