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

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

ただいまの
回答率

89.10%

ロリポップFTPを使用したHPアップロードについて

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 674

mm_my

score 11

ロリポップ!FTPを使って自作したHPを載せようとしています。

使用PCはiMac、コーディングソフトはAtomです。

FTPにアップロードする際
・htmlとcssを作成するときにブラウザで表示の確認をすると思うのですがそこのブラウザ上でcommand+Sで作成したHPをindex.htmlと名前をつけて保存しこれをFTPにアップロードする。

もしくは

・finder上にあるファイルのindex.htmlや画像、cssファイル1つずつアップロードする

この2つでアップロードを試しているのですが、うまくcssが反映されず...

ファイルのアップロード方法としてどちらが正しいやり方なのでしょうか?

自分なりに調べたのですがそれでも分かりませんでした。
ロリポップFTPを使用してHPをアップロードしている方がいらっしゃいましたら教えていただけると幸いです。

よろしくお願い致します。

--追記--
みなさまご丁寧に回答していただき、ありがとうございます。
教えてくださったことを試してみましたが改善されず...

現在の状況をキャプチャしてみました。

ファイル階層とロリポップFTPにアップロードした画面です
1,データをアップロード後ロリポップで作成したリンクから飛んだ画面の状態です
1と同様

Atomソフトを使ってコードを編集してindexファイルをchromeにドラッグ&ドロップをしたときは正常にhtmlとcssは表示されていました。

以下index.htmlのコードになります。

<!DOCTYPE html> <html lang="ja"> <head>   <meta charset="utf-8">   <title>名前 ポートフォリオサイト</title>   <meta name="description" content="名前のポートフォリオサイトです。"/>   <link rel="icon" href="img/favicon.ico"/>   <link rel="stylesheet" href="./css/styles.css" type="text/css"/> </head> <body> <header>   <a class="logo_icon1" href="index.html"><img src="img/rogo.png" width="100px" height="40px">     <nav id="global_navi">       <ul>         <li><a href="index.html">HOME</a></li>         <li><a href="profile.html">PROFILE</a></li>         <li><a href="gallery.html">GALLERY</a></li>         <li><a href="coding.html">CODING</a></li>       </ul>     </nav> </header> <main>   <div id="main_home">   <img src="img/top.png" alt="メイン画像1" width="500px" height="596px"> </div> <div class="square_01" style="width:0px; height:596px; border:solid 7px black;"></div> <img class="font1" src="img/font_02.png" alt="題名"> <p class="haikei"></p> </main> <footer class="copy_01">   <small>&copy; 2019 namae</small> </footer> </body> </html>

--追記2--

何度もすみません。
FTPのアップロードでindex.htmlのファイルをFTP上で作成しその中に画像や他のhtmlを追加しました。

イメージ説明

HOME(index.html)のトップ画像以外は別のページでちゃんと画像が表示されていました。
cssもindex.htmlの中に入れていますが反映されていません。
cssファイルを入れる場所がおかしいのでしょうか?

--追記3--
FTPのファイルの方、訂正させていただきました。
こちらで間違えないでしょうか?

何度もお聞きしてしまい、申し訳ありません。

イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/06/12 09:30

    実際のコードとファイルの階層をご提示ください。

    キャンセル

  • m.ts10806

    2019/06/12 09:31

    「CSSが反映されない」はアップロードの仕方とは関係ないと思います。(ファイル自体をアップロードしてないなら「ファイルがそもそも存在しない」になるのでアップロードのやり方の問題とは違います)

    キャンセル

  • m.ts10806

    2019/06/12 22:10

    コードは下記のようにバッククォート3つで囲うことで複数行にも対応できます。
    ```html
    //ここにコード
    ```

    キャンセル

  • mm_my

    2019/06/12 22:11

    質問に追記をさせていただきました。
    お手数をおかけしますが、確認していただけると幸いです。
    よろしくお願い致します。

    キャンセル

回答 3

checkベストアンサー

+2

htmlとcssを作成するときにブラウザで表示の確認をすると思うのですがそこのブラウザ上でcommand+Sで作成したHPをindex.htmlと名前をつけて保存しこれをFTPにアップロードする。

ブラウザでcommand + sで保存しなくても、すでにブラウザで表示できているのでしたら、index.html(もしくはその他のhtmlファイル)があると思います。

一般的には、

finder上にあるファイルのindex.htmlや画像、cssファイル1つずつアップロードする

こちらですね。

この2つでアップロードを試しているのですが、うまくcssが反映されず

もしかするとCSSをおいている場所が悪いのかもしれないです。
index.htmlから参照している場所が、同じ階層になっているでしょうか。

├── css
│   └── style.css
└── index.html


こういう階層になっている場合、

<link rel="stylesheet" href="./css/style.css" type="text/css" />


と指定する必要があります。

しかし、

├── style.css
└── index.html

という階層の場合は、

<link rel="stylesheet" href="./style.css" type="text/css" />

と指定します。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/13 22:40

    リンクから確認したらcssもブラウザで確認した通りに表示されていました!
    まだコーディングについて勉強を初めて1ヶ月ほどで自分なりに色々と調べていたのですが、解決策が見つからずここ数日質問に答えてくださった方達の意見を参考にして調整していましたが、中々うまくいかなくって途中で折れちゃいそうになりました。ですが、tail12さんのおかげでHPが出来上がりました...!
    何度も質問したにも関わらずご丁寧に答えてくださって本当にありがとうございました!

    キャンセル

  • 2019/06/13 22:43

    よかったです!!

    > 中々うまくいかなくって途中で折れちゃいそうになりました
    最初はそうですよね、、、特にサーバにアップロードってなるといきなり環境変わるし操作はコマンドだし、で慣れるまで大変ですよね。

    これからも引き続き、頑張ってください!

    キャンセル

  • 2019/06/13 22:50

    本当にありがとうございます!
    頑張ります!!

    キャンセル

+2

CSSもHTMLと同じ階層にアップロードされてますね。
./css/styles.cssという指定のままCSSにアクセスしたいのでしたら
フォルダごとアップロードしてください。

画像などほかでも同様。ローカルで作業しているのでしたらフォルダもそのままアップロードしましょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/13 22:42

    ご丁寧に質問に答えていただきありがとうございました!

    キャンセル

0

finder上にあるファイルのindex.htmlや画像、cssファイル1つずつアップロードする

これでも変更されていない場合は、キャッシュが残っている可能性があります。

シークレットモードで表示させたり、command + R でスーパーリロードを試してみてください

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/06/13 22:42

    ご丁寧に質問に答えていただきありがとうございました!

    キャンセル

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

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