ZIPで共有するときのフォルダ構成とindex.htmlの置き方

入口になるのはindex.html

ZIPを展開して公開したとき、URLを開いて最初に表示されるのはindex.htmlです。サイトの入口になるページは、必ずこの名前にしておきましょう。

index.htmlが見当たらないと、どのページを表示すればよいか分からず、思った画面が出ないことがあります。複数のHTMLがある場合でも、トップに見せたい一枚をindex.htmlにすると迷いません。

ファイル名は大文字小文字の違いにも注意してください。Index.htmlのように表記が異なると、環境によっては入口として扱われないことがあります。

index.htmlはルート直下に置く

よくある失敗は、ZIPを作るときにフォルダごと圧縮してしまい、index.htmlがひとつ深い階層に入ってしまうことです。展開するとフォルダの中にさらにファイルがある状態になり、入口が見つかりにくくなります。

理想は、ZIPを展開した直後の一番上の階層、つまりルート直下にindex.htmlがある状態です。中身のファイルを選択してから圧縮すると、余計な親フォルダが付かずに済みます。

画像やCSSはサブフォルダにまとめても問題ありませんが、その場合はindex.htmlからの参照が正しく届くように相対パスを整えておく必要があります。

最短手順：まずこの3ステップで完了

ZIPで共有するときのフォルダ構成とindex.htmlの置き方は、最初に全体像を押さえると迷いません。細かな設定に入る前に、ファイルを準備し、共有条件を決め、公開後に相手と同じURLで確認する流れを作ります。

手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 1. 共有するHTML/ZIPを整理し、不要ファイルや秘密情報を除く
• 2. 認証方式、公開期限、差し替え有無を決めてURLを発行する
• 3. シークレットウィンドウとスマホで開き、相手への依頼文を添えて送る

崩れないZIPを作る手順

フォルダ構成を意識しながらZIPを作る流れをまとめます。手順どおりに作れば、展開後に入口とファイル参照が崩れにくくなります。

1. 入口ページのファイル名をindex.htmlにする
2. index.htmlを一番上の階層に置く
3. 画像やCSSはサブフォルダに整理する
4. index.html内のリンクを相対パスで書く
5. 親フォルダごとではなく中身を選んで圧縮する
6. 展開して入口と画像・CSSが揃うかを確認する

相対パスで参照を保つ

画像やCSSへのリンクは、自分のパソコン内だけで通用する絶対パスではなく、相対パスで書くのが基本です。相対パスならファイル同士の位置関係さえ保てば、公開先が変わっても参照が崩れません。

例えば画像をimgフォルダにまとめたなら、index.htmlからはそのフォルダ名を起点にした相対的な書き方で指定します。階層を移動したらパスもそれに合わせて調整しましょう。

作業中はパソコンのローカルで開いて表示を確認しておくと、ZIPにする前に参照ミスを見つけられます。ローカルで崩れていれば公開しても崩れるため、事前チェックが効きます。

公開後の確認と差し替え

ZIPをドロップして共有URLが発行されたら、まずブラウザで開いて画像やCSSが正しく出ているかを確かめます。CDNのエッジ配信で表示は速いので、崩れがあればすぐ気づけます。

もし一部が崩れていても、フォルダ構成を直したZIPを作り直して、同じURLのまま差し替えられます。リンクを送り直さずに修正版へ更新できるため、構成の試行錯誤も気軽に行えます。