コーディングした成果物を友人だけに見せるには

Question

コーディングした成果物を友人だけに見せたいのですが、ファイルを送ってもcssが反映されてない状態で表示されます。
どうすれば良いでしょうか？

Answer 1

ご友人に、「圧縮ファイルをダブルクリックして、中にあるHTMLファイルをダブルクリックしたのでは?」と尋ねてください。

Windows標準の設定(エクスプローラーがZIPファイルに関連付けされている)では、ZIPファイルの内容が仮想フォルダーとしてシームレスにエクスプローラーの画面内に表示されます。ディレクトリ(フォルダー)ごと圧縮したのであれば、最初のダブルクリックでそのフォルダーが表示され、フォルダーをダブルクリックすることでフォルダー内のファイル一覧が表示されます。
この状態でファイル(たとえばHTMLファイル)をダブルクリックすると、一時的にそのファイルが展開され、ファイルに関連付けられたアプリ(たとえばブラウザー)によって表示されますが、残りのファイル(たとえばCSSファイル)は連動して展開されたりはしません。つまり、HTMLファイルだけの状態と同じ結果になります。

確認がとれたなら、あなたから「ZIPファイルを適当なフォルダーに展開した後でHTMLファイルをダブルクリックする」という手順を、ご友人のスキルに合わせて提示してください。

Answer 2

コーディングした成果物を友人だけに見せるには

やりたいこととしては、「成果物を特定のお客に見せたい」って場合と同じですね。
思いつくままに書きますｗ

動作環境をお客が用意する場合

最終的にお客の PC やサーバで動作しなければならない場合は、要件から
「お客が動かせない」= 「成果物として成立していない」
状態です。
まず、お客の環境を再現して、動くように修正することが必要です。
お客の環境で動作する状態まで整理できたのであれば、

• お客の環境で動かすための手順書を作成する
• 自身でセットアップに伺う(リモートって手もあり)

不特定多数向けのアプリは動作確認がしんどいです。。。

動作環境をお客が用意しない場合

Web サイト等がコレに当たります。
CSS とあるので本件はこっちでしょうか？

• 適当なサーバを立ててアクセスを制限する

→ レンタルサーバやクラウドを使用すれば、制限は簡単に行なえます。
→ 認証/認可での制限も一般的です。適当な環境に、アクセス権限を付与してあげればよいです。

• 動作している状態を動画等で見せる

→ 別に実物に拘る必要は無いです。今どきは、画面共有も簡単に行える会議ツールがたくさんあります。

Answer 3

あまりにも当たり前の回答なので書くかどうか迷いましたが一応

コーディングした成果物を友人だけに見せたいのですが、ファイルを送ってもcssが反映されてない状態で表示されます。

まず友人宅で動かない原因を自分の環境で調査して下さい。

最低限、その成果物を開発ディレクトリ以外の場所に配置して動作するのか、可能であれば、別に実機か仮想マシンを用意して、そこに配置しても動作するのか等。

そうやって原因を特定するところから始めましょう。

Answer 4

どうすれば良いでしょうか？

とりあえず、友人宅に行って原因を探るのがいいでしょう。
おそらく、パスの問題だと思いますが。

Answer 5

反映されない原因を探りましょう、としかいいようがないです。
送ったというファイルで、ファイルが不足してないでしょうか

Comments

[hta]

返信ありがとうございます。
一応ディレクトリを圧縮したものを送ったのですが、、
ファイルが同じ階層にあるのが良くなかったのでしょうか？

[y_waiwai]

コード中のファイルの指定がそうなってるならそんでいいですが。

Answer 6

ひとまずご友人にChromeのデベロッパツールに添付したCSSファイルに関するエラーが出ていないか確認していただくのが良いかと思います。
HTMLないのパスが間違っていたり、CSSファイルが格納されていない状態だと「404」のエラーが出てきているいかと思います。

もし今回ご友人に見せるのが２回目というのであればブラウザキャッシュが残っている（前回のCSSファイルを読んでいる）のかもしれませんね。その場合はキャッシュクリア（ctrl + F5）してください。

Answer 7

返信ありがとうございます。
一応ディレクトリを圧縮したものを送ったのですが何が間違えていたのか、、