前回、記事一覧と記事を表示する画面を作成しましたが、何の CSS も設定していない為、非常にそっけない画面となっています。今回は、CSS フレームワークである Bootstrap を適用して、表示を整えたいと思います。
Bootstrap の導入方法
Bootstrap の導入方法はいくつか考えられます。
- Laravel デフォルトの CSS, JavaScript を使用する
- Bootstrap CDN を使用する
- コンパイル済の Bootstrap をダウンロードして、public ディレクトリ以下に配置する
- Bootstrap のソースを npm でダウンロードして、Laravel Mix を使って public ディレクトリに配置する
4.が最も最適化できますが、node や npm, Laravel Mix 等のフロントエンドの知識が必要になります。
この記事では最も手軽な、1. のデフォルト CSS, JavaScript を使っていきます。
4.の Laravel Mix の使い方に関しては、公式サイトを御覧ください
https://laravel.com/docs/5.6/frontend
https://laravel.com/docs/5.6/mix
ドキュメントルート
Laravel のドキュメントルートは public ディレクトリになります。デフォルト CSS, JavaScript はその中にあります。
public ├── css │ └── app.css CSS ファイル └── js └── app.js JavaScript ファイル
レイアウトファイルを修正
// resources/views/layout.blade.php
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Blog</title>
<!-- ① CSS を追加 -->
<link rel="stylesheet" href="/css/app.css">
<!-- ② JavaScript を追加 -->
<script src="/js/app.js" defer></script>
</head>
<body>
<div class="container py-4"> <!-- ③ 追加 -->
@yield('content')
</div>
</body>
</html>
① デフォルト CSS の読み込みを追加。
② デフォルト JavaScript の読み込みを追加。
③ 実際に Bootstrap を使ってみます。
div を追加して、@yield(‘content’) を囲みます。
div に class=”container py-4″ を指定すると Bootstrap が上下左右に余白を表示します。
Bootstrap の使い方はここでは説明しきれないので、公式サイトをご覧ください。
https://getbootstrap.com/
表示内容確認
http://localhost:8000/articles/ にアクセスして表示を確認します。左右に余白ができていれば成功です。
表示を整えるとか言って、現状ではあまり変わらなかったですね（汗）。今後、メニューやフォームを作成していくのですが、その時になれば、Bootstrap の美しさがわかると思います。
演習
Bootstarp の公式サイトに目を通して、何が出来るのか確認してください。
https://getbootstrap.com/
