ど素人によるwebサービス開発日記

ウェブの構造もわかっていない超初心者ですが、Webサービスを開発中です。調べたこと、学んだことをまとめていきます。

CakePHPでBootstrapを使おう!まとめ

初心者でもおしゃれ風なサイトを作りたい!ということでBootstrapをCakePHPにBootsrapをインストールすることにしました。

 

Bootstrapで出来ること

Webサイトのデザインはスタイルシート(CSS)で指示を出します。

なのでざっくりまとめると、BootstrapはCSSが編集しやすくなるように開発されたフレームワーク。

色や形、サイトの配置や大きさなどを決めやすくしてくれるという認識で良いでしょうか。。。

 

実際にはこんなことが出来るそうです。

HTML5アプリ作ろうぜ!(11):Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - @IT

Bootstrapの基本的な使い方 | mororeco

 

CakePHPにBootstrapをインストールしよう!

手順は以下のサイトを参考に。

 ↓

[CakePHP2]Twitter Bootstrapプラグインの使い方 | 独学PHP・MySQL学習入門

CakePHPのTwitterBootstrapプラグインの使い方 | solidpeat

 

Local Hostでの確認は、localhost/ファイル名/twitter_bootstrapで行います。

Bootstrapをインストールしただけで、少しサイトが明るくなった!!(まだまだシンプルすぎるけど)

 

CakePHPにBootstrapで作ったスタイルシートを適用する方法

そもそもCakePHPではどこのフォルダにスタイルシートが入っているのかというと、/app/webroot/css/内に入っています。

独自のスタイルシートを設定する場合も同じ場所にCSSを入れます。

 

あとは、CakePHPのデフォルトでレイアウトの設定がされているので、それを変更する必要があるようだ。

 

CakePHP : 共通レイアウトの変更(画面デザイン・CSS) - bnote

CakePHP2 でオリジナルのレイアウトを使うための2つの作業 | oki2a24

画面をカスタマイズしたい(CakePHP修行 #014) | IDEA*IDEA

【CakePHP】初心者向け・レイアウトの変更方法 | atomicbox

 

ログイン画面に独自のCSSを適用させたい!!

 

Bootstrapは無料のテンプレートも豊富

使いやすいアイコンなどなど

ひと味ちがうTwitter Bootstrapの18個の無料テンプレート&有料まとめサイト - 酒と泪とRubyとRailsと

ダッシュボードのテンプレート

AdminLTE·ここまで多ければ何でもできそう。多機能なBootstrapベースの管理画面テンプレート MOONGIFT

 

他にも調べれば調べるほど色々出てくるテンプレート。

自分のサイトもこんな風になれるのかしら、と淡い期待を寄せる。。。

 

Jetstrapを使えばBootstrapがドラッグ&ドロップで使える!

初心者の私には神のようなサイトもありました。

ドラッグ&ドロップでサイトを組み立てられたら、テンプレートすら必要なくなるかもしれません。

(初心者にはテンプレートの導入&アレンジすら難しく感じるのです。涙)

 

BootstrapのUIがドラッグアンドドロップだけで組める!最速でウェブのユーザーインターフェースが構築できるエディタ「Jetstrap」 | Chrome Life

 

ということで、CakePHPでBootstrapを使う時のまとめ、でした。

実際に色々出来るようになったら、さらに詳しく書きたいと思います。