footer を共通化して作成・表示する手順【Laravel9】

Last updated at 2025-05-12Posted at 2025-05-11

やりたいこと

画像のような footer を作りたい。

Laravel フッターコンポーネント作成手順

① コンポーネントファイルを作成

php artisan make:component Footer

自動で以下の2つが作成されます：
・app/View/Components/Footer.php（クラス）
・resources/views/components/footer.blade.php（テンプレート）

② footer.blade.php にHTMLを書く

footer.blade.php

<!-- resources/views/components/footer.blade.php -->
<footer class="bg-white py-4 text-center text-sm text-gray-500 shadow">
    &copy;
    <span class="ml-1">{{ date('Y') }}</span>
    <span class="ml-1">{{ config('app.name') }}</span>
    <span class="ml-1">All rights reserved</span>
</footer>

③ フッターを呼び出すレイアウトにを追加

app.blade.php

<!-- 例：resources/views/layouts/app.blade.php -->
<body class="bg-gray-100 text-gray-800">
    <main>
        @yield('content')
    </main>

    <x-footer /> <!-- ← ここに追加 -->
</body>

④ APP_NAME を .env に設定（未設定なら）

APP_NAME="プロジェクト名"

※""をつけるとスペースをつけることができます。

それにより config/app.php の以下が反映されます：

config/app.php

'name' => env('APP_NAME', 'Laravel'),

※補足：コンテンツ量が少なくてフッターが画面の途中に表示されてしまう場合

修正前

修正後

ポイント

役割	必須クラス・構造	説明
全体ラッパー	`min-h-screen flex flex-col`	全体を縦方向のFlexにし、画面高を100vhに固定
メインコンテンツ	`flex-grow`	コンテンツ部分を「残りの空間いっぱいに広げる」

コード

/views/layouts/app.blade.php

<div class="min-h-screen flex flex-col bg-gray-100">
    @include('layouts.navigation')

    <!-- Page Heading -->
    @if (isset($header))
        <header class="bg-white shadow">
            <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                {{ $header }}
            </div>
        </header>
    @endif

    <!-- Page Content -->
    <main class="flex-grow">
        {{ $slot }}
    </main>

    {{-- footer --}}
    <x-footer />
</div>