WSL（Windows Subsystem for Linux）を使ってホームページ制作を始めると、作成したHTMLファイルをどのようにWindows側で開けばよいのか迷うことがあります。特にLinux環境内で作成したファイルは、Windowsのエクスプローラーから直接見つけにくいため、保存場所やChromeでの確認方法が分かりづらい場合があります。この記事では、WSLで作成したWebページをWindowsのブラウザで表示する方法や、ファイルを管理する基本的な方法について解説します。
WSLで作成したHTMLファイルはWindowsから確認できる
WSLはWindows上でLinux環境を動かす仕組みですが、Linux側で作成したファイルはWindows側からアクセスできます。
例えば、WSL上で「index.html」というホームページ用ファイルを作成した場合、そのファイルはWSL専用の領域に保存されています。しかし、WindowsのエクスプローラーからWSLのファイルシステムを開けば、そのまま確認やコピーが可能です。
Windowsのエクスプローラーのアドレス欄に「\\wsl$」と入力すると、利用しているLinux環境のファイル一覧を表示できます。
WSLで作成したHTMLをChromeで表示する方法
作成したHTMLファイルをChromeで確認する場合、必ずしもWindows側へコピーする必要はありません。
まず、WSL内でHTMLファイルを保存した場所を確認します。例えばホームディレクトリ内に「index.html」を作成した場合、Windows側からそのファイルを開くことができます。
具体的には、エクスプローラーで「\\wsl$\Ubuntu\home\ユーザー名\index.html」のような場所を開き、HTMLファイルをダブルクリックすると、Chromeなどのブラウザで表示できます。
WSLからWindows側へファイルをコピーする方法
Web制作を続ける場合、Windows側のフォルダにHTMLやCSSファイルを保存して管理すると扱いやすくなります。
WSLのターミナルでは「cp」コマンドを使ってファイルをコピーできます。例えば、作成したindex.htmlをWindowsのデスクトップへコピーする場合は、Windows側のパスを指定してコピーします。
また、エクスプローラーで「\\wsl$」を開き、ファイルをドラッグ＆ドロップする方法でもコピーできます。初心者の場合はこちらの方法が分かりやすいでしょう。
WSLで作成したファイルを保存する基本的な考え方
WSL上で作業している場合、保存操作は通常のLinuxと同じです。テキストエディタやコマンドラインのエディタでファイルを書き込み、保存することでデータが残ります。
例えば、nanoというエディタを使っている場合は、編集後にCtrlキーとOキーで保存し、CtrlキーとXキーで終了できます。
Visual Studio Codeを利用している場合は、WSL拡張機能を使うことで、Windows上のエディタからWSL内のファイルを直接編集できます。Web制作ではこの方法がよく利用されています。
WSLで作成したページがChromeで開けない場合の確認ポイント
HTMLファイルを開いても表示されない場合は、ファイル名や保存場所を確認しましょう。
よくある原因として、拡張子が「.html」ではなく「.txt」になっている、ファイルの場所を間違えている、HTMLタグの記述ミスがあるなどがあります。
例えば「index.html.txt」という名前になっている場合、ブラウザはWebページとして認識できません。Windows側で拡張子を表示する設定にして確認すると原因を見つけやすくなります。
Web制作ではWSLとWindowsを使い分けると便利
WSLはLinux環境でWeb開発を行えるため、サーバー環境に近い状態でHTMLやプログラムを作成できるメリットがあります。
一方で、画像編集やブラウザ確認などはWindows側のアプリを利用した方が便利です。そのため、作成作業はWSL、確認や管理はWindowsというように使い分ける方法がおすすめです。
例えば、WSLでHTML・CSS・JavaScriptを編集し、完成したページをChromeで確認するという流れにすると、実際のWeb制作に近い環境で学習できます。
まとめ｜WSLのファイルはWindowsからアクセスしてChromeで確認できる
WSLで作成したホームページ用ファイルは、Linux環境内に保存されていますが、Windowsのエクスプローラーからアクセスできます。
「\\wsl$」を利用すればファイルを確認したりコピーしたりでき、作成したHTMLをChromeで表示することも可能です。
Web制作では、WSLの開発環境とWindowsの操作環境を組み合わせることで効率よく作業できます。まずはファイルの保存場所を把握し、Chromeで表示する流れを覚えるとスムーズにホームページ制作を進められます。
コメント