HTML/CSSとbootstrapを使ったホームページを,Firebaseで公開したい

前提・実現したいこと

・HTML/CSSとbootstrapを使ったホームページをFirebaseで公開したい

発生している問題

・cssおよびbootstarpが適用されず

該当のソースコード

＃＃＃index.html本文＃＃＃

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/style.css">

    <title>Airbnb2</title>
</head>
<body>
  <!-- ナビゲーションバー -->
  <nav class="nav fixed-top  bg-white">
    <img src="../image/images.jpg" width="30" height="30" alt="" class="m-4 pl-">
    <a class="nav-link my-3 mx-1" href="#">概要</a>
  </nav>
  <!-- ナビゲーションバー -->

  <!-- メインビジュアル  -->
  <div class="jumbotron jumbotron-fluid">
    <div class="container">
      <p>
        <a href="#" class="btn btn-primary my-2">ギフトカードを登録</a>
      </p>
    </div>
  </div>
  <!-- メインビジュアル  -->

  <!-- メインコンテンツ -->
  <!-- コンテナ -->
  <div class="contanier">
  </div>
  <!-- コンテナ -->
  <!-- メインコンテンツ2 -->
  <div class="jumbotron">
    <div class="container">
      <h1 class="jumbotron-heading text-light">旅を贈ろう。</h1>
      <p class="lead text-light">Airbnbギフトカードで、世界をぐんと身近に</p>
      <p>
        <a href="#" class="btn btn-primary my-2">ギフトカードを登録</a>
      </p>
    </div>
  </div>
  <!-- メインコンテンツ2 -->

    <!-- bootstrap -->
    <script src="../js/bootstrap.bundle.min.js"></script>
    <!-- jquery -->
    <script src="../js/jquery.slim.min.js"></script>

    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="/__/firebase/6.3.0/firebase-app.js"></script>
    
    <!-- TODO: Add SDKs for Firebase products that you want to use
         https://firebase.google.com/docs/web/setup#reserved-urls -->
    
    <!-- Initialize Firebase -->
    <script src="/__/firebase/init.js"></script>
</body>
</html>

###試したこと
・firebase上のconsoleでプロジェクトを作成できた
・ターミナルからfirebaseにログインできた

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

・node.js v10.15.3
・npm 6.4.1
・ディレクトリ構成

public─index.html
css──bootstrap.min.css
└style.css
js──bootstrap.bundle.min.js
└jquery.slim.min.js
firebase.json
README.md

xenbeat

2019/07/15 04:26

「Firebase」タグの追加と、ディレクトリ構成がどのようになっているのか具体的な説明を記載されたほうが回答を得やすいと思います。

SyuheiFujita

2019/07/15 04:49

・｢Firebase」タグの追加、ディレクトリ構成の追加をしましたご指摘ありがとうございます！

kappa0923

2019/07/15 05:43 編集

- public/ と css/ が同じ階層にいるように見えますが、そうなっちゃってますか？ - 動作確認する際はどうやってますか？デプロイして確認 or ローカルで確認

SyuheiFujita

2019/07/15 15:23

・publicとcssが同じ階層にいます！・デプロイして確認していました！

行動規範の内容に同意します

回答1件

ベストアンサー

Firebaseホスティングは基本的にpublic配下のみをホスティングします。
つまり今回の場合はpublic外にあるcssとjsはアップロードされていないためindex.htmlから参照出来ていないと思われます。
次の手順を参考にしてみてください。

１. cssとjsをpublic配下に置く

public
 ├ index.html
 ├ css
 │   ├ bootstrap.min.css
 │   └ style.css
 └ js
     ├ bootstrap.bundle.min.js
     └ jquery.slim.min.js
firebase.json
README.md

２. パスから../を削除

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.slim.min.js"></script>

３. デプロイ

４. ブラウザのキャッシュをクリア

投稿2019/07/15 05:54

編集2019/07/15 06:10

xenbeat

総合スコア4258