236 views

概要

レスポンシブデザインは、さまざまなデバイス（PC、タブレット、スマートフォン）で見やすいレイアウトを提供するための技術です。CakePHP4では、Bootstrapと連携することで簡単にレスポンシブデザインが実現できます。この記事では、CakePHP4にBootstrapを導入し、レスポンシブなレイアウトやUIコンポーネントを活用する手順を解説します。

ステップ1：Bootstrapの導入

まず、CakePHP4プロジェクトにBootstrapを導入します。Bootstrapの導入方法にはCDNとローカルファイルの2つの方法がありますが、ここでは簡単なCDNを利用した方法を紹介します。

1.1 BootstrapのCDNリンクを追加

CakePHP4のビューは通常templates/layout/default.phpで設定されます。このファイルにBootstrapのCSSとJavaScriptのCDNリンクを追加します。

<!DOCTYPE html>
<html>
<head>
    <?= $this->Html->charset() ?>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?= $this->fetch('title') ?></title>
    <?= $this->Html->meta('icon') ?>

    <!-- BootstrapのCSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <?= $this->fetch('meta') ?>
    <?= $this->fetch('css') ?>
    <?= $this->fetch('script') ?>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="/">MyApp</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="/articles">Articles</a></li>
                <li class="nav-item"><a class="nav-link" href="/users">Users</a></li>
            </ul>
        </div>
    </nav>
    <main class="container">
        <?= $this->Flash->render() ?>
        <?= $this->fetch('content') ?>
    </main>

    <!-- BootstrapのJavaScript -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.4.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

viewportメタタグにより、デバイスの幅に合わせてスケールが調整されます。
ナビゲーションバーは、navbarクラスを使ってレスポンシブに折りたたみメニューを提供します。

1.2 ローカルでのBootstrap導入（オプション）

ローカル環境でBootstrapを管理したい場合は、Bootstrapのファイルをダウンロードし、webroot/cssとwebroot/jsディレクトリに保存してリンクを指定する方法もあります。

ステップ2：レスポンシブデザインの基本

Bootstrapには、レスポンシブデザインを実現するためのグリッドシステムが用意されています。containerやrow、col-クラスを使用して、ページ全体のレイアウトを簡単に調整できます。

2.1 基本的なグリッドレイアウト

例えば、2カラムレイアウトを作成する場合、以下のように記述します。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h1>メインコンテンツ</h1>
            <p>ここにメインのコンテンツが入ります。</p>
        </div>
        <div class="col-md-4">
            <h2>サイドバー</h2>
            <p>ここにサイドバーの内容が入ります。</p>
        </div>
    </div>
</div>

.col-md-8と.col-md-4を使って、画面幅がmd（768px）以上の場合は2:1の割合でカラムを分けます。
グリッドシステムにより、画面サイズに応じて自動的にレイアウトが変更されます。

2.2 モバイル対応のレイアウト

モバイルでは、一つのカラムとして表示されるように設定するには、次のようにレスポンシブなクラスを使います。

<div class="container">
    <div class="row">
        <div class="col-12 col-md-8">
            <h1>メインコンテンツ</h1>
        </div>
        <div class="col-12 col-md-4">
            <h2>サイドバー</h2>
        </div>
    </div>
</div>

ここでは、.col-12クラスを使ってモバイル画面ではフル幅で表示されるようにし、mdサイズ以上で2カラム表示に切り替わるように設定しています。

ステップ3：フォームとテーブルのスタイル適用

Bootstrapを使用することで、フォームやテーブルのスタイルを整えることができます。CakePHPのFormHelperやTableHelperとBootstrapを組み合わせ、見やすいレイアウトを実現します。

3.1 フォームのBootstrapスタイル

FormHelperにクラスを指定することで、Bootstrapのスタイルを適用したフォームが作成できます。

<div class="container">
    <?= $this->Form->create(null, ['class' => 'form-horizontal']) ?>
        <div class="form-group">
            <?= $this->Form->control('username', ['label' => 'ユーザー名', 'class' => 'form-control']) ?>
        </div>
        <div class="form-group">
            <?= $this->Form->control('password', ['type' => 'password', 'label' => 'パスワード', 'class' => 'form-control']) ?>
        </div>
        <button type="submit" class="btn btn-primary">ログイン</button>
    <?= $this->Form->end() ?>
</div>

form-controlクラスを使用することで、Bootstrapのスタイルが適用されたフォームフィールドが生成されます。ボタンにもbtn btn-primaryクラスを追加して、Bootstrapのボタンスタイルを適用しています。

3.2 テーブルのBootstrapスタイル

Bootstrapのtableクラスを使って、表形式のデータを見やすく整えます。

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>タイトル</th>
            <th>作成日</th>
            <th>アクション</th>
        </tr>
    </thead>
    <tbody>
        <?php foreach ($articles as $article): ?>
        <tr>
            <td><?= h($article->id) ?></td>
            <td><?= h($article->title) ?></td>
            <td><?= h($article->created->format('Y-m-d')) ?></td>
            <td>
                <?= $this->Html->link('編集', ['action' => 'edit', $article->id], ['class' => 'btn btn-secondary btn-sm']) ?>
                <?= $this->Form->postLink('削除', ['action' => 'delete', $article->id], ['confirm' => '削除しますか？', 'class' => 'btn btn-danger btn-sm']) ?>
            </td>
        </tr>
        <?php endforeach; ?>
    </tbody>
</table>

table-stripedクラスにより、行ごとに交互の背景色が付くことで視認性が向上します。
ボタンにbtnとbtn-secondaryクラスを追加することで、編集・削除ボタンの見た目も整います。

ステップ4：ナビゲーションバーの設定

ナビゲーションバーもレスポンシブ対応しておくことで、スマートフォンやタ

ブレットでの表示が見やすくなります。Bootstrapのナビバーは、折りたたみメニューを簡単に実現できるため、CakePHPのリンクと組み合わせて利用しましょう。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">MyApp</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <?= $this->Html->link('ホーム', ['controller' => 'Pages', 'action' => 'display', 'home'], ['class' => 'nav-link']) ?>
            </li>
            <li class="nav-item">
                <?= $this->Html->link('記事', ['controller' => 'Articles', 'action' => 'index'], ['class' => 'nav-link']) ?>
            </li>
        </ul>
    </div>
</nav>

navbar-expand-lgクラスを使うことで、大きな画面ではメニューが表示され、モバイルでは折りたたみメニューに切り替わります。
ナビゲーションの各リンクにCakePHPのHtmlHelperを使用して、動的なリンクが生成されるようにしています。

まとめ

CakePHP4とBootstrapを組み合わせることで、レスポンシブなデザインを簡単に実現でき、デバイスごとに最適なレイアウトを提供できます。Bootstrapのグリッドシステムやコンポーネントを活用し、ユーザーが見やすく、操作しやすいWebサイトを構築してみてください。

Page 32 of 34.

前のページ次のページ

[添付ファイル]

1.php_xdebug-3.0.4-8.0-vs16-x86_64.dll

お問い合わせ

プロフィール

すぺぺぺ

自己紹介

本サイトの作成者。
プログラムは趣味と勉強を兼ねて、のんびり本サイトを作っています。
フレームワークはdjango。
ChatGPTで自動プログラム作成に取り組み中。

サイト/ブログ

https://www.osumoi-stdio.com/novel/

ツイッター

@darkimpact0626

Windowsで始めるCakePHP4

CakePHP4とBootstrapでレスポンシブデザインを実現！フロントエンドと連携する方法

概要