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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1108閲覧

firebase cssが反映されない

hisatosi

総合スコア13

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

0クリップ

投稿2019/02/22 06:36

編集2019/02/26 01:58

cssのファイル自体は存在しています。検証するとこのような表示がされていました。css自体もしっかりコードを打ってあります### firebase後にcssが反映されないです

ドットインストール学習中で、firebaseにてサイトを公開したが、cssが反映されていませんでした
公開した画面を検証したところ
Failed to load resource: the server responded with a status of 404 ()
というエラーがでました

エラーメッセージ

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>太郎のポートフォリオサイト</title> <link rel="icon" href="favicon.ico"> <meta name="description" content="太郎のポートフォリオサイトです"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <nav> <ul> <li class="current"> <a href="index.html"> HOME </a> </li> <li> <a href="about.html"> ABOUT </a> </li> </ul> </nav> </header> <section> <img src="img/taro.png" width="140" height="140" alt="太郎のアイコン" class="icon"> <h1>太郎</h1> <p>UI/UXデザイナー見習いです</p> <div class="works"> <section> <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム"> <h1>勇者ゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work2.png" width="400" height="260" alt="宝探しゲーム"> <h1>宝探しゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work3.png" width="400" height="260" alt="神経衰弱"> <h1>神経衰弱</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> </div> </section> <footer> <ul> <li> <a href="mailto:taguchi@gmail.com" target="_blank"> <img src="img/mail.png" width="20" height="20" alt="メール送信"> </a> </li> <li> <a href="https://dotinstall.com" target="_blank"> <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ"> </a> </li> <li> <a href="https://dotinstall.com" target="_blank"> <img src="img/photos.png" width="20" height="20" alt="写真サイトへ"> </a> </li> </ul> <p>(c) taro </p> </footer> </body> </html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

azuapricot

2019/02/22 06:37

パスとかあってますか?
hisatosi

2019/02/22 06:45

パスはあっていると思います
azuapricot

2019/02/22 06:47

404 (Not Found)は単純にファイルが見つかりませんでしたというエラーなので、 パスがずれているかファイルが本当に無いかのどちらかだと思いますが・・・。 もう一度よく確認してください。 あとは情報量が少なすぎるのでこちらでは解決は難しいです。 キャッシュクリアして、パスも確認して、それでも解決できないのであればもうお手上げです。
kei344

2019/02/22 13:44

HTMLソースをコードブロックで質問文に追記してください。
hisatosi

2019/02/24 13:05

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>太郎のポートフォリオサイト</title> <link rel="icon" href="favicon.ico"> <meta name="description" content="太郎のポートフォリオサイトです"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header> <nav> <ul> <li class="current"> <a href="index.html"> HOME </a> </li> <li> <a href="about.html"> ABOUT </a> </li> </ul> </nav> </header> <section> <img src="img/taro.png" width="140" height="140" alt="太郎のアイコン" class="icon"> <h1>太郎</h1> <p>UI/UXデザイナー見習いです</p> <div class="works"> <section> <img src="img/work1.png" width="400" height="260" alt="勇者ゲーム"> <h1>勇者ゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work2.png" width="400" height="260" alt="宝探しゲーム"> <h1>宝探しゲーム</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> <section> <img src="img/work3.png" width="400" height="260" alt="神経衰弱"> <h1>神経衰弱</h1> <p>楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。楽しいアプリです。</p> </section> </div> </section> <footer> <ul> <li> <a href="mailto:taguchi@gmail.com" target="_blank"> <img src="img/mail.png" width="20" height="20" alt="メール送信"> </a> </li> <li> <a href="https://dotinstall.com" target="_blank"> <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ"> </a> </li> <li> <a href="https://dotinstall.com" target="_blank"> <img src="img/photos.png" width="20" height="20" alt="写真サイトへ"> </a> </li> </ul> <p>(c) taro </p> </footer> </body> </html>
hisatosi

2019/02/24 13:06

返信遅くなってしまいすみません。追記致しました
kei344

2019/02/24 13:17

質問文に追記してください。
hisatosi

2019/02/24 13:28

失礼致しました。追加しました
kei344

2019/02/26 08:12

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。
hisatosi

2019/02/26 13:10

解決済にしました。細かなところまでご指摘してくださりありがとうございます。
guest

回答1

0

ベストアンサー

css/styles.css の位置にアップロードされていない状態です。
https://myportfolioproject-1e8da.firebaseapp.com/css/styles.css というアドレスでアクセスできない状態なのでCSSが適用されていません。

ファイル名やパスを再確認して再アップロードするなりしましょう。

投稿2019/02/24 15:07

kei344

総合スコア69364

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

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

hisatosi

2019/02/25 00:01

ありがとうございます
hisatosi

2019/02/26 01:55

firebase でのファイル名はおそらくあっていると思うのですが、パスはどうやって確認出来ますか? どこが間違えているのかがまだわかりません
kei344

2019/02/26 02:05

リロードしてください。どういう作業をしたのかわかりませんが、現在は見られるようになっていますよ。
hisatosi

2019/02/26 02:38

デプロイしたら見られるようになっていました。フォルダの大文字のところとかをいじってても全然出来ねーじゃん!と思って、質問し直してほっといたらできるようになっていました。 フォルダ名とかを細かくチェックするのが大事だと学びました。 ありがとうございました!!!!助かりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問