一方のbladeで効くcssが反映されない。

###実現したい事
index2.blade.phpでもcssを反映させたい。
###発生している問題
index.blade.phpとbase.blade.phpで反映されているcssがindex2.blade.phpでは反映されない。
###前提
①baseはindex.blade.phpとindex2.blade.phpで共通。
②cssも両者共通
③htmlのクラス名も共通
###コード一覧
■index.blade.php

laravel
1コード@extends('layouts.base')
2
3@section('header','あ！')
4
5
6@section('header2')
7<a href="#">{{$data[0]}}</a>
8<a href="#">{{$data[1]}}</a>
9<a href="#">{{$data[2]}}</a>
10@endsection
11
12@section('menu_title','い')
13
14@section('menu')
15    @foreach($data2 as $item2)
16    <a href=""><p>{{$item2}}</p></a>
17    @endforeach
18@endsection
19
20@section('article')
21@foreach ($objects as $object)
22<a href="/hello/other?s_title={{$object->title}}&s_content={{$object->content}}">
23<div class="article">
24    <h1 class="art_title">{{$object->title}}</h1>
25    <p class="art_content">{{$object->content}}</p>
26</div>
27</a>

■base.blade.php

laravel
1<html>
2<head>
3    <link rel="stylesheet" href="css/style.css" type="text/css">
4</head>
5<body>
6<header>
7    <h1>    <a href="">@yield('header')</a>
8</h1>
9 <div class="header2">
10     <a href="">@yield('header2')</a>
11 </div>
12</header>
13
14<div class="container">
15
16    <div class="container2">
17     <h1>@yield('menu_title')</h1>
18      @yield('menu')
19    </div>
20
21    <div class="container3">
22     <a href=""> @yield('article')</a>
23    </div>
24
25</div>
26
27    <div class="clear"></div>
28    <footer>
29        <a href="#">
30            @yield('footer')
31        </a>
32    </footer>
33</body>
34</html>

■index2.blade.php

laravel
1@extends('layouts.base')
2
3@section('header','あ！')
4
5
6@section('header2')
7<a href="#">{{$data[0]}}</a>
8<a href="#">{{$data[1]}}</a>
9<a href="#">{{$data[2]}}</a>
10@endsection
11
12@section('menu_title','い')
13
14@section('menu')
15    @foreach($data2 as $item2)
16    <a href=""><p>{{$item2}}</p></a>
17    @endforeach
18@endsection
19
20@section('article')
21
22<div class="article2">
23    <h1 class="art_title2">{{$s_title}}</h1>
24    <p class="art_content2">{{$s_content}}</p>
25</div>
26@endsection
27
28@section('footer')
29
30
31   @component('components.footer')
32      @slot('footer_menu')
33       ホーム
34      @endslot
35
36      @slot('footer_menu2')
37      お問い合わせ
38      @endslot
39   @endcomponent
40   @endsection

■style.css

cssbody{
1    margin: auto;
2}
3header{
4    background-color: #53D525;
5    color:black;
6}
7header h1{
8    color:black;
9}
10a{
11    text-decoration:none;
12    color:black;
13}
14.header2{
15    background: #FF9501;
16    padding: 10px;
17    overflow: hidden;
18}
19.header2 li{
20    float: left;
21    display: inline-block;
22    margin: 0px 10px;
23}
24.container{
25    background-color: ;
26    margin: 50px 100px;
27}
28.container2{
29    float:left;
30    width:150px;
31    border:1px solid black;
32    margin: auto;
33
34}
35.container2 h1{
36    color:white;
37    background-color: black;
38    margin: auto;
39}
40.container2 li{
41list-style: none;
42}
43.container3{
44float: left;
45margin:0 0 0 160px
46}
47.article{
48width:700px;
49border: 1px solid black;
50margin:50px 0px;
51}
52.art_title{
53margin: auto;
54background-color: black;
55color:white;
56}
57.art_content{
58
59}
60.clear{
61    clear: left;
62}
63footer{
64    background-color: black;
65    color:white;
66}
67.pagination{
68    font-size: 12pt;
69}
70.pagination li{
71    display: inline-block;
72
73}

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

回答1件

ベストアンサー

変更前: <link rel="stylesheet" href="css/style.css" type="text/css">
↓
変更前1: <link rel="stylesheet" href="/css/style.css" type="text/css">
(相対パスではなく、絶対パスにするといかがでしょうか?)

変更前2: <link rel="stylesheet" href="{{ asset('css/style.css') }}" type="text/css">
(Laravelには「asset()」という関数が用意されているようです。)

asset()についての参考:
https://readouble.com/laravel/7.x/ja/helpers.html?header=asset()
https://qiita.com/kotsuban-teikin/items/9b00d0faa0b7eaf70796

投稿2020/06/04 22:15

編集2020/06/04 23:52