ネビ活 | ネットビジネス生活

ネットxお金のスキルを作り、未来永劫豊かに暮らす事を目指すサイト

Laravel6チュートリアル初心者向け:bladeでウェブページを作ってみよう!

更新日:

今回は、Laravel6を使って、実際にウェブページをbladeで作ってみるチュートリアルをやっていきます。

 

このチュートリアルではまず、サイトの全体のレイアウト(原型)をBladeで自作する方法を解説していきます。

 

Laravelには、テーマがあるわけじゃないから、サイトのレイアウト、デザインは、自分で1から作っていく(フルスクラッチする)必要があるんだ。

じゃあ、どう作ればいいのかっていうのをここでは解説していくよ。

Neby

 

前回のチュートリアルでは、サイトを表示させて仕組みを理解しよう!というチュートリアルをやりました。

前回はLaravelにデフォルトで付いてるブレードを使いましたが、
今回は、ブレードを1から自分で作成して、ウェブページをブラウザで表示してみましょう。

 

このチュートリアルで、ブレードをどう使えばいいのかがよく分かるよ!

そもそもブレードって何?って場合は↓

Laravelのblade.phpとは?普通のPHPは使える?初心者もよく分かる図と例で解説!

Neby

 

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

Laravel6チュートリアル初心者向け:bladeでウェブページを作ってみよう。

では、Laravelプロジェクトは作成済み(Laravelサイトはインストール済み)という前提で進めていきます。

 

Laravelプロジェクトがない(Laravelサイトをまだ1つもインストールしてない)場合は、以下の記事を見て、Laravelプロジェクトを新規作成してね↓

Laravelプロジェクトとは?作成方法も含めて初心者向けによく分かるように解説!

 

もしくは、前回のチュートリアルでも説明してるよ。

Laravel6チュートリアル超初心者向け:サイトを表示させて仕組みを理解しよう!

Neby

 

まず、空のテキストエディタを開いてください。

テキストエディタはメモ帳とかTeraPadではなく、もっと高性能なものを使った方が今後の作業でミスも減って楽になるよ。VisualStudioCode(VScode)、ATOM、Brackets なんかが実際によく使われてるよ。自分はVScodeを使ってるよ。
Neby

 

で、空のテキストファイルを、resources\viewsフォルダに、layout.blade.phpという名前で保存します。

 

次にlayout.blade.phpにサイト全体のレイアウトをHTMLで書いていきます。

HTMLは、headとbodyで構成されているので、まずこれだけ書きます。

 

あと、ひとまず文字も入れてみましょう。

<body>~</body>の所に、pやh1タグを使って、適当に文字を書いて、このファイルを上書き保存してください。

 

Bladeをブラウザ表示するためのルートの設定

今作ったページをブラウザで表示できるように、ルート設定をします。

routes\web.phpを開きます。

  1. 元々あるRoute::get~('welcome');の3行をコピーして、下にペーストします。
  2. 元々あった3行は、//を先頭に付けてコメントアウト(不能化)します。
  3. 画像の7,8,9行のように、URLを'/'にして、view('layout')として、上書き保存します。
  4. コマンドプロンプト(shell/ターミナル)から、cdでプロジェクトフォルダに移動します。(例: cd D:\XAMPP\htdocs\newsite)
  5. php artisan serveと入力、Enterします。
  6. ブラウザでhttp://localhost:8000/にアクセスしてみます。

4、5の操作↓

4と5の操作が分からない場合は、下の記事で細かい手順を解説してるよ↓

PC上のLaravelサイトをブラウザに表示する方法。初心者でも必ずできる。

Neby

 

ブラウザでは、このように、body内に入力した文字が表示されてるはずです。

では、もっとちゃんとしたウェブサイトにここからグレードアップしていきましょう。

Laravelのroutes(web.php)とは?超初心者向けに図解と実例でやさしく解説!

 

Bladeのheadの中を作っていこう!

では、ちゃんとしたサイトにしていくために、
空っぽの<head>タグに必要な情報を書いていきましょう。

ただ、何を書くべきかがパッと分かりませんよね。

というわけで、resources\viewsフォルダの welcome.blade.php から必要そうなものだけコピーしちゃいましょう。

こんな感じ。ちなみに、2行目のhtml langっていうのは、言語です。

 

Laravelのサイト言語の設定

この言語設定ですが、config\app.phpを開きます。

 

70行目くらいにtimezone、83行目くらいにlocaleってありますよね。

 

それを、それぞれ、Asia/Tokyoja に書き換えて保存してください。

そうする事で

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">がブラウザでは

<html lang="ja">と変換されて読み込まれるようになります。

ブラウザのソースを表示してみると、こうなる。

 

じゃあ、次はBodyの中を作っていきましょう!

 

Bladeのbodyを作る

headはブラウザには表示されない部分ですが、body内はブラウザに実際に表示される部分です。

まず、サイトと言えば、基本はこういう形ですよね?

じゃあ、このレイアウトに必要なものを作っていきましょう。

 

さっきの文字は一度消して、bodyタグの中に、<div>で、まずwrapperっていうのを作ります。wrapperっていうのは、サイト全体を覆う枠(図のピンク部分)だと思ってください。サイトの幅とかそういうのの調整に使います。

その中に、また<div>で、それぞれのパーツを作ります。

divはdivision(分割、区分)の略です。つまりサイトを区分けしていくわけです。

 

さらに文字も入れてみると、こんな感じです。

コピーしました

コピー

<div class="wrapper">

<div class="header">
<h1>Laraサイト</h1>
</div>

<div class="sidebar">
<p>ここがサイドバー</p>
</div>

