前のパートに戻る 完了して次のパートへ  

  2-4 トップ画面の見た目を整える

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

この章で学べること


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

学習キーワード


- blade
- scss

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


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

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

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

一般的な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-2)で解説していますが、 php artisan make:auth実施時に下記の内容がルートファイルに追記されています。

$this->get('login', 'Auth\[email protected]')->name('login');

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

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

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

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


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

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

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

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

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


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

techpit-match/resources/assets/sass
└── app.scss

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

techpit-match/resources/assets/sass/top.scss

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

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

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

techpit-match/resources/assets/sass
└── top.scss

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

SCSSの基本的な書き方

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


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

2章(2-2)でphp artisan make:authを実行しているため、

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

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

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

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

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

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

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

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

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

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

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


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

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

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

こうですね。

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


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

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

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

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

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

レスポンシブ対応


パソコンだけでなく、

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

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

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1">

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

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

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

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

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

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

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

議論
0 質問
このコースの評価は?