Atomで作成したもの（テキストエディタ）を他人に公開するには？

前提・実現したいこと

ドットインストールで「はじめてのHTML」「はじめてのCSS」の動画を見ながら、自分の自己紹介サイトを作成しました。
他人に公開したいのですが、やり方が分かりません。
自分のデスクトップにファイルとして自分のサイトを保存できれば、そのあとは何とかなりそうです。
html,cssをいっぺんにデスクトップに保存する方法はありますか？？

試したこと

エックスサーバーは借りています。ドメインもあります。
FFTPをインストールして、サーバーにファイルをアップロードする工程は理解出来ました。
Atomで作成したファイルをデスクトップに保存して、開くと、htmlだけで作成された自己紹介サイトが表示されてしまいます。（写真とかが無い状態）

s8_chu

2019/05/12 10:31

現在質問者さんが付与している「Atom(言語)」タグは、テキストエディタの Atom とは異なるものです。「Atom (テキストエディタ)」タグに修正することで、より回答が得られやすくなると思います。

amyugramu

2019/05/12 10:36

そうだったんですね！知りませんでした。修正します。ありがとうございます。

退会済みユーザー

2019/05/12 12:19

デスクトップに画像ファイルを保存しました？

amyugramu

2019/05/12 12:27

保存しました！

退会済みユーザー

2019/05/12 12:28

それで画像が表示されていないということですか？

amyugramu

2019/05/12 14:18

すみません、なんか変な質問してました。

行動規範の内容に同意します

回答2件

ベストアンサー

FFTPをインストールして、サーバーにファイルをアップロードする工程は理解出来ました。

Atomで作成したファイルをデスクトップに保存して、開くと、htmlだけで作成された自己紹介サイトが表示されてしまいます。（写真とかが無い状態）

そこでデスクトップで開く工程を入れたのはよく分かりませんが、
「Webサイト」で公開したからにはそのドメインのURLにブラウザから直接アクセスさせることになります。
teratail開くときにデスクトップに保存して・・てしてませんよね？

エックスサーバーは借りています。ドメインもあります。

例えばindex.htmlというファイルを作ってアップロードしてブラウザで直接URLでアクセスしたらどうなりますか？
ドメインがexample.comなら http://example.com/　とか。
きちんとアップロードしたindex.htmlが表示されていたらまず成功です。
念のため携帯からもアクセスしてみてください。同じ画面が表示されていたらそれでOKです。他人に（というか全世界に）公開されています。

あとは必要なファイルを全てアップロードすれば良いです。

ただし、よくあるのは、画像、CSS、JavaScriptなどのファイルへのパスです。
もし、相対パスで設定しているならまだいいのですが、絶対パスで設定されていたら修正が必要になるケースがあります。

「絶対パス」と「相対パス」の違い

そこは実際のフォルダ構成とコードを提示されないと何とも言えません。
とりあえずWindowsであればC:/…」と書かれているなら修正は必要です。あくまで「ファイルが置いてある場所」から見たパスになります。大抵のレンタルサーバはWindowsではなくLinux系のOSなのでそのようなパスには書きませんし、
「ブラウザからアクセスできない場所」のパスは書いてもブラウザからはアクセスできません。
「Webルート」といってhttp://example.com/にアクセスしたときに表示させるディレクトリのパスですね。そこをルートパスである`/`としてそこからのパスになります。
（そのあたりこんがらがるのでとりあえず相対パスで統一するのでも良いと思います）

投稿2019/05/12 12:26

m.ts10806

総合スコア80850

amyugramu

2019/05/12 14:07

前回に引き続き今回も分かりやすいアドバイスありがとうございます。デスクトップにファイルを保存するのは私が間違ってました。確かにteratail開くときにデスクトップに保存してません。。。今まで大学の提出物とかをwordで作成してデスクトップで管理していたので、それのクセが出てきてしまいました???? FFFTPにアップロードしてみました。 http://tapiokachan000.com/index.html こちらです。無事、サイトを見ることができました！しかし、ヘッダーの画像だけ表示されないんです。なぜかわかりますか？???? （画像はすべてアップロードしました）

m.ts10806

2019/05/12 21:17 編集

