質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.82%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,314

amyugramu

score 16

前提・実現したいこと

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

試したこと

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • amyugramu

    2019/05/12 21:27

    保存しました!

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/05/12 21:28

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

    キャンセル

  • amyugramu

    2019/05/12 23:18

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

    キャンセル

回答 2

checkベストアンサー

+3

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 23:07

    前回に引き続き今回も分かりやすいアドバイスありがとうございます。

    デスクトップにファイルを保存するのは私が間違ってました。確かにteratail開くときにデスクトップに保存してません。。。今まで大学の提出物とかをwordで作成してデスクトップで管理していたので、それのクセが出てきてしまいました💦

    FFFTPにアップロードしてみました。
    http://tapiokachan000.com/index.html
    こちらです。
    無事、サイトを見ることができました!
    しかし、ヘッダーの画像だけ表示されないんです。なぜかわかりますか?💦
    (画像はすべてアップロードしました)

    キャンセル

  • 2019/05/13 06:08 編集

    色々考えられたため、一応先手を打っておいたのですが・・・
    回答の下記からはじまる部分ですね。
    >ただし、よくあるのは、画像、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サーバーとして本当に外部に公開することもできますが、設定だったり運用だったりセキュリティ対策だったり、あまりよく知らずに手を出すと危険なのでここではすすめません。
    今回質問者さんがされたようにレンタルサーバー借りるのが確実です

    キャンセル

  • 2019/05/13 08: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
    こちらが出来上がったページです。

    キャンセル

  • 2019/05/13 09:00

    考え方を逆にすれば間違いは減るかもしれません。
    「用意したものを使う」
    CSSもHTMLから見たら自らを装飾するための「道具のひとつ」なので、とりあえずリンクだけしても実際にその道具が指定した場所に用意されていないと使うことはできません。
    なので「先に道具を用意しておいて、道具を置いた場所から取り出す」イメージですると「置いてある場所を指定する」形になるので間違いは減ります。
    サーバーにアップロードする場合最も同じで、「先に道具をアップロードしておく」ことでHTMLファイルからリンクしているファイル(画像、CSSなど)が既にある状態となるので
    HTMLがアップロードされるときには既に使える状態になっているということになります。
    はじめのうちはファイル名もコピペするくらいがちょうど良いと思います。

    また何かしら想定する動きになっていないとか、反映されていないとなったときは私がコメントで提示したようにブラウザの開発ツールを確認する癖をつけておくと、自己解決できることも増えてきますし、質問するにしても「こういうことを確認してこういうことが分かっている」ことが情報として記載することができますので、的確で迅速な解決に至りやすくなります。

    キャンセル

+1

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

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

header {
 /*省略*/
  background-image:
  url(../img/amyuheader.jpg);
  /省略
}

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/12 22:36

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

    キャンセル

  • 2019/05/12 22:44

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

    キャンセル

  • 2019/05/12 23:18

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.82%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る