PHP

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

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

前回の記事→ Laravel日記1

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

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

トップページ

スクリーンショット 2018-12-13 11.40.12.png

新規登録ページ

スクリーンショット 2018-12-13 11.40.07.png


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側で読み込みすれば適用されるようになります。

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

スクリーンショット 2018-12-13 11.59.48.png

スクリーンショット 2018-12-13 11.59.53.png

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