レスポンシブ対応の画面作成にはBootstrapを使うことが多々あります。ただ、本家Bootstrapではなく、日本語サイト制作を考えられたものを使っています。
Honoka – 日本語も美しく表示できるBootstrapテーマ
これをCodeIgniterに組み込むことにしました。
1.ディレクトリを配置
まずはBootstrapのcss, font, jsディレクトリを設置します。
色々な設置場所があるかもしれませんが、色々調べてみてアプリケーションディレクトリと同階層（index.phpがある場所）が良さそうです。（CakePHPなんかは”app/vendor/”でしたね）
2.ヘッダー・コンテンツ・フッターにviewを分割
３つのビューを作成します。
ヘッダーとフッターは共通で使用し、コンテンツ部分はファイルを分けて色々作り、コントローラで都度必要なものを指定するイメージです。
ディレクトリパスが入る部分はbase_url()に置き換えています。
/views/common/header.php
<!DOCTYPE html>
:
<title><?php echo $title; ?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/bootstrap.css">
:
<div class="container">
/views/index.php
<p>自由なコンテンツ</p>
/views/common/footer.php
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
:
</html>
3.viewを呼び出す
/controllers/main.php
public function index()
{
$header['title'] = 'ページタイトル';
$this->load->view('header', $header);
$this->load->view('index');
$this->load->view('footer');
}
