このパートではトップ画面の見た目を整えていきます。

この章で学べること

Copied!
- Viewの編集
- 見た目を整える方法
- レスポンシブ対応

今回のパートで作成する画面：ログイン画面

学習キーワード

Copied!
- blade
- scss

トップページを作成する HTML

まず、techpit-match/resources/views フォルダ内に top.blade.phpファイルを作成します。

Copied!
techpit-match/resources/views
└── top.blade.php

top.blade.phpファイルに下記を記入します。

resources/views/top.blade.php
123456789101112
            
Copied!
@extends('layouts.layout')

@section('content')
<div class="loginPage">
  <div class="container">
    <div class="loginPage_contents">
    <h1 class="h3 loginPage_contents_title">新しいマッチを見つけよう</h1>
    <div class="btn loginPage_contents_btn"><a class="text-white" href="{{ route('login') }}">メールアドレスでログインする</a></div>
    </div>
  </div>
</div>
@endsection

一般的なHTMLの記述方法に加え、

Laravelに実装されているBladeというテンプレートエンジンを使うため、
一部特殊な記述方法になっています。

• @extends('layouts.layout') ・・外部ファイル読み込み。後述のレイアウトファイルを読み込む
• @section('content') ・・ここから
• @endsection ・・ここまで

ヘッダー、メニュー、フッター、CSSやJavaScript読み込みなど、
複数のページで共通の内容をレイアウトファイルとして保存しておいて、
@extendとつけることで、レイアウトファイルを読み込みます。
(後述します。)

@section と @endsectionで囲まれた範囲がそれぞれのページ内容になります。

もう1つ見慣れない記述方法があります。

• <a href="{{ route('login') }}">

ルートファイル techpit-match/routes/web.phpにルート名を明記しておくと、
この書き方ができます。

2章(2-3)で解説していますが、
php artisan ui bootstrap --auth実施時に下記の内容がルートファイルに追記されています。

routes/web.php
1
 
Copied!
        $this->get('login', 'Auth\LoginController@showLoginForm')->name('login');

name('login')と記載がある事で、

<a href="{{ route('login') }}">と書くだけでルーティングする事ができます。

• メリット ・・読みやすい。実際のファイルパスを気にせずに書ける

トップページを作成する ルーティングファイル

新しくファイルを作成した後は、
必ずルーティングファイルにも明記が必要です。

techpit-match/routes/web.phpファイルの内容を下記に変更します。

routes/web.php
1234
    
Copied!
//変更前
Route::get('/', function () {
    return view('welcome');
    });

routes/web.php
1234
    
Copied!
//変更後
Route::get('/', function () {
return view('top');
});

このように記載する事で、
ルート (http://techpit-match など) にアクセスしたら、
top.blade.phpが表示される様になります。

※この時点では layout.blade.php を作成していないためエラーが発生します。
後述のlayout.blade.php を作成することで表示されるようになります。

トップページを作成する Scss

次に、techpit-match/resources/sass/app.scss ファイルに以下のコードを追記します。

Copied!
techpit-match/resources/sass
└── app.scss

resources/sass/app.scss
123456789101112131415161718192021
                     
Copied!
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

$fa-font-path: "../webfonts";

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// FontAwesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/brands';

//ここから追加
//pages
@import "top";

@import "top"; と追記することで、

techpit-match/resources/sass/_top.scss

ファイルが読み込めるようになります。

techpit-match/resources/sass/_top.scss ファイルを作成し、

_top.scssに下記コードを記入します。

※先頭に _をつけたファイルはパーシャルファイル と呼ばれます。

Copied!
techpit-match/resources/sass
└── _top.scss

resources/sass/_top.scss
12345678910111213141516171819202122
                      
Copied!
.loginPage {
  &_contents {
    height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    &_title {
      margin-top: 12vh;
    }
    &_btn {
      display: block;
      max-width: 400px;
      padding: 20px;
      margin: 0 auto;
      border-radius: 30px;
      background: #fd5068;
      color: #fff;
    }
  }
}

この講座ではScssの詳細な記述方法は解説しませんので、
必要があれば下記記事などを参考にしてみてください。

SCSSの基本的な書き方

トップページを作成する レイアウトファイル

Laravelではヘッダーやフッター、メニューなど、
複数のページで共通で使用するファイルをレイアウトファイルとして切り分けて保存する事ができます。

2章(2-3)でphp artisan ui bootstrap --authを実行しているため、

下記レイアウトファイルが生成されています。

Copied!
techpit-match/resources/views/layouts
└── app.blade.php

このファイルを元に、共通箇所を作成します。

ファイル名はなんでもいいのですが、
今回はわかりやすさ重視で、layout.blade.phpファイルとします。

techpit-match/resources/views/layouts/app.blade.phpファイルをコピーし、
layout.blade.phpファイルとして保存してください。

Copied!
techpit-match/resources/views/layouts
└── app.blade.php
└── layout.blade.php

次に、layout.blade.phpのコードを下記のように編集してください。

resources/views/layouts/layout.blade.php
1234567891011121314151617181920212223
                       
Copied!
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>

    @yield('content')

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

変更内容ですが、<body>タグ内の記述を@yield('content')と<script>だけにしています。

@yield('content')と記載することで、

techpit-match/resources/views/top.blade.phpファイルに記載した、

@section 〜 @endsection で囲った内容が表示される事になります。

トップページの背景色を変更する

最後に、
Laravel初期設定では背景色が少しグレーになっているので、白色に変更します。

techpit-match/resources/sass/_variables.scssファイルの2行目あたりに、
$body-bgとして背景色が指定されているので、こちらを白に変更します。

resources/sass/_variables.scss
12
  
Copied!
// Body
$body-bg: #f8fafc;

こうですね。

resources/sass/_variables.scss
12
  
Copied!
// Body
$body-bg: #fff;

トップページを作成する ビルド

SCSSファイルを反映させるため、

コマンドプロンプトで、npm run devと入力後、

コマンドプロンプトでphp artisan serveと入力し、

ブラウザでhttp://localhost:8000と入力します。

このような表示になっていればOKです。

レスポンシブ対応

パソコンだけでなく、

iPhoneなどのスマートフォンやタブレットからアクセスした際もみやすく表示することを

レスポンシブ対応といいます。

すでにインストールしているBootstrap4はレスポンシブ対応を前提に作成されています。

レスポンシブ対応するには、Viewportという設定が必要になりますが、

この章で作成したレイアウトファイルの中に、Viewportの設定もすでに含まれています。

techpit-match/resources/views/layouts/layout.blade.phpファイル内に下記の記述があります。

resources/views/layouts/layout.blade.php
1
 
Copied!
    <meta name="viewport" content="width=device-width, initial-scale=1">

この記述により、レスポンシブ対応は実施済みということになります。

レスポンシブ対応されているかを確認するために、グーグルクロムで画面上任意の箇所で右クリックし、
検証をクリックします。

クリックすると、グーグルデベロッパーツールが表示されます。

下記画像の通り、①->②とクリックすると、様々なデバイスの画面サイズを確認できます。

デバイスの横幅により、画面の表示が調整されているのがわかるかと思います。

*この講座では、iPhone6/7/8 の画面サイズを想定して作成しています。

以上でこのパートは終了です。お疲れ様でした！