Laravelでツール一覧と共通メニューを作る｜PC・スマホ向けの画面を用意

2026年10月31日

Laravel
PHP

これからいろいろなツールを作っていくために、最初にツールを選ぶメニューを用意したいと考えました。
メニューがあれば、公開したときにも、どこから何を使えるのか分かりやすくなると思ったからです。

そこで、Laravelの初期画面をツール一覧に置き換え、どの画面からも一覧へ戻れる共通メニューを作りました。
この記事では、Bladeで画面の共通部分をまとめる方法と、CSSでPC・スマホの配置を切り替える方法を紹介します。
実装はCodexと進め、動作は自動テストで確認しました。
説明と確認結果は2026年10月時点のものです。

目次 [ close ]

作る画面とファイルを確認する

用意したのは、ツール一覧、パスワード生成の使い方、生成画面の3画面です。
一覧から使い方を読み、生成画面へ進みます。
各画面には、一覧や使い方へ戻るリンクを置きました。

1200px幅で表示したツール一覧を縮小した画像。共通メニューとカードを確認できる

一覧では、パスワード生成だけを利用できます。
カレンダーと所有者用メニューは「準備中」と表示し、使えない画面へのリンクは付けていません。

画面ごとに同じヘッダーやリンクを書かず、共通部分を1つのBladeコンポーネントへまとめます。

ファイル	役割
`routes/web.php`	URLと画面の対応、ルート名の定義
`resources/views/components/layout.blade.php`	共通のヘッダー・メニュー・フッター
`resources/views/tools/index.blade.php`	ツール一覧
`resources/views/tools/password-guide.blade.php`	使い方
`resources/views/tools/password-form.blade.php`	生成フォームと結果
`resources/css/app.css`	画面幅に応じた配置

以下のコードは、このアプリから共通メニューに関係する箇所を抜き出したものです。
Laravelのプロジェクトと各画面がある前提で、URL、レイアウト、CSSの順に対応を追います。
パスワードを生成する処理そのものは、ここでは扱いません。

URLと画面を対応付ける

一覧と使い方は固定の内容を表示するため、routes/web.phpでRoute::view()を使っています。

Route::view('/', 'tools.index')->name('tools.index');
Route::view('/password-generator', 'tools.password-guide')->name('password.guide');

最初の引数はURLのパス、次の引数は表示するビュー名です。
tools.indexはresources/views/tools/index.blade.phpを指します。
この2画面は、コントローラーを作らずに表示できます。

name()は、そのルートに名前を付けます。
例えばroute('tools.index')と書くと、tools.indexという名前のルートに対応するURLを作れます。
URLの文字列を各画面に直接書かず、ルート名を使ってリンクをそろえる構成です。

生成画面は入力や生成結果を扱うため、コントローラーを経由します。
固定の説明画面と、処理が必要な画面とでルートのつなぎ方を分けています。

Bladeの共通レイアウトに各画面を入れる

resources/views/components/layout.blade.phpへ、各画面で使う共通部分を置きます。
components/layout.blade.phpは、各画面から<x-layout>として呼び出せます。

ツール一覧の呼び出し方は、次の形です。

<x-layout title="ツール一覧">
    <!-- この中に一覧の見出しやカードを書く -->
</x-layout>

共通レイアウト側の要点は次のとおりです。
説明のための抜粋で、HTMLの外枠やヘッダーなどは省略しています。

@props(['title', 'active' => 'tools'])
<title>{{ $title }} | おじちくのツール箱</title>
<main class="shell" id="main">
    {{ $slot }}
</main>

@propsは、コンポーネントが受け取る値を定義します。
titleには呼び出し元の「ツール一覧」が入り、$slotには<x-layout>の内側に書いた内容が入ります。
画面ごとの内容を差し替えながら、同じ外枠を使えます。

共通メニューも、このレイアウトに置いています。

<nav aria-label="共通メニュー">
    <a href="{{ route('tools.index') }}"
       @if($active === 'tools') aria-current="page" @endif>ツール一覧</a>
    <a href="{{ route('password.guide') }}"
       @if($active === 'password') aria-current="page" @endif>パスワード生成</a>
</nav>

$activeは、どのメニュー項目を現在の項目として示すかを決める値です。
省略するとtoolsになり、ツール一覧のリンクにaria-current="page"が付きます。
使い方や生成画面では、次のようにactive="password"を渡します。

<x-layout title="パスワード生成の使い方" active="password">
    <!-- この中に使い方を書く -->
</x-layout>

ヘッダーやフッターにもroute('tools.index')を使ったリンクを置いています。
メニュー名や戻り先を変更するときは、共通レイアウトを修正すれば各画面へ反映できます。

CSSでPCは横並び、スマホは1列にする

画面幅による配置の切り替えは、LaravelではなくブラウザーのCSSが担当します。
resources/css/app.cssから、一覧の列数に関係する宣言を抜き出すと次の形です。

.tool-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
@media (max-width: 900px) {
    .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .tool-grid { grid-template-columns: 1fr; }
}

通常は3列、900px以下では2列、600px以下では1列になります。
この抜粋以外にも、同じメディアクエリーで余白やメニューの並びを調整しています。

375px幅の一覧から、利用できるツールのカードを撮影した部分。スマホ幅では1列に並ぶ

スマホ幅では、カードを縦に並べて読み進められるようにしました。
ボタンは高さ48px以上とし、キーボードで移動したときのフォーカス表示と、本文へ移動するリンクも用意しています。

このアプリの共通レイアウトは、@viteでCSSとJavaScriptを読み込みます。
CSSを変更した場合は、プロジェクト内でnpm run buildを実行して資材を更新します。
既に同じ内容でビルド済みなら、画面の確認だけのために再ビルドする必要はありません。

一覧へ戻れることと画面幅を確認する

確認するときは、Laravelのプロジェクト内で開発サーバーを起動します。
既に起動している場合は、そのサーバーを使います。

php artisan serve --host=127.0.0.1 --port=8000

http://127.0.0.1:8000/を開き、一覧から「使い方を見る」、使い方から「パスワードを生成する」へ進みます。
各画面の共通メニューやフッターから一覧へ戻れるかを確認します。
ウィンドウ幅を変えたときは、カードの列数とページ全体の横スクロールも確認します。

このアプリでは、Chromiumによる自動テストで次の内容を確認しています。

画面幅	確認する内容
320px・375px	カードの縦並び、横スクロール、画面の往復
768px	配置の切り替え、キーボードでリンクを開く操作
1280px	カードの横並び、画面の往復