色々考えられたため、一応先手を打っておいたのですが・・・回答の下記からはじまる部分ですね。 >ただし、よくあるのは、画像、CSS、JavaScriptなどのファイルへのパスです「画像が表示されない」にも何通りか確認すべき項目があるので、やはりそこは実際のコードを提示された方が良いです。ただ、自身でも問題の切り分けを行うことが出来ます。大抵のブラウザには「開発者ツール（デベロッパーツール）」というのがついていて、そこで色々確認できます。確認できる項目は多岐にわたるので、色々確認してもらうとして。 https://coliss.com/articles/build-websites/operation/work/chrome-devtools-tips-by-martin.html https://www.doe.co.jp/hp-tips/browser/chrome-devtools-techniques/ 「画像が表示されない」「CSSが適用されていない」「JavaScriptが動作していない」ときに最初に確認するのはGoogleChromeであれば「Console」のタブです。ここで赤字でエラーが表示されていればそれを確認します。もし英語が苦手でしたらGoogle翻訳を利用すると良いでしょう。エラーといっても何かしらコンピュータに悪影響を及ぼすものではなく例えば「構文が間違っている（特にJavaScriptの場合）」とか「指定したファイルが存在しない」といった「HTML上で起きている問題」を教えてくれるものなので焦らずまずそのエラーの意味を調べましょう。 https://qiita.com/cannorin/items/eb062aae88bfe2ad6fe5 たいていはどこかで誰かが同様のエラーに遭遇していて色々対策した記事を投稿しています。今回は初めてでしょうから先に言っておきますと私の回答にある、 CSSファイルが”「ブラウザからアクセスできない場所」のパスは書いてもブラウザからはアクセスできません。”にあたります。 http://tapiokachan000.com/css/styles.css ※Chromeであれば「ソースを表示」を見るとリンクになっているのでクリックで直接CSSファイルにアクセスできます CSSのパスが間違っているのか、CSSがアップロードしていないのか、CSSファイルが破損しているのかそこまではここからは分かりませんので、ご自身で確認していただく必要がありそうです。ただ「css/styles.css」とリンク指定されていますので、指定が書いてあるファイルから見た相対パスにそのファイルが置いてある必要があります。 ※たまに「ファイル名に見えない文字列が入っていた」ということもあるので、そこも気を付けてみてください。ちなみ、ですが、今回の確認方法は自身のPC上で作業している場合でも有効です。若干拡大解釈ではありますが、自身のPCで作業している場合は自身のPCが「Webサーバー」となります。 ※自身のPCを本当にWebサーバーとして本当に外部に公開することもできますが、設定だったり運用だったりセキュリティ対策だったり、あまりよく知らずに手を出すと危険なのでここではすすめません。今回質問者さんがされたようにレンタルサーバー借りるのが確実です

amyugramu

2019/05/12 23:16

初心者なもので、一から教えて頂いてありがとうございます。 HTMLに書いてあるCSSのリンクが間違っていたようです。理解したことを以下にまとめます今まで、 ①FFFTPを通してエックスサーバーにアップした ②初めてアップロードするため、訳が分からず、なんとなくcssフォルダの中にstyles.cssが入ってるものと、styles.css単体をどちらもアップした ③htmlに<link rel="stylesheet" href="css/styles.css">と書いていたため、cssを読み取りできなかった（cssフォルダのなかにstyles.cssが入っていたがFFFTPでは読み取れない。読み取れるのはstyles.cssファイルのみ。フォルダの中まで読み取ってくれないため、css単体のファイルを載せるべき）解決法↓ <link rel="stylesheet" href="css/styles.css">を<link rel="stylesheet" href="styles.css">にするこれでHP作成できました。本当にありがとうございます。 http://tapiokachan000.com/index.html こちらが出来上がったページです。

m.ts10806

2019/05/13 00:00

考え方を逆にすれば間違いは減るかもしれません。「用意したものを使う」 CSSもHTMLから見たら自らを装飾するための「道具のひとつ」なので、とりあえずリンクだけしても実際にその道具が指定した場所に用意されていないと使うことはできません。なので「先に道具を用意しておいて、道具を置いた場所から取り出す」イメージですると「置いてある場所を指定する」形になるので間違いは減ります。サーバーにアップロードする場合最も同じで、「先に道具をアップロードしておく」ことでHTMLファイルからリンクしているファイル(画像、CSSなど)が既にある状態となるので HTMLがアップロードされるときには既に使える状態になっているということになります。はじめのうちはファイル名もコピペするくらいがちょうど良いと思います。また何かしら想定する動きになっていないとか、反映されていないとなったときは私がコメントで提示したようにブラウザの開発ツールを確認する癖をつけておくと、自己解決できることも増えてきますし、質問するにしても「こういうことを確認してこういうことが分かっている」ことが情報として記載することができますので、的確で迅速な解決に至りやすくなります。

行動規範の内容に同意します

画像のフォルダー名やファイル名など、画像のパスが間違っていませんか？

また、一部の画像（header画像など）だけが表示されていないのであれば、CSSが読み込まれていないかもしれません。

css
1header {
2　/*省略*/
3  background-image:
4  url(../img/amyuheader.jpg);
5  /省略
6}

投稿2019/05/12 12:40

退会済みユーザー

総合スコア0

amyugramu

2019/05/12 13:36

アドバイスありがとうございます。画像のパス確認したのですが、合っていました。すべて読み込まれてないので、たぶんHTMLだけ保存されているのだと思います、、、。一緒に保存したいのですがいい方法が見つからなくて、、。調べてみます。ありがとうございます。

退会済みユーザー

2019/05/12 13:44

CSSを何らかの理由で保存できないなら、HTMLの中に書くことができます。今回の場合、 <link rel="stylesheet" href="css/styles.css">の部分を削除して、<style></style>と書き、この中にCSSを記述することで、HTMLファイルの中にCSSを埋め込めます。

amyugramu

2019/05/12 14:18

アドバイスありがとうございます！そういうやり方があるんですね！たしかにそれいけますね。ありがとうございます！

行動規範の内容に同意します

あなたの回答