CodeIgniterでヘッダー・フッターを共通化！初心者向けテンプレート作成ガイド

CodeIgniterでヘッダー・フッターを共通化する方法

先生と生徒の会話形式で理解しよう

生徒

「ホームページを作るとき、全部のページに同じメニューやコピーライトを書くのが大変です。もっと楽にする方法はありますか？」

先生

「CodeIgniter（コードイグナイター）という道具を使えば、ヘッダーやフッターを『部品』として作って、それを使い回すことができますよ。」

生徒

「部品にする？なんだか難しそうですが、初心者でもできますか？」

先生

「もちろんです！パズルのピースを組み合わせるような感覚で、誰でも簡単に共通化ができます。その仕組みを詳しく見ていきましょう！」

1. 共通化（テンプレート化）とは何？

Webサイトを作るとき、一番上の「ロゴやメニューがある部分（ヘッダー）」や、一番下の「著作権などが書いてある部分（フッター）」は、どのページを見ても同じ内容であることが多いですよね。これをページごとに1枚ずつ作っていると、メニューの名前を一つ変えるだけで全てのファイルを修正しなければならず、とても手間がかかります。

そこで便利なのが「共通化」という考え方です。あらかじめヘッダーやフッターを別々のファイルとして保存しておき、必要なときに呼び出して合体させる仕組みを指します。CodeIgniterではこれを「ビュー（View）」という機能を使って実現します。ビューとは、ユーザーの画面に表示される「見た目」の部分を担当するファイルのことです。

例えば、家の建築に例えてみましょう。全ての部屋に同じデザインの窓を付けるとき、窓をその場で作るのではなく、工場で大量生産された「窓の部品」を持ってきて取り付ける方が効率的ですよね。プログラミングも同じで、使い回せる部品を先に作っておくのがプロのやり方です。

2. 部品となるファイルを作成しよう

まずは、共通して使いたい部品を作ります。CodeIgniterのプロジェクトの中にある app/Views というフォルダの中にファイルを保存していきます。パソコンに慣れていない方は、このフォルダが「見た目用のファイルをしまう魔法の箱」だと思ってください。

今回は、header.php（上側）、content.php（中身）、footer.php（下側）の3つのファイルを用意します。まずは一番上に表示されるヘッダーのコードを書いてみましょう。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>私のホームページ</title>
</head>
<body>
    <header style="background: #f4f4f4; padding: 10px;">
        <h1>公式サイトへようこそ！</h1>
        <nav>
            <ul>
                <li>ホーム</li>
                <li>ニュース</li>
                <li>お問い合わせ</li>
            </ul>
        </nav>
    </header>

このファイルには、HTMLの最初からヘッダーの終わりまでを書きます。次に、一番下に表示されるフッターファイル footer.php を作成します。


    <footer style="background: #333; color: #fff; padding: 10px; text-align: center;">
        <p>&copy; 2025 はじめてのCodeIgniter</p>
    </footer>
</body>
</html>

ここには、著作権情報とHTMLを締めくくるタグを書きます。これで「上」と「下」の部品が完成しました。

3. コントローラーで部品を組み立てる方法

部品ができたら、それを組み合わせて画面に表示させる指示を出します。この指示を出す役割を担うのが「コントローラー」です。コントローラーは、料理店で言うところの「シェフ」のような存在です。「ヘッダーを出して、次に中身を出して、最後にフッターを出してね」と順番に命令をしていきます。

app/Controllers/Home.php というファイルを編集して、次のように書いてみましょう。CodeIgniterでは echo view('ファイル名'); と書くだけで、そのファイルを画面に表示することができます。


namespace App\Controllers;

class Home extends BaseController
{
    public function index()
    {
        // 1. ヘッダーを表示
        echo view('header');
        
        // 2. メインの中身を表示
        echo view('content');
        
        // 3. フッターを表示
        echo view('footer');
    }
}

このように順番に並べるだけで、ブラウザ（Google Chromeなど）で見ると、3つのファイルが合体して1つのきれいなページとして表示されます。これが最も基本的で簡単な共通化の方法です。

4. ページごとにタイトルを変える「変数」の使い方

共通化をすると、どのページも同じタイトル（例えば「私のホームページ」）になってしまいます。しかし、実際にはページごとに「ニュース一覧」や「会社概要」といった個別のタイトルを表示させたいですよね。ここで登場するのが「変数（へんすう）」です。

変数は、値を入れておくための「名前付きの箱」です。コントローラーというシェフが、ビューというお皿に料理（データ）を盛り付けて渡すイメージです。コントローラー側で $data['title'] = 'ニュースページ'; のように箱を作って、それをビューに送ります。


