Category: Laravel Public

Laravel5.7でCSSを読み込む時

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の利が理解できます。