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

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

resources/views/layout.blade.php

php
1<!DOCTYPE HTML>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>@yield('title')</title>
6    <!--CSS・JSの読み込み-->
7    <link href="css/styles.css" rel="stylesheet" type="text/css">
8    <script src="js/main.js" type="text/javascript"></script>
9         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
10    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
11    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css' />
12    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
13    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
14    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
15</head>
16<body>
17<div class="container">
18    @yield('content')
19</div>
20<script>
21  $( function() {
22    $( "#memo_day" ).datepicker({dateFormat: 'yy-mm-dd'});
23  } );
24</script>
25</body>
26</html>

resources/views/index.blade.php

php
1@extends('layout')
2@section('title', '体調管理')
3@section('content')
4<h3>体調管理アプリ</h3>
5    {!!$cal_tag!!}
6    <p><a href="#modal01" class="modalOpen">予定の登録</a></p>
7    
8    <div class="modal" id="modal01">
9        
10        <div class="overLay modalClose"></div>
11            <div class="inner">
12                <h3>予定登録</h3>
13                <form method="POST" action="memo"> 
14                <div class="form-group">
15                {{csrf_field()}}   
16                <label for="memo_day">日付</label>
17                <input type="text" name="memo_day" class="form-control" id="memo_day">
18                <label for="memo">説明</label>
19                <input type="text" name="memo" class="form-control" id="memo"> 
20                </div>
21                <button type="submit" class="btn btn-primary">登録</button> 
22                </form> 
23            <a href="" class="modalClose">Close</a>
24            </div>
25    
26    </div>
27@endsection

public/css/styles.css

css
1body {
2  position:relative;
3  font-size: 100px;
4}
5  /* モーダルウィンドウのスタイル */
6.modal {
7  position:absolute;
8  width:100%;
9  height:100vh;
10  top:0;
11  left:0;
12  display:none;
13}
14  /* オーバーレイのスタイル */
15.overLay {
16  position:absolute;
17  top:0;
18  left:0;
19  background:rgba(200,200,200,0.9);
20  width:100%;
21  height:100vh;
22  z-index:10;
23}
24  /* モーダルウィンドウの中身のスタイル */
25.modal .inner {
26  position:absolute;
27  z-index:11;
28  top:50%;
29  left:50%;
30  transform:translate(-50%,-50%);
31}

public/js/main.css

javascript
1$(function(){
2  // モーダルウィンドウが開くときの処理    
3$(".modalOpen").click(function(){
4             var navClass = $(this).attr("class"),
5        href = $(this).attr("href");
6                     $(href).fadeIn();
7    $(this).addClass("open");
8    return false;
9});
10  // モーダルウィンドウが閉じるときの処理    
11$(".modalClose").click(function(){
12    $(this).parents(".modal").fadeOut();
13    $(".modalOpen").removeClass("open");
14    return false;
15});  
16     });
17

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

php
1<link rel="stylesheet" href="{{ asset('css/styles.css') }}">
2

m.ts10806

2019/05/29 02:24

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

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

回答5件

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

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

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

それでは失礼します。

投稿2019/06/06 23:51

退会済みユーザー

総合スコア0

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

投稿2019/06/04 14:50

編集2019/06/04 15:25

marurunn

総合スコア702

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

投稿2019/05/29 03:30

aro10

総合スコア4106

HirakuMorishima

2019/05/30 00:25

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

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

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を使うのは他人に迷惑をかける行為。

投稿2019/05/29 02:49

退会済みユーザー

総合スコア0