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

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

ただいまの
回答率

88.83%

LaravelのビューにCSSとJSが反映しない

受付中

回答 5

投稿

  • 評価
  • クリップ 1
  • VIEW 3,960

LaravelのビューにCSSとJSが反映されません。対処法を教えていただければ幸いです。

resources/views/layout.blade.php

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <!--CSS・JSの読み込み-->
    <link href="css/styles.css" rel="stylesheet" type="text/css">
    <script src="js/main.js" type="text/javascript"></script>
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    @yield('content')
</div>
<script>
  $( function() {
    $( "#memo_day" ).datepicker({dateFormat: 'yy-mm-dd'});
  } );
</script>
</body>
</html>

resources/views/index.blade.php

@extends('layout')
@section('title', '体調管理')
@section('content')
<h3>体調管理アプリ</h3>
    {!!$cal_tag!!}
    <p><a href="#modal01" class="modalOpen">予定の登録</a></p>

    <div class="modal" id="modal01">

        <div class="overLay modalClose"></div>
            <div class="inner">
                <h3>予定登録</h3>
                <form method="POST" action="memo"> 
                <div class="form-group">
                {{csrf_field()}}

                <label for="memo_day">日付</label>
                <input type="text" name="memo_day" class="form-control" id="memo_day">
                <label for="memo">説明</label>
                <input type="text" name="memo" class="form-control" id="memo"> 
                </div>
                <button type="submit" class="btn btn-primary">登録</button> 
                </form> 
            <a href="" class="modalClose">Close</a>
            </div>

    </div>
@endsection

public/css/styles.css

body {
  position:relative;
  font-size: 100px;
}
  /* モーダルウィンドウのスタイル */
.modal {
  position:absolute;
  width:100%;
  height:100vh;
  top:0;
  left:0;
  display:none;
}
  /* オーバーレイのスタイル */
.overLay {
  position:absolute;
  top:0;
  left:0;
  background:rgba(200,200,200,0.9);
  width:100%;
  height:100vh;
  z-index:10;
}
  /* モーダルウィンドウの中身のスタイル */
.modal .inner {
  position:absolute;
  z-index:11;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

public/js/main.css

$(function(){
  // モーダルウィンドウが開くときの処理    
$(".modalOpen").click(function(){
             var navClass = $(this).attr("class"),
        href = $(this).attr("href");
                     $(href).fadeIn();
    $(this).addClass("open");
    return false;
});
  // モーダルウィンドウが閉じるときの処理    
$(".modalClose").click(function(){
    $(this).parents(".modal").fadeOut();
    $(".modalOpen").removeClass("open");
    return false;
});  
     });

また、resources/views/layout.blade.phpにCSSを呼び込む際には、以下のコードも試しましたが読み込むことができませんでした。
resources/views/layout.blade.php

<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/05/29 11:24

    「読み込むことはできない」とは何が起きているのでしょうか。
    確認したこと(ブラウザの開発ツールのコンソールでエラーが出ていないか、エラーログなど)を具体的に記載してください。

    キャンセル

回答 5

0

結果として出力されるHTMLのソースを確認して正しいpathで
CSSやjsが指定されているか確認すればよいかと

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/30 09:24

    ご回答ありがとうございます。

    キャンセル

0

Laravel使うならLaravel Mix使って欲しい。
php artisan make:authでレイアウトファイル作ってCSS/JSはLaravel Mixで全部管理というLaravelの普通の使い方をすればCSS/JSが読み込めないなんて段階で躓くことはない。

https://readouble.com/laravel/5.8/ja/authentication.html
https://readouble.com/laravel/5.8/ja/mix.html

package.jsonを見れば分かるけどbootstrapもjqueryも最初から使えるように用意されている。
まともなLaravelユーザーはjquery1を自分で読み込むなんて意味不明なことは絶対にしない。
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

まともじゃないLaravelユーザーが多いので実際にこんな作り方してるサイトは多いけど。
そういう所を手伝うようになってよく分かったけど5-10年前レベルの知識でLaravelを使うのは他人に迷惑をかける行為。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

ファイルが反映されないのが、ファイルが読み込めていないという場合は、
Chromeの開発ツールのNetworkタブなどで、該当のファイルのステータスが404になってないか一度確認してみてください。
Chrome Developer Toolsの説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/05/30 09:25

    ご回答ありがとうございます。
    確認をしてみます。

    キャンセル

0

こちらの記事をご参考下さい。
CSSの反映方法について書かれておりますが、JSにも同じことが言えるかと思います。
https://tekito-style.me/columns/laravel-css-changes

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

こんにちは。
最近Laravelで開発をしています。
コード拝見したところstylesheetの読み込み順序だと思われます。

Bootstrapにはリセット要素があるので、先にstyles.cssを読み込むことによって効かなくなっています。

一度順番をかえてみてください。

それでは失礼します。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る