HTML/CSS開発で画像読み込みエラーに直面したらローカルサーバーを設置しよう

HTMLとCSSの学習を始めた際、ローカルに保存したHTMLファイルをブラウザで開こうとしましたが、画像が表示されませんでした。ブラウザのコンソールで確認すると、「Failed to load resource: net::ERR_FILE_NOT_FOUND」というエラーメッセージが出ていました。これはブラウザのセキュリティ制限が原因であることが考えられます。

この問題を解決するために、ローカルサーバーを設置しました。設置方法は以下の通りです。

Rubyを使用する場合

以下のコマンドで必要なgemをインストールし、サーバーを起動します。

gem install webrick
ruby -run -e httpd . -p 8000

Node.jsを使用する場合

パッケージ管理ツールに応じて、以下のコマンドでhttp-serverをインストールし、サーバーを起動します。

# yarnを使用する場合
yarn global add http-server
# npmを使用する場合
npm install -g http-server
http-server

サーバー起動後、表示されるポート番号に応じてブラウザのURLに入力します。例えば、以下のように表示された場合、

Available on:
  http://127.0.0.1:8080
  http://192.168.1.13:8080

ブラウザで http://localhost:8080 を入力してアクセスします。

そうすることで画像が表示されるようになるはずです。