CSSやJSが別ファイルだから見た目が崩れる
サイトの見た目はCSS、動きはJS、画像は画像ファイルが担っています。これらはHTMLの中に「この場所にあるファイルを読み込む」と指定されているだけで、実体はHTMLとは別のファイルです。
そのため、HTMLファイルだけを共有すると、CSSが効かずに飾りのない表示になったり、JSが読み込まれずにボタンが反応しなかったりします。元の見た目と動きを保つには、CSS・JS・画像をHTMLと同じ構成のまままとめて扱う必要があります。
一式をまとめて共有する一般的な方法
CSS・JS・画像を含むサイトをまとめて共有する方法としては、フォルダ一式をZIPに圧縮する、サーバーにフォルダ構成のままアップロードする、ホスティングサービスにデプロイする、といった選択肢があります。いずれも関連ファイルをすべて含めることが前提です。
外部から読み込む形のCSSやJSを使っている場合は、それらが公開先からも読み込めるかも確認が必要です。手元のフォルダ内に置いたファイルでまとまっていれば、ZIPにまとめるだけで一式を再現できます。
- HTML・CSS・JS・画像をまとめてZIPに圧縮する
- サーバーにフォルダ構成のままアップロードする
- ホスティングサービスにデプロイして公開する
崩れないZIP構成のOK/NG例
CSS・JS・画像入りのサイトをZIPでまとめて公開では、ZIPの中身が正しくても、階層が1つずれるだけで画像やCSSが読み込めなくなります。圧縮する前に、公開用フォルダだけを切り出して確認します。
Windows/Macどちらでも、不要な隠しファイルや作業ファイルを入れないことが大切です。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- OK: index.html と assets/images/css/js が想定した相対パスで並んでいる
- NG: ZIPの中にさらに不要な親フォルダがあり、index.htmlの場所が分かりにくい
- NG: __MACOSX、.DS_Store、作業中PSD、秘密情報入りメモを同梱している
- 確認: アップロード後のURLで画像・CSS・リンクを実際に開く
相対パスを維持することが崩さないコツ
CSS・JS・画像が崩れずに読み込まれるかどうかは、それらの指定が「相対パス」で書かれているかにかかっています。css/style.cssやjs/main.jsのように、フォルダからの相対的な位置で指定されていれば、フォルダ構成を保ったまま移動しても読み込めます。
逆に、パソコン内の絶対パスで指定されていると、別の環境では読み込めません。公開前にHTMLを確認し、CSS・JS・画像の指定がすべて相対パスになっているか見ておくと、崩れを防げます。
ZIPなら相対パスを保ったまままとめて公開できる
HTMLとCSS・JS・画像を一緒にZIPへまとめておけば、フォルダ構成と相対パスの関係がそのまま保たれます。HTMLから見た各ファイルの位置が変わらないため、見た目も動きも手元と同じように再現できます。
ギガサイト便はCSS・JS・画像を含むフォルダ一式をまとめてアップでき、index.htmlを入口に元の構成のまま表示します。相手は解凍せずにURLを開くだけで、スタイルも動きもそろった状態のサイトを閲覧できます。
ギガサイト便で一式まとめて公開する手順
実際にCSS・JS・画像を含むサイトをZIPで公開する流れを順番に見ていきます。ポイントは、関連ファイルをすべて同じ親フォルダにそろえ、相対パスを保ったまま圧縮することです。
下記の手順は数分で完了します。公開前にZIPの中身を確認し、CSS・JS・画像のフォルダがHTMLと同じ構成で入っているか見ておけば、崩れる心配はほとんどありません。
- index.htmlとcss・js・imagesなどのフォルダを、一つのフォルダにまとめる
- HTML内のCSS・JS・画像の指定が相対パスになっているか確認する
- そのフォルダの中身をZIPに圧縮する（フォルダ構成と相対パスを保つ）
- ギガサイト便のトップに、作成したZIPをドラッグ&ドロップする
- 認証方式と公開期限を設定し、発行されたURLで見た目と動きを確認する
よくある質問
CSSは効くのにJSだけ動かないのはなぜですか？
JSファイルの置き場所や名前が、HTMLの指定と一致していない可能性があります。jsフォルダの位置やファイル名を確認し、相対パスで正しく指定されているか見てください。また、外部から読み込む形のJSを使っている場合は、その読み込み先が利用できるかも確認するとよいでしょう。
外部のCSSやJSを読み込むサイトも公開できますか？
公開できますが、外部から読み込むファイルは公開先からもアクセスできる必要があります。インターネット上の一般的な配布元から読み込んでいれば通常は問題ありません。確実に再現したい場合は、CSSやJSをフォルダ内に置いて相対パスで読み込む形にまとめておくと安心です。
相対パスかどうかはどこを見ればわかりますか？
HTML内のCSS・JS・画像の指定が、css/style.cssのようにフォルダ名から始まっていれば相対パスです。逆に、ドライブ名やフルパスから始まっていれば絶対パスで、別の環境では読み込めません。絶対パスがあれば相対パスに直してから圧縮してください。
相手は見た目を再現するために何か必要ですか？
いいえ、特別な準備は不要です。ギガサイト便はCSS・JS・画像を含むフォルダ一式を元の構成のまま表示するため、相手は発行されたURLを開くだけで、スタイルも動きもそろったサイトを閲覧できます。解凍やソフトのインストールは必要ありません。
ZIPを作る前に何を確認すべきですか？
index.htmlの場所、CSS/画像/JSの相対パス、不要な隠しファイル、秘密情報の混入を確認します。圧縮後ではなく、公開用フォルダを作った段階で一度ブラウザ表示してください。