Webページのファイル構成入門｜HTML・CSS・JavaScriptの役割と相対パス

HTMLを書いたのに画像が表示されない。CSSを修正しても、ページの見た目が変わらない。Web制作を始めたばかりのときは、コードそのものではなく、ファイルの保存場所や読み込み先でつまずくことがあります。

ファイル構成で大切なのは、「何を、どこに保存し、どのファイルから読み込むか」を説明できることです。最初から細かく分類する必要はありません。小さな構成で動作を確かめ、必要に応じて整理していきましょう。

この記事では、HTML・CSS・JavaScriptを直接作成する小規模な静的サイトを例に、各ファイルの役割、フォルダの分け方、相対パスの書き方を解説します。WordPressのテーマやフレームワークを使う場合は、それぞれの仕組みに沿った構成が必要です。

１．HTML・CSS・JavaScriptは、それぞれ何を担当する？

HTML・CSS・JavaScriptは、Webページで異なる役割を担う言語です。「３つの言語を使うこと」と「必ず３つのファイルに分けること」は同じではありません。

HTMLだけでもページを作れる

文章やリンクを掲載するだけなら、HTMLだけでページを作れます。見た目を調整したいときにCSSを加え、ボタン操作などに応じた処理が必要になったらJavaScriptを使う、と考えると整理しやすくなります。

例えば、自己紹介ページなら、最初は名前と紹介文を表示するだけで十分です。背景色を変える、画像を追加する、ボタンを押すと説明が切り替わる、と段階的に機能を増やせます。

別ファイルに分けると、変更する場所が分かりやすい

CSSやJavaScriptはHTML内にも記述できます。短い実験や学習用のサンプルで、１つのHTMLファイルにまとめる方法が間違いというわけではありません。

一方、複数ページで同じデザインや処理を使う場合は、外部ファイルに分けると管理しやすくなります。例えば、共通のCSSを複数のHTMLから読み込めば、同じ設定を各ページに書き直す手間を減らせます。

２．小規模なサイトのファイル構成を決める

ここでは、作業用フォルダを「my-site」とし、その中にページと素材を保存する構成を使います。次の表は、my-siteから見た各ファイルの置き場所です。

「css/style.css」は、cssフォルダの中にstyle.cssを置くという意味です。この構成は学習用の一例であり、すべてのWebサイトに共通する必須ルールではありません。

ファイルが少なければ、HTMLとCSSを同じフォルダに置いて始める方法もあります。使わないフォルダや空のファイルを増やすより、現在のページに必要なものを把握することを優先しましょう。

index.htmlは、どこに置いても同じように使える？

index.htmlは、ディレクトリにアクセスした際の入口としてよく使われるファイル名です。ただし、どのファイルが自動的に表示されるかは、Webサーバーや公開サービスの設定に依存します。

作業用フォルダの最上位と、インターネットに公開するフォルダの最上位は、必ずしも一致しません。例えば、GitHub Pagesでブランチとフォルダを公開元にする場合、入口となるファイルは、その公開元フォルダの直下に置く必要があります。

また、company/index.htmlのように、下位のフォルダにindex.htmlを置く構成もあります。「index.htmlは必ずプロジェクト全体の最上位に置く」と覚えるのではなく、どの範囲を公開するのかとセットで確認してください。

フォルダ名は、読み込み側の指定と一致させる

画像フォルダはimagesでもimgでも構いません。CSSの保存先もcssやstylesなど、複数の名前が使われます。

重要なのは、実際のフォルダ名と、HTMLやCSSに書いたパスを一致させることです。フォルダをimagesからimgに変更したら、そのフォルダを参照している記述も直す必要があります。

３．相対パスは「どこから見た場所か」で考える

相対パスは、基準となるURLから対象ファイルまでの位置を表す書き方です。ここでは分かりやすく、通常の静的サイトで、HTMLにbase要素を指定していない場合を考えます。

この条件では、HTMLに書く画像やCSSの相対パスは、そのHTMLのURLを基準に解決されます。同じ画像を使っていても、HTMLの置き場所が変われば、指定するパスが変わることがあります。

「../」は、１つ上の階層へ移動する指定です。pages/about.htmlから共通の画像を参照するなら、pagesの外に戻ってからimagesへ進む、と考えると読み解きやすくなります。

HTMLからCSSと画像を読み込む例

次の記述は、my-site直下のindex.htmlから、CSSと画像を読み込む例です。CSSを読み込むlink要素はhead内に、画像を表示するimg要素はbody内の表示したい場所に書きます。

photo.jpgには実際の画像ファイルを用意し、代替テキストもその画像の内容に合わせて変更してください。ファイル名を書いただけで、画像そのものが作成されるわけではありません。

外部CSSの画像パスは、CSSファイルが基準になる

外部CSSに書くurl()の相対パスは、HTMLではなく、そのCSSファイルのURLが基準です。css/style.cssからimages/photo.jpgを背景画像として使うなら、１つ上の階層に戻る指定が必要になります。

このCSSは、HTML側のclass属性にheroを指定した要素に適用されます。HTMLの画像表示が成功していても、CSS側で同じパスをそのまま使うと、参照先がずれて背景画像を読み込めないことがあります。

先頭の「/」は、プロジェクトフォルダを意味しない

HTTP・HTTPSで表示するページでは、「/images/photo.jpg」のように先頭にスラッシュを付けると、そのサイトのオリジン直下を基準にしたパスになります。自分が作業しているプロジェクトフォルダを自動的に指すわけではありません。

