Q&A
実際のコードとファイルの階層をご提示ください。
ロリポップ!FTPを使って自作したHPを載せようとしています。
使用PCはiMac、コーディングソフトはAtomです。
FTPにアップロードする際
・htmlとcssを作成するときにブラウザで表示の確認をすると思うのですがそこのブラウザ上でcommand+Sで作成したHPをindex.htmlと名前をつけて保存しこれをFTPにアップロードする。
もしくは
・finder上にあるファイルのindex.htmlや画像、cssファイル1つずつアップロードする
この2つでアップロードを試しているのですが、うまくcssが反映されず...
ファイルのアップロード方法としてどちらが正しいやり方なのでしょうか？
自分なりに調べたのですがそれでも分かりませんでした。
ロリポップFTPを使用してHPをアップロードしている方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願い致します。
--追記--
みなさまご丁寧に回答していただき、ありがとうございます。
教えてくださったことを試してみましたが改善されず...
現在の状況をキャプチャしてみました。
Atomソフトを使ってコードを編集してindexファイルをchromeにドラッグ&ドロップをしたときは正常にhtmlとcssは表示されていました。
以下index.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>© 2019 namae</small> </footer> </body> </html>``` --追記2-- 何度もすみません。 FTPのアップロードでindex.htmlのファイルをFTP上で作成しその中に画像や他のhtmlを追加しました。  HOME(index.html)のトップ画像以外は別のページでちゃんと画像が表示されていました。 cssもindex.htmlの中に入れていますが反映されていません。 cssファイルを入れる場所がおかしいのでしょうか？ --追記3-- FTPのファイルの方、訂正させていただきました。 こちらで間違えないでしょうか？ 何度もお聞きしてしまい、申し訳ありません。 
「CSSが反映されない」はアップロードの仕方とは関係ないと思います。（ファイル自体をアップロードしてないなら「ファイルがそもそも存在しない」になるのでアップロードのやり方の問題とは違います）
コードは下記のようにバッククォート3つで囲うことで複数行にも対応できます。
```html
//ここにコード
```
質問に追記をさせていただきました。
お手数をおかけしますが、確認していただけると幸いです。
よろしくお願い致します。
回答3件
0
ベストアンサー
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/11 14:01
編集2019/06/11 14:05
総合スコア607
ご丁寧にありがとうございます。
試してみましたが反映されず...
今の状況を質問欄に追記しておりますので、お手数ですが確認していただけると幸いです。
よろしくお願い致します。
画像確認しましたが、
index.htmlで参照しているcssは、 ./css/style.cssなのに、
style.cssというフォルダになっているので、参照できていないと思います。
あと、index.htmlというフォルダを作るのではないです。
index.htmlのあるところに、cssというフォルダ(ディレクトリ)を作成してください。
再掲になりますが、
```
/
├── css
│ └── style.css
└── index.html
```
という階層にしてみてください。
今の階層は、
```
/
└ index.html/
├── style.css
│ └── style.css
└── index.html
```
というふうになっています。
index.htmlというディレクトリを作成するのではなく、
index.htmlというファイルをおいてください。
今index.htmlというフォルダの中にindex.htmlがまた入っていると思うのですが、まずそれを、index.htmlというディレクトリがあるところへ移動し、
style.cssというディレクトリ名を、cssという名前にしましょう。
何度もご丁寧に本当にありがとうございます。
以下コードを参考にキャプチャを添付させていただきました。
├── css
│ └── style.css
└── index.html
よろしくお願い致します。
はい、階層としてはそれが正しいです！
これでcssファイルを読み込んでくれると思うのですがどうでしょうか。
リンクから確認したらcssもブラウザで確認した通りに表示されていました！
まだコーディングについて勉強を初めて１ヶ月ほどで自分なりに色々と調べていたのですが、解決策が見つからずここ数日質問に答えてくださった方達の意見を参考にして調整していましたが、中々うまくいかなくって途中で折れちゃいそうになりました。ですが、tail12さんのおかげでHPが出来上がりました...！
何度も質問したにも関わらずご丁寧に答えてくださって本当にありがとうございました！
よかったです！！
> 中々うまくいかなくって途中で折れちゃいそうになりました
最初はそうですよね、、、特にサーバにアップロードってなるといきなり環境変わるし操作はコマンドだし、で慣れるまで大変ですよね。
これからも引き続き、頑張ってください！
本当にありがとうございます！
頑張ります！！
0
finder上にあるファイルのindex.htmlや画像、cssファイル1つずつアップロードする
これでも変更されていない場合は、キャッシュが残っている可能性があります。
シークレットモードで表示させたり、command + R でスーパーリロードを試してみてください
投稿2019/06/11 14:00
総合スコア326
あなたの回答
tips
プレビュー
