CakePHPでBootstrapを用いたWebページを表示したい

Question

CakePHPでBootstrapを用いたWebページを表示したい

CakePHPを用いたWebシステムを開発しており、私はWebサイトの作成を担当しています。
作成に当たってはネット上のBootstrap対応テンプレートファイルをダウンロードし、それをまた色や配置等をCSSでカスタマイズして使用しています。

発生している問題

CSSがうまく反映されません。
ローカルファイルをブラウザ表示している状態では綺麗に表示されているのですが、そのHTMLファイルをCakePHPで使えるようパスやCSS読み込みに関する記述を書き直してからApacheを通してブラウザ表示してみるとうまく表示できていません。
具体的には、

• CSS　サイズやマージン、バックグラウンドカラーに関する記述が反映されていない
• Javascript　ハンバーガーボタンの開閉、Topに戻るボタンが機能しない
• ページ最下部にCakePHPのフッターが表示される

といった問題が発生しております。

おそらくCakePHPのデフォルトCSSが読み込まれてしまっているせいではないか？と考えております。
デフォルトCSSを読み込まないようにする方法はありますでしょうか。

試したこと

Controller内に

$this->autoLayout = false;

と記載してみました。すると下記のようなエラー画面になります。

どうにかしてデフォルトCSSをオフにしたいのですが、良い方法はありますでしょうか。
それともそもそもCakePHPでBootstrapを使おうとするのは難易度が高いのでしょうか。

先輩方のご意見をお待ちしております。

Comments

[退会済みユーザー]

デバッグ用のエラー画面を bootstrap で表示したいでOK?

[Yazmatto]

わかりにくくて申し訳ございません。Webページ全体をBootstrapで作ったのでそれをCakePHPを用いてブラウザで表示させたいのです。Webサービスを作りたい→Bootstrapを使ってhtml、css、jsファイルなどを作る→CakePHPとして表示できるようにしてみる→うまくいかない という流れです。

Answer 1

そうですね、CakePHPをインストールした直後のデフォルトの状態ではCakePHPの標準CSSが設定されています。
src/Template/Layout/default.ctpに設定されていますので、bootstrapやご自身で作成されたCSSに変更してください。

    <?= $this->Html->css('base.css') ?>
    <?= $this->Html->css('style.css') ?>

関連しそうなマニュアル
https://book.cakephp.org/3.0/ja/views.html#view-layouts
https://book.cakephp.org/3.0/ja/views/helpers/html.html#css

Comments

[Yazmatto]

ありがとうございました。無事に反映されるようになりました。