Laravelで読み込む際は、{{ asset(‘$path’)}}を使う。
<link href="{{ asset('$path') }}" media="all" rel="stylesheet" type="text/css" />
具体的に見てましょう。views配下にlogin.blade.phpがあります。
/resources/views/loging.blade.php
viewsの中に以下のようにassetフォルダはおきません。全てpublic配下に置きます。
<head>
<meta charset="utf-8">
<title>ログイン</title>
<link rel="stylesheet" href="asset/css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src=""></script>
</head>
CSSが効いていません。
/public/css/style.css を作る
css, js, imgなどはpublic配下に置く
先に作っていたcssをペーストします。
body {
margin: 0px; }
body #content {
margin-right: 50px;
margin-left: 50px; }
body #content .sm {
font-size: 11px; }
h1 {
text-align: center; }
p {
font-size: 0.975px; }
#form {
font-size: 0.875px; }
#form tr {
height: 80px; }
#form th {
border: solid 1px #ccc;
width: 200px;
text-align: left;
background-color: #f5f5f5;
padding: 5px; }
#form td {
border: solid 1px #ccc;
width: 800px;
padding-left: 10px; }
.button_wrapper {
text-align: center; }
input[type="text"] {
border: 0;
padding: 10px;
font-size: 1.3em;
color: #aaa;
border: solid 1px #ccc;
margin: 0 0 20px;
width: 700px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
broder-radius: 3px; }
#square_btn {
position: relative;
text-align: center;
display: inline-block;
padding: 0.55em 0.7em;
text-decoration: none;
color: #fff;
background: #483d8b;
border: solid 1px #483d8b;
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
footer {
position: fixed;
margin-top:;
bottom: 0px;
width: 100%;
height: 30px;
padding-top: 10px;
padding-bottom: 10px;
background: #483d8b;
text-align: center;
color: #fff; }
/resources/views/loging.blade.php のCSSパスを書き換え
bladeのパスを{{ asset(‘/css/style.css’) }}とします。
<head>
<meta charset="utf-8">
<title>ログイン</title>
<link rel="stylesheet" href="{{ asset('/css/style.css') }}">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<script src=""></script>
</head>
サーバーで確認
下図赤線で囲っているように、/loginでCSSが通っているのが分かります。
OKじゃないでしょうか。
では、数十ページやりましょうかね。やっぱり、Controllerとview、modelはそれぞれ考えることが違うので、モデル、フロントは先に作っておいた方が効率いいですね。
一人称でサイトつくるとMVCのメリットがイマイチわからんと思ってたけど、ER図、frontなどをそれぞれ作るなら、MVCの利が理解できます。
