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 © 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 © 2018 kotsuban-teikin All rights Reserved.</small>
</footer>
</body>
</html>
HTTPS環境オンリーの場合は
調べてみると、HTTPS環境オンリーの場合はsecure_asset()というものを使うんだそうな。下記参考にさせていただきました。
まとめ
ということで今回はCSSを適用してみました。SCSSを使ったり、Bootstrapを読み込んだりする場合はまた色々あるようですが、それは別の機会にでもやりたいと思います。
ちなみにJavaScriptについても同じようなやり方で、public/jsフォルダ内にjsファイルを読み込みして、それをblade.php側で読み込みすれば適用されるようになります。
現時点では下記のような形になります。
次回は共通部分の作成を行いたいと思います。