public function news()
{
    // ページごとの情報を箱に入れる
    $data = [
        'page_title' => '最新のニュース一覧',
        'update_date' => '2025年1月1日'
    ];

    // viewの第2引数に$dataを渡すのがポイント！
    echo view('header', $data);
    echo view('news_view', $data);
    echo view('footer');
}

こうすることで、header.php の中では $page_title という名前で中身を取り出すことができるようになります。ページごとに違う言葉を表示できるので、とても柔軟なサイト作りが可能になります。

5. メインコンテンツのビューを作成する

次に、ページの中身（メインコンテンツ）を担当するファイルを作りましょう。例えば app/Views/content.php を作成します。ここはページごとに内容が変わる部分なので、共通の枠組みは持たせず、そのページ独自の文章や写真だけを記述します。


<main style="padding: 20px;">
    <h2>本日のトピックス</h2>
    <p>今日はCodeIgniterのビューについて学んでいます。</p>
    <p>プログラミングは最初は難しく感じるかもしれませんが、一歩ずつ進めば大丈夫です！</p>
    <div class="alert alert-info">
        共通化を覚えると、サイトの管理が劇的に楽になりますよ。
    </div>
</main>

このファイルは単体では不完全なHTMLですが、先ほどのコントローラーが前後を header.php と footer.php で挟んでくれるので、最終的には完璧な状態で表示されます。これが共通化の魔法です。プログラミング未経験の方でも、この「サンドイッチ構造」をイメージできれば、サイト制作の半分を理解したと言っても過言ではありません。

6. パソコン操作が苦手でも大丈夫！ファイルの置き場所のコツ

プログラムを書く準備として、パソコンの中のどこにファイルを置くかが非常に重要です。CodeIgniterではルール（規約）が決まっており、それに従うことでプログラムが動くようになります。これを専門用語で「ディレクトリ構造」と呼びます。

コントローラー： 指示を出すファイル。 app/Controllers/ に置く。
ビュー： 見た目のファイル。 app/Views/ に置く。

ファイルを作るときは、メモ帳ではなく「VSCode（ヴィジュアル・スタジオ・コード）」などのテキストエディタを使うのがおすすめです。文字が色分けされて表示されるので、打ち間違い（タイピングミス）をすぐに見つけることができます。初心者が一番最初につまずくのは、実は「全角スペースが混ざっていた」や「カッコを閉じ忘れた」という単純なミスです。エディタを使いこなすことが、上達への近道です。

7. 複数の部品を効率よく管理する「フォルダ分け」

サイトが大きくなってくると、ビューのファイルが数十枚、数百枚と増えていきます。すると「どのファイルが何だったっけ？」と迷子になってしまいます。そうならないために、app/Views/ の中にフォルダを作って整理整頓しましょう。

例えば、共通パーツは common というフォルダに入れ、ページごとの内容は pages というフォルダに入れるといった具合です。呼び出すときは view('common/header') のように、フォルダ名も一緒に指定します。これだけで、管理のしやすさがぐんと上がります。


// 整理整頓した後の呼び出し方
public function contact()
{
    // 共通フォルダから読み込む
    echo view('common/header');
    // お問い合わせページ専用のファイルを読み込む
    echo view('pages/contact_form');
    echo view('common/footer');
}

フォルダ分けは、机の引き出しを整理するのと同じです。後で自分が困らないように、最初からルールを決めておきましょう。

8. なぜ共通化がSEO対策にもなるのか

最後に、なぜこのように部品を分けることがGoogleなどの検索エンジン（SEO）に良い影響を与えるのかを解説します。実は、共通化自体が直接ランキングを上げるわけではありません。しかし、共通化をしておくと「サイト全体の修正」が素早く正確に行えるようになります。

例えば、最新のSEO技術で「全てのページのメタタグ（説明文）をこう変えなさい」というルールができたとします。共通化していれば、一つのファイルを直すだけで全ページに対応できます。逆に共通化していないと、修正漏れが発生し、検索エンジンからの評価を落とす原因になります。メンテナンスのしやすさは、長期的に見てWebサイトの成功に直結するのです。

CodeIgniterを使えば、初心者でもプロのような保守性の高い（手入れのしやすい）サイトを作ることができます。まずはヘッダーとフッターを分けるところから、あなたのプログラミングライフをスタートさせてみてください！

公的機関での指導実績【CodeIgniterモダン開発実践セミナー】

商用CodeIgniter 4 徹底実践講座：軽量MVCによる高速開発とシステムのモダナイゼーション

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「極限のパフォーマンス」を実装する。CodeIgniter 4で軽量・高速な商用システムを構築。

本講座では、フレームワークのオーバーヘッドを最小限に抑えた「高レスポンスなWebアプリケーション設計」を学びます。シンプルながら強力なCodeIgniter 4を通じ、既存システムのPHP 8.x対応や、リソース効率を極めたAPI開発など、実務で重宝される最適化技術を習得します。