Laravel日記2 - CSSを適用してみる- #PHP

Laravel日記その２を書いてみたいと思います。

前回の記事→ Laravel日記1

今回はCSSを適用してみたいと思います。

ちなみに前回までの状態は以下の通りです。

トップページ

新規登録ページ

LaravelプロジェクトにCSSを追加する

今回は自作でstyle.cssというファイルを作成し、Laravelプロジェクトに適用するところをやってみたいと思います。

下記内容が記載されたstyle.cssというファイルを、public/cssフォルダ内に追加します。

style.css

@charset "utf-8";

html{
    font-size: 62.5%;
}

body{
    color: #333;
    font-size: 1.6rem;
}

Laravelでは単純にCSSを適用したい場合は、publicフォルダ内のcssフォルダ内にファイルを突っ込んで、読み込んでしまえばOKです。

CSSを読み込んでみる

それでは先ほど作成したを読み込んでみたいと思います。

<link rel="stylesheet" href="{{ asset('css/style.css') }}">

上記をindex.blade.phpおよびnew.blade.phpに追加します。
asset()というものを使うと、publicフォルダ内のリソースを読み込めるようになっています。

この辺はHTMLの相対パスの知識が使えます。

せっかくなので、HTMLのファイルっぽくしてみましょう。

index.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">

</head>
<body>
<header>
    <h1>Laravel Blog</h1>
</header>
    <p>Laravel Blogです。</p>
    <a href="{{url('/new')}}">新規登録</a>
<footer>
<small>copyrights &copy; 2018 kotsuban-teikin All rights Reserved.</small>
</footer>
</body>
</html>

new.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">

</head>
<body>
<header>
    <h1>Laravel Blog</h1>
</header>
    <p>Laravel Blog新規登録ページです。</p>
    <a href="{{url('/')}}">トップページへ戻る</a>
<footer>
<small>copyrights &copy; 2018 kotsuban-teikin All rights Reserved.</small>
</footer>
</body>
</html>

HTTPS環境オンリーの場合は

調べてみると、HTTPS環境オンリーの場合はsecure_asset()というものを使うんだそうな。下記参考にさせていただきました。

Laravelのアセットに関するTips

まとめ

ということで今回はCSSを適用してみました。SCSSを使ったり、Bootstrapを読み込んだりする場合はまた色々あるようですが、それは別の機会にでもやりたいと思います。

ちなみにJavaScriptについても同じようなやり方で、public/jsフォルダ内にjsファイルを読み込みして、それをblade.php側で読み込みすれば適用されるようになります。

現時点では下記のような形になります。

次回は共通部分の作成を行いたいと思います。