Laravel学習帳

Laravel5.2の学習帳です。開発環境はXAMPP for Windows 5.6.19 / 本番環境はさくらサーバー(スタンダード)

基礎知識

Bladeのテンプレートにスタイルシートを読み込む

2016/12/02

2015_07_17_LearnCSS

前回はLaravelのWelcomeページがどういう仕組みで表示されているかを確認しました。

今回はその仕組みを念頭にいれて自分でページを作成してみます。

またBladeでテンプレートを作成する際にはスタイルシートでデザインを整えてみます。

 

外部ファイルの読み込み

Larvalでは「js」ファイルや「css」ファイルの読み込み先のデフォルトのディレクトリが「public」になっています。

ですので、cssファイルやjsファイルはpublicフォルダ配下に作成します。

もし

public/css/styles.css
public/js/common.js

と作成したらViewファイルでは

<!-- cssの呼び出し -->
<link href="css/styles.css" rel="stylesheet" type="text/css">
<!-- jsファイルの呼び出し -->
<script src="js/common.js" type="text/javascript"></script>

と記述することで外部ファイルを読み込むことができます。

 

チュートリアル

MVCモデルのViewとControllerを使ってLaravelのリンク集を作ってみます。

mvc_laravel_part

今回はスタイルシートも作成してデザインを整えます。

 

実現したいこと

  • ControllerとViewを使ってLaravelのリンク集のページを作成

 

手順

1. Bladeでテンプレートの作成

resources/views/に "link" というファイル名でBladeのテンプレートを作成します。

resources/views/link.blade.php

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Laravel link集</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <div class="container">
    <h1>Laravel link集</h1>
    <ul class="listdesign design1">
      <li><a href="https://laravel.com/" target="_blank">Laravel公式サイト(英語)</a></li>
      <li><a href="http://laravel.jp/" target="_blank">Laravel公式サイト(日本語)</a></li>
      <li><a href="https://github.com/laravel/laravel" target="_blank">Laravel GitHub</a></li>
    </ul>
  </div>
</body>
</html>

 

2. 外部CSSファイルの作成

publicフォルダにCSSというフォルダを作成して "styles.css" というスタイルシートを作成します。

public/styles.css

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: Verdana, sans-serif;
}

.container {
  width: 600px;
  margin: 0 auto;
}

h1 {
  font-size: 16px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  margin-bottom: 20px;
}

.listdesign
,.listdesign li{
  padding:0px;
  margin:0px;
}

.listdesign li{
  list-style-type:none !important;
  list-style-image:none !important;
  margin: 5px 0px 5px 0px !important;
}

.design1 li{
  position:relative;
  padding-left:20px;
  padding-bottom: 20px;
}

.design1 li:before{
  content:'';
  display:block;
  position:absolute;
  box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
  top:3px;
  left:2px;
  height:0;
  width:0;
  border-top: 6px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid #aaa;
}

 

3. Controllerの作成

XAMPPの場合だとコマンドプロンプトでLaravelのプロジェクトフォルダまで移動します。

#プロジェクト名がmylaravelの場合
cd C:\xampp\htdocs\mylaravel

#artisanコマンドを使ってコントローラを作成
#コントローラファイル名はアッパーキャメル記法(複合語の先頭を大文字で書き始める)+Controllerで記述
php artisan make:controller LinkController

app/Http/Controllers

に中身が空のLinkController.phpが生成されます。

このファイルに以下のようにindex()メソッドを追加します。

<?php
#LinkController.php
namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Http\Requests;
use App\Http\Controllers\Controller;

class LinkController extends Controller
{
  public function index()
  {
  return view('link');
  }
}

 

4. ルーティングの設定

app/Http/routes.phpのファイルを編集します。

#routes.php
Route::get('link/', 'LinkController@index');

 

5. ブラウザで確認

WEBサーバが立ち上がっていることを確認して

ブラウザで

http://localhost/mylaravel/public/link

と入力して以下の画面が表示されたらOKです。

styles

 

-基礎知識