例えば、https://example.com/my-site/で公開しているページから「/images/photo.jpg」を指定すると、読み込み先はhttps://example.com/images/photo.jpgです。my-siteの中の画像を使いたい場合は、公開先の構成に合っているか確認してください。

４．CSSや画像が表示されないときの確認手順

表示がおかしいときは、コード全体を一度に書き換える前に、読み込み先を確かめましょう。次の順番で確認すると、ファイルの問題と記述内容の問題を分けて考えやすくなります。

1. 保存を確認する：編集したファイルを保存し、別の同名ファイルを開いていないか確かめる。
2. ファイル名を確認する：大文字・小文字、拡張子、ハイフンなどが読み込み側の指定と一致しているか調べる。
3. パスを確認する：HTMLと外部CSSのどちらに書いた指定なのかを確認し、基準となる場所からたどる。
4. 読み込み結果を確認する：ブラウザの開発者ツールでNetworkを開いて再読み込みし、目的のファイルの取得結果を見る。
5. 読み込み後の処理を確認する：CSSが取得できているなら適用対象や上書きを、JavaScriptならConsoleのエラーなどを調べる。

HTTPで取得するファイルに404が出ていれば、そのリクエスト先にファイルが見つかっていない可能性があります。取得に成功している場合でも、返ってきた内容が目的のCSSや画像か確認しましょう。

例えば、CSSのURLにアクセスしてHTMLが返ってくる構成では、ステータスだけを見ても原因を判断できません。「どのURLにアクセスしたか」と「何が返ってきたか」を合わせて見ることが大切です。

命名は「禁止事項」と「扱いやすさ」を分ける

日本語や空白を含むファイル名が、一律に使えないわけではありません。ただし、URLでの表現やツール間の扱いに注意が必要になるため、学習用のファイルは半角英小文字・数字・ハイフンを中心にすると管理しやすくなります。

また、画像の実際の名前がPhoto.jpgなのに、HTMLではphoto.jpgと指定していると、環境によって読み込みに失敗します。公開前には拡張子も表示し、index.html.txtのような意図しない名前になっていないか確認してください。

５．手元での確認と、インターネットへの公開は分けて考える

単純なHTMLとCSSのページなら、HTMLファイルをブラウザで直接開いて確認できる場合があります。このときのアドレスは、通常、file://で始まります。

一方、fetchによるデータ取得など、直接開く方法ではブラウザの制限を受ける処理もあります。その場合は、開発用のローカルHTTPサーバーを使い、http://localhostなどのアドレスで確認します。

ローカルサーバーで確認することと、インターネットに公開することは別の工程です。まず手元で表示と操作を確かめ、その後、公開先に必要なファイルを配置して動作を確認しましょう。

公開するファイルの範囲を確認する

作業用フォルダには、ページの素材以外に、メモや設定ファイルが入ることもあります。フォルダ全体を無条件に公開するのではなく、公開先の設定と、配信されるファイルの範囲を確認してください。

ブラウザに配信するHTMLやJavaScriptには、利用者に見られて困る秘密情報を入れないでください。公開後はトップページだけでなく、別ページ、画像、CSS、JavaScriptも確認し、手元との違いを調べます。

６．ファイル構成に関するよくある質問

CSSやJavaScriptは、最初から別フォルダに入れるべきですか？

必須ではありません。数個のファイルで学習する段階なら、同じフォルダに置く構成でも始められます。ファイル数が増えたときや、役割ごとに整理したいときに分け、その際は読み込みパスも更新してください。

reset.cssも必ず必要ですか？

必須ではありません。ブラウザの既定スタイルを調整するために利用することはありますが、目的を確認せず追加する必要はありません。最初は自分のCSSで何を変更しているかを確かめながら進めましょう。

画像の拡張子を変えれば、別の形式になりますか？

ファイル名の末尾を変更するだけでは、画像データの形式は変わりません。PNGをJPEGに変えたい場合などは、画像編集ソフトなどで目的の形式に変換・書き出しを行い、その後で参照先も更新します。

WordPressでも、このフォルダ構成をそのまま使いますか？

そのまま当てはめるものではありません。WordPressでは、テーマやプラグイン、メディアなどの管理方法があります。通常の記事投稿で、この記事の例と同じindex.htmlやcssフォルダを新しく作る必要はありません。

７．まずは「読み込めた理由」を説明できるようにする

ファイル構成は、決まったフォルダ名を暗記するためのものではありません。ページを構成するファイルの役割と参照関係を整理し、変更や不具合の調査を進めやすくするためのものです。

まずはHTMLとCSSを用意し、CSSの文字色を変えて、保存後に表示が変わるか確かめてみてください。次に画像を追加し、「どのファイルから、どのパスで読み込んでいるか」を説明できるか確認しましょう。

• HTML・CSS・JavaScriptの役割を区別できる。
• 実際の保存場所と、コードに書いたパスが一致している。
• HTMLと外部CSSでは、相対パスの基準が異なることを理解している。
• ファイル名の大文字・小文字と拡張子を確認している。
• 公開するフォルダとファイルの範囲を把握している。

小さな変更を加えて結果を確認する経験を重ねると、表示されないときも調べる場所を絞りやすくなります。構成を複雑にする前に、今あるファイル同士のつながりを確かめていきましょう。

参考資料

• MDN：ファイルの扱い
• MDN：Getting started with CSS
• MDN：url()
• MDN：ローカルテストサーバーを用意するには
• GitHub Docs：GitHub Pagesサイトの作成