VSCodeで作成したHTML/JS/CSSがGitHubでタイトルしか表示されない原因と対策

VSCodeで作成したWebページをGitHubにアップロードしてURLを開いたとき、タイトルだけしか表示されない問題はよくあります。この記事では、HTML、JavaScript、CSSを用いたWebページで起こる原因と解決策を解説します。

相対パスとリポジトリ構造の確認

GitHub Pages上では、ファイルの配置と相対パスが正しくないとCSSやJavaScriptが読み込まれず、見た目や動作が崩れることがあります。

例えば、VSCodeではローカルで ./css/style.css が読み込めても、GitHub Pagesではリポジトリルートからのパスが必要な場合があります。href="/css/style.css"のように絶対パスを確認しましょう。

外部JSファイルを <head> 内で読み込んでいる場合、DOMが完全に読み込まれる前にスクリプトが実行され、要素が操作できないことがあります。

対策としては、<body> の最後にスクリプトを置く、または defer 属性を付けることで、ページ描画後にJSが実行されるようにします。

GitHub Pagesは特定のファイル形式や拡張子に対してMIMEタイプを自動判定します。HTML以外の拡張子や特殊文字を含むファイル名は正しく読み込めないことがあります。

CSSやJSファイルは拡張子を正しくし、ファイル名に日本語や空白を含めないことが重要です。

GitHub Pagesにアップロード後、古いJSやCSSがキャッシュされて表示が崩れる場合があります。

ブラウザのキャッシュをクリアするか、ファイル名にバージョン番号を付加して読み込ませる方法で解決できます。

VSCodeで作ったWebページがGitHubでタイトルしか表示されない場合、主な原因は相対パスの誤り、JS読み込みタイミングの問題、ファイル形式やMIMEタイプの不一致、ブラウザキャッシュです。

対策として、パスをリポジトリ構造に合わせて修正し、JSはdefer付きで読み込み、キャッシュクリアやファイル名管理を行うことで、GitHub Pagesでも正しく表示されるようになります。