🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2007閲覧

サーバーへのアップロードをしたもののcssが反応しない

退会済みユーザー

退会済みユーザー

総合スコア0

FTP

FTP(File Transfer Protocol)は、ネットワークでのファイル転送を行うための通信プロトコルの1つである。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/03/30 17:42

編集2021/04/05 02:36

こんにちは、相変わらずプログラミングを一から独学してHPを自作している者です!

どうにか山あり谷ありを越えてローカル環境で理想的なホームページを作ることができました。
いざ契約!ということで
さくらサーバーを契約し、Mac用FTPの『Transmit』を使って接続!のちに 『www』フォルダの中に転送! していざ検索! してみたところ……

どうやらホームのhtml一枚しか読み込まれておりません! cssのないモノクロで、画像もちっちゃいアイコンみたいになっちゃってて、list-style:none;にしたはずの<li>の前に点がついている始末です。クリックしても他のhtmlページに飛びません。

絶望です!

エラーメッセージは

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://kanamijp.com/css/design.css".

Uncaught SyntaxError: Unexpected token '<'

の2つです。どなたか意味を教えてください。
HP制作がこんなに大変だなんて…オススメのMAC用FTPも知りたいです。
よろしくお願いいたします

追記:
cssはhtmlとは別に外部cssで記述しています。
htmlには

<link type="text/css" href="css/design.css" rel="stylesheet"> を全てのページの<head>部分に記述しています

追記2021/3/31:
[Uncaught SyntaxError: Unexpected token '<']に関しては 該当のhtmlに不要な'<'が記載されているという意味であることがわかりました。現在全力で探しています。

追記2021/3/31 AM11:32:
現状転送時に何か不明な現象が起きてしまったとしか思えないので
●別のFTPを使用してアップしてみる
●一ページずつ転送前と後とで見比べてみる
を試します。ご回答いただいたみなさま、ありがとうございました。

追記2021/4/5
お疲れさまです。なんやかんやありましたが、今回の問題、解決しませんでした。別のFTP(FileZilla)でもアップしましたが同様の表示になり、サーバー側に問い合わせましたが、ファイルが書き換えられることはあり得ない、という回答でした。お手上げです。この度は一旦公開を諦めます。
もしかしたらなんやかんやしているときにサーバー側のデフォルトフォルダを消してしまったかも知れず(影響ないはずとの、回答でしたが...)
一旦契約をキャンセルし、再びホームページ欲がわいたら挑戦したいと思います。

何冊かHP作成の本やらTransmit も公式版(¥5000くらいする)買ってしまったので公開にこぎつけたかったのですが~!無念です!

回答いただいた皆様、誠にありがとうございました!

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2021/03/31 01:46

もしかして、svgとか読み込んだりしてませんか?
退会済みユーザー

退会済みユーザー

2021/03/31 01:53

調べましたが画像フォーマットみたいですね! 残念ながら読み込んでおりません。 jpgはhtmlと同じフォルダにさらにフォルダを作って保存しており一枚ずつリンクしております。ローカルプレビュー時は反映されていたので階層ミスでもないようです...。
dit.

2021/03/31 02:17

すべてのファイルが作成時のままの構造でアップされていますか? 絶対に存在しないようなアドレスで試したところindex.htmlと同じものが表示されたので、サーバーの設定などで404の代わりにindex.htmlが表示される状態になっているような気がします(憶測)。 そのためcssや画像、jquery-3.6.0.min.jsも全てindex.htmlとして扱われている→jsやcssとして誤った記述になっている ということかもしれません。
退会済みユーザー

退会済みユーザー

2021/03/31 02:30

作成時のままでアップはされています。(Transmitを2つに分割してhtml一式が入っているフォルダの中身を「www」というさくらサーバー指定のフォルダの中に一括転送→「www」フォルダを開くと、htmlを入れていた「kanamiworks」フォルダと同じ階層、ファイル数になります) ということはやはり転送時にどこかが文字化けしたり誤った記述になっているということでしょうか。 転送後に何かが起きていたらVSCエディタではエラー表示できませんし、転送前のプレビューで正常に表示されてもわからないですよね。一度一ページずつ転送前と転送後とで内容が書き換わっていないか見比べてみます。 途方もない…ですが…ありがとうございます><
guest

