はじめに
「ポートフォリオを作ってみたい」とふと思ったので、作ってみることにしました。
といっても、デザイン関係はぜんぜんなのでとりあえずググって配布されているものを探しました…
見つけたのがこちら
無料で商用・非商用問わず、テンプレート配布されており、レスポンシブにも対応しているということで、お借りいたしました。
ありがとうございます＾＾
とりあえずトップページ部分だけ実装していきたいと思います。
ポートフォリオの作成
Laravelプロジェクトの作成
今回はLaravelのバージョン9を使って作成を行なっていきます。
後々、機能を追加していきたいと考えています…!!
骨組みの作成
今回参考にさせていただくポートフォリオを確認して、
- ヘッダー部分
- コンテンツ部分
- フッター部分
の３つに大きくわけて作成していきたいと思います。
まずは、ベースとなるテンプレートファイルを作成していきます。
resources/viewsの配下に「layouts」フォルダを作成し、「index.blade.php」ファイルを作成しました。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
</head>
<body>
<div class="wrapper">
<!-- ヘッダー -->
@yield('header')
<main class="content">
<!-- コンテンツ -->
@yield('content')
</main>
<!-- フッター -->
@yield('footer')
</div>
</body>
</html>
各@yield()の部分で、ヘッダー部分、コンテンツ部分、フッター部分をはめこんでいく構造になります。
続いて、ヘッダー/フッターを作っていきます。
resources/viewsの配下に「common」フォルダを作成し、「header.blade.php」と「footer.blade.php」ファイルを作成します。
@section('header')
<header>
ヘッダーです
</header>
@endsection@section('footer')
<footer>
フッターです
</footer>
@endsection@yield部分にはめ込むために、それぞれ
@section(‘header’)、@section(‘footer’)で表示するコンテンツの区画を定義しています。
続いてコンテンツ部分のファイルを作成していきます。
resources/viewsの配下に「top.blade.php」ファイルを作成します。
@extends('layouts.index')
@include('common.header')
@include('common.footer')
@section('content')
<div>
コンテンツです
</div>
@endsection@extends()でベースとなるテンプレートファイルを継承しています。
@include()で他のテンプレートを読み込んでいます。
ここまで来ると、ファイル階層はこのようになります。
routes/web.phpを編集します。
Route::get('/', function () {
// デフォルトだとreturn view('welcom')になっている
return view('top');
});php artisan serveでサーバーを立ち上げて確認するとこのようになります。
肉付けをする！CSSの適用等
配布されていたindex.htmlファイルの記載されているコードを以下のように落とし込んでいきます。
<head></head>の情報を「layouts/index.blade.php」
<header></header>内のコードを「common/header.blade.php」
<footer></footer>内のコードを「common/footer.blade.php」
<main></main>内のコードを「top.blade.php」
HTMLの落とし込みが完了したら、cssフォルダとimgフォルダを落とし込みます。
Laravelの場合「public」フォルダの配下に落とし込みます。
これで、再度サーバー立ち上げて確認してみるとテンプレート通り作成できました。
終わりに
今回お借りし作成したものをベースにカスタマイズしていき、個性を出していきたいと思います。
コメント