CSS FuelPHP

FuelPHPでTwitterBootstrap2.0の設定

更新日:

PCサイトとスマートフォンサイトを別々に作成するのは面倒だという方のために、Twitter Bootdtrapを使ったスマートフォン兼用サイト(レスポンシブデザイン)が作成できるTwitterBootstrapの設定方法をご紹介したいと思います。今回もFuelPHPでの設定を主体に説明いたしますが、普通のサイトや別のフレームワークでも基本的に同じだと思いますので、参考にして下さい。

1. まず、下記の公式サイトへ行き、Twitter Bootstrapをダウンロードします。

http://twitter.github.com/bootstrap/

2. 解凍したファイルを見てみます。直下に『css』『img』『js』の3つのフォルダがあります。

3. cssフォルダの中には、『bootstrap.css』『bootstrap.min.css』『bootstrap-responsive.css』『bootstrap-responsive.min.css』の4つのファイルがあります。今回使用するのは、『bootstrap.min.css』『bootstrap-responsive.min.css』の2つですが、せっかくですので、全て保存することにします。

4. それでは、pubic/assets/cssフォルダの中に上記の4つのファイルを保存します。ただ、気をつけないといけないのは、FuelPHPでは、デフォルトで、bootstrap名でcssファイルが存在します。既にこのcssファイルを使ってサイトを構築している方は、サイトのレイアウトが崩れてしまいますので、別名で保存するようにして下さい。私の場合はこのまま上書き保存します。

『.min』のファイルについて
cssファイルやjsファイルには、名前に『.min』のついているファイルとついていないファイルが同時に添付されている場合がよくあると思います。どちらも同じ内容が記述されているのですが、『.min』のついているファイルは、改行やタブ、コメントなどの文字を可能な限り省略して容量を小さくしたものです。通常、Webサーバーに設置して利用するときは、ユーザビリティを考えて、『.min』のついているファイルを利用します。只、『.min』のついているファイルを解読しようと思うと容易ではありません。そこで、この同じ名前の『.min』のついていないファイルで中身を確認する事が出来るようになっています。

5. 次に、imgフォルダ内の2つのファイルをpublic/assets/imgフォルダ内に保存します。

6. 最後に、jsフォルダ内の『bootstrap.js』と『bootstrap.min.js』の2つのファイルをpublic/assets/jsフォルダ内に保存します。jsファイルも使用するのは、『bootstrap.min.jp』だけですが、上記のような理由で両方とも保存しておいて下さい。これもcssと同様に同じ名前のファイルがありますので、注意して下さい。

7. 以上で、TwitterBootstrapのインストールはおしまいです。後は、このCSSファイル及びjsファイルを適用するページに読み込むだけです。

8. それでは、TwitterBootstrapの読み込み方を記述しておきます。TwitterBootstrapを利用してサイトを作成するページのヘッダー部分に下記のコードを記述します。

<meta name="viewport" content="width=device-width,minimum-scale=1">
 <?php echo Asset::css('bootstrap.min.css');?>
 <?php echo Asset::css('bootstrap-responsive.min.css');?>
 <?php echo Asset::css('my-style.css');?>

8. 1行目のviewportは、スマートフォンで適正なサイズに表示させるために必要です。これを記述しないと、スマートフォンでは、縮小表示しますので、かなり見づらい画面になってしまいます。

9. 2行目でbootstrapの基本cssを読み込みます。3行目は、レスポンシブデザイン用のcssを読み込みます。最後のmy-style.cssは、Twitter Bootstrapのcssを修正するために使います。cssをいじらないという人は必要ないかもしれませんが、ちょっとした変更をしたい場合もありますので、使わなくても一応あった方がいいと思います。とりあえず中身は空で構いませんので、my-style.css名で、public/assets/cssフォルダに保存して下さい。

10. そして</body>タグの直前にjsファイルを読み込むためのコードを記述します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<php echo Asset::js('bootstrap.min.js');?>

かあるいは

<?php echo Asset::js('jquery-1.7.1.min.js');?>
<php echo Asset::js('bootstrap.min.js');?>

を記述します。下の方は、jqueryのサイトからjquery-1.7.1.min.jsをダウンロードして、public/assets/jsフォルダの中に保存してある場合に使用します。ファイル名はダウンロードしてあるファイル名に合わせて下さい。

11. 尚、上記のcssファイル及びjsファイルの読み込み順序は記述通りにお願いします。順番が違うと起動しない場合があります(というか起動しないはずです)。

これで、TwitterBootsrapを使ったサイトを構築することが出来ます。TwitterBootstrapの使い方は近いうちにご紹介したいと思います。本日は以上です。

-CSS, FuelPHP
-,

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.