回答3

0

読み込んでいるCSSファイル、画像ファイル、JSファイルなどを確認しましたが、中身はどれもindex.htmlと全く同じ内容のHTMLファイルでした。

Uncaught SyntaxError: Unexpected token '<'

これに関しては、CSSファイルなのに<!DOCTYPE html>で始まっていることが原因でしょう。
FTP転送時の問題の可能性があります。CSSファイルだけで転送してみる、などをしてみてください。

HTMLファイル自体にはおそらく問題はないです。

nginxを使ってるようなので、nginxの設定に問題がある可能性があります。
上記の解決方法でダメなら確認してみてください。

投稿2021/03/31 04:02

編集2021/03/31 04:07
ex025

総合スコア179

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/03/31 06:39

わぁーー!!最初のCHERRYさんから皆様が言ってたのってそういうことだったんですね!!<!DOCTYPE html>で始まってるなんてそんな...!! index.htmlってなんなんでしょう...!! アップロードしたcssを開いてchromeでコードをみておくべきだったんですね!!!!表面の文字ばかり確認してました... nginxはたしかに、さくらサーバーの仕様に書いてありました! サーバーの設定しきれてない部分があるかもしれないですね、確認します!
ex025

2021/03/31 10:26

再度試したみたのですが、FTPの問題ではなく、確実にnginxの設定の問題ですね。 「http://kanamijp.com」の後にどんな文字列を打ち込んでもHTMLファイルが返ってきます。 (http://kanamijp.com/tera/tailなど) つまり、CSSファイルにアクセスしてもHTMLファイルが返ってくるということです。 画像ファイルでも、javascriptファイルでも同様です。 nginxの設定やサーバーの設定を確認してみてください。
CHERRY

2021/03/31 13:45

> nginxはたしかに、さくらサーバーの仕様に書いてありました! お使いのサーバは、レンタルサーバですか? 利用されているサービス名を質問に追記いただけないでしょうか。
guest

0

ベストアンサー

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://kanamijp.com/css/design.css"

これを見る限り、cssをテキスト転送しているようですが…

FTPでcssがバイナリ転送されているかどうかChromeなどで確認してみてください。

CSSファイル(等)が読み込まれているのに反映されない!!(Resource interpreted as Stylesheet but transferred with MIME type text/plain)

投稿2021/03/31 02:03

FKM

総合スコア3647

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/03/31 02:13

私もそちらのサイトを拝見して確認したのですが、Transmitでの転送はもともとバイナリ設定でファイルが壊れている、文字化けしているとかでもなさそうではあります…。 ただサイトからコピペしただけのコードもあるので全角が混じってたとかそういうのがないか見比べてみます。 現状VSCエディタではエラー表記ないんですけど……いろいろ調べてみます!ありがとうございます!
FKM

2021/03/31 02:19 編集

別のFTPで転送してみる、キャッシュを削除する(特にChromeはCSSは保持しやすい)、別ファイルを新たに作成して転送してみるなども試してみてください。
退会済みユーザー

退会済みユーザー

2021/03/31 02:37

承知しました、試してみます、ありがとうございます!
guest

0

エラーメッセージのファイル

http://kanamijp.com/css/design.css

ですが、ファイル名は css ファイルのようですが、中身は CSS ではなく HTML が記載されているようです。

ファイルの中身を確認して、正しいCSS を記載してみてください。

投稿2021/03/30 20:23

CHERRY

総合スコア25218

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2021/03/31 01:40

外部cssですがキチンとcssでの表記ができていますしローカルプレビュー時ではそのつど反映されておりました…。 もう少し色々試してみて、もしダメならhtml内に直接書き込む方法を試します。 ありがとうございました!
FKM

2021/03/31 01:55

Uncaught SyntaxError: Unexpected token '<' こっちから潰した方がよさそうです。なんのファイルの何行目に出ているか確認した方がよさそうですよ。
退会済みユーザー

退会済みユーザー

2021/03/31 01:57

ありがとうございます、探してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問