<div class="content">
<p>ここがコンテンツエリア</p>
</div>

<div class="footer">
<p>お問い合わせ</p>
</div>

</div> 

 

ちなみに、この状態でブラウザで表示すると、ただ文字が表示されるだけです。なぜかっていうと、まだCSSでレイアウトを定義してないからです。

 

Blade上のHTMLでCSSファイルを読み込む

さて、ここまで出来たら、一旦CSSファイルを作りましょう。

まず、publicフォルダに行き、その中にcssというフォルダを作成します。

 

次に、またテキストエディタで空の新規ファイルを作成し、このフォルダの中に、style.cssという名前で保存します。

 

今度は、layout.blade.phpに戻り、このcssを呼び出す一文をhead内に追記します。

コピーしました

コピー

<link rel="stylesheet" href="{{asset('css/style.css')}}"> 

これで、CSSを呼び出せるようになりました。

 

CSSを実際に書いていく

あとは、こんなふうに全体のレイアウトを作るためにCSSを書いていきます。

 

先程の、public\cssフォルダのstyle.cssを開いて、以下を丸ごとコピペし、保存してください。

コピーしました

コピー

/* CSS Reset */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(10px)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}

/* iOS デフォルトスタイルのリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}

input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

.define-text1 br{
    margin-bottom: 10px;
}
html, body {
    background-color: #fff;
    color: #3c4447;
    font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'MS Pゴシック', 'MS PGothic', sans-serif;
    font-weight: 200;
    height: 100vh;
    /* viewpointに対して100%の意味 */
}
h3{
    font-weight: 200;
}
b{font-weight: bold;}
hr{margin: 20px 0;}

.wrapper{
    width: 1000px;
    background-color: #20f3f3;
    min-height:700px;
    /* border: 1px solid #ccc; */
    margin: 0 auto;
}

.header{
    background-color: #707aff;
    margin: 0 0 10 0px;
    height: 100px;
    padding: 20px;
}

.sidebar{
    margin:20px;
    background-color: #ffffff;
    border: 2px solid #707aff;
    border-radius: 10px;
    width: 250px;
    min-height:500px;
    float: right;
    padding: 10px;
}

.content{
    text-align: center;
    width:690px;
    min-height:500px;
    background-color: #ffffff;
    border: 5px solid  #707aff;
    border-radius: 10px;
    margin: 20px;
    padding: 10px;
}

.footer{
    background-color: #707aff;
    height: 80px;
    text-align: center;
    padding: 10px;
} 

そして、ブラウザを更新してみてください。
サイト全体のレイアウトが表示されてるはずです。

 

これで、完全自作ブレードでウェブページを表示する方法が分かったかな?
Neby
ブレードでHTMLを書いて、CSSも書いて、web.phpでURLを指定すればいいんだね。
その通り。
Neby
でもさ、これ仮に、ブログを作るとしたら、本文はどこに書くの?ブレードに1ページづつ書いていくの?

それも可能だけど、あまり現実的ではないね。そうじゃなくて、ブログ投稿フォームを自分で作って、ブラウザから投稿できるようにするんだよ。

口コミサイトとか作る場合も一緒。投稿フォームを作って、そこから口コミを投稿すると、ブレードのコンテンツエリアに表示されるようにするんだ。詳しくは↓

Laravelでブログを作成する方法。初心者にもよく分かるレベルで解説!

Neby

 

ここからもっと<div>でパーツを細かく分けて、CSSで細かくデザインしていく事で、下のサイトのようなまともなデザインになります。

このHTMLやCSSでかっこいいデザインを作る方法は、検索すれば、いっぱいカッコイイサイトのデザインCSSとか出てくるんで、そういうのを参考に自分なりのデザインを構築していきます。

 

で、ブレードの使い方の肝心な話はここからだよ!
Neby
え、終わりじゃないの?
ここから、継承(extends)っていうPHPの機能を使って、ブレードを分けていくんだ。
Neby
どういう事?
例えば、今作ったサイト全体のレイアウトは、TOPページ、プロフィールページ、記事ページ、どのページでも共通で使えるけど、コンテンツ部分のレイアウトは変わってくるよね?
Neby

 

この図のように、ヘッダー、サイドバー、フッターといった部分はどのページでも同じように表示しますが、コンテンツエリアに限っては、HTMLのデザインがページによっては変わるはずです。

つまり、layout.blade.phpに直接、コンテンツエリアのHTMLを書いてしまうと、layout.blade.phpを使い回せなくなってしまいます。

そうではなく、コンテンツエリアだけのbladeを作り、layoutは使い回すのがLaravel流の使い方になります。

これを継承(extends)というんですが、この部分は次のチュートリアルでやっていきます。

Laravel6チュートリアル初心者向け:ブレード継承で複数ページを作ってみよう!

 

ところで、あなたがLaravelを今学んでる理由ってなんですか?

稼げるって聞いたから?

じゃあ、どれくらい上達すれば稼げるのか?

本当にそんな高給を稼げるのかの現実を知ってますか?

詳しくは下の記事に本音の裏事情を書いてるので参考にしてくださいね。

Laravelって稼げるの?独学?スクール?高給を稼ぐためにどうするべきか教えます。

  • この記事を書いた人

Neby

本を毎日多読しつつ、資産運用、プログラミング、心理学、ネットビジネススキルを猛向上中。貧富の差が広がる5年後、10年後に安心生活を送るためのお金のリテラシー、スキル、資産を一緒に作っていきましょう。

-PHP Laravel入門

Copyright© ネビ活 | ネットビジネス生活 , 2020 All Rights Reserved.