CodeIgniterのビューとCSS・JavaScriptを連携させる方法！初心者向け完全解説

CodeIgniterのビューとCSS・JavaScriptを連携させる方法

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

生徒

「CodeIgniterで作ったWebサイトに色をつけたり、動きを加えたりしたいです！」

先生

「それにはCSSやJavaScriptというファイルを使います。CodeIgniterのビューと連携させるコツがあるんですよ。」

生徒

「普通のHTMLと同じように書けばいいんですか？」

先生

「基本は同じですが、CodeIgniterには『決まった置き場所』があります。初心者の方でも分かりやすく説明しますね！」

1. CodeIgniterにおけるビューと外部ファイルの基本

プログラミングの世界では、画面の見た目を作る担当をビュー（View）と呼びます。CodeIgniter（コードイグナイター）というPHPのフレームワークを使っている場合、このビューは主にHTMLで書かれます。

しかし、HTMLだけでは「文字が並んでいるだけの地味なページ」になってしまいます。そこで必要になるのが、デザインを整えるCSS（シーエスエス）と、ボタンを押した時の動きなどを作るJavaScript（ジャバスクリプト）です。

初心者の方が最初につまずくポイントは、「これらのファイルをどこに置いて、どうやって読み込ませるか」という点です。CodeIgniterには「公開ディレクトリ」という特別なルールがあるため、まずはその場所を理解することから始めましょう。

2. ファイルを置く場所「publicフォルダ」をマスターしよう

CodeIgniterでWebサイトを作るとき、画像やCSS、JavaScriptなどのファイルは、必ずプロジェクトの中にある「public」フォルダの中に入れます。なぜなら、インターネットを通じて外部からアクセスできるのは、このフォルダの中身だけと決まっているからです。

例えば、家をイメージしてください。家の中（システムの中身）には勝手に入られたくないですよね？でも、郵便ポスト（publicフォルダ）なら誰でも触れます。CSSやJavaScriptは、ブラウザが読みに行く必要があるため、この「ポスト」の中に置く必要があるのです。

一般的には、publicフォルダの中にさらにフォルダを作って整理します。

public/css/ ・・・ CSSファイルを入れる
public/js/ ・・・ JavaScriptファイルを入れる
public/images/ ・・・写真やイラストを入れる

このように整理整頓することで、後から見たときにも分かりやすいプログラムになります。

3. helperを使ってURLを簡単に取得する方法

ファイルを読み込むとき、ファイルの場所を「URL（住所）」で指定する必要があります。しかし、自分のパソコンで動かしているときと、本番のサーバーで動かしているときでは、この住所が変わってしまうことがあります。

そこで便利なのがCodeIgniterのURLヘルパー（helper）です。これを使うと、自動的にサイトの正しい住所を取得してくれるbase_url()という便利な命令が使えるようになります。これを使うためには、コントローラーという司令塔の部分でヘルパーを読み込む必要があります。


// コントローラーでの記述例
public function index()
{
    // URLヘルパーを読み込む（これでbase_urlが使えるようになる）
    helper('url');
    
    // ビューを表示する
    return view('welcome_message');
}

この一行を書くだけで、複雑な住所の問題を魔法のように解決してくれます。プログラミング未経験の方でも、「まずはこれを書くんだな」と覚えておけば大丈夫です。

4. ビューでCSSを読み込む具体的な手順

さて、いよいよビュー（HTMLファイル）の中でCSSを読み込んでみましょう。HTMLの<head>というタグの中に、リンクを貼るためのコードを書きます。ここで先ほどのbase_url()が活躍します。


<!DOCTYPE html>
<html>
<head>
    <title>CodeIgniter練習中！</title>
    <link rel="stylesheet" href="<?= base_url('css/style.css') ?>">
</head>
<body>
    <h1 class="text-primary">こんにちは！</h1>
    <p>CSSが適用されると、この文字に色がつくよ。</p>
</body>
</html>

<?= base_url('css/style.css') ?> という部分は、PHPの短い書き方で「サイトの住所の後に /css/style.css をくっつけて表示してね」という意味になります。これなら、フォルダを移動してもリンク切れが起きにくくなります。

5. JavaScriptで動きをつける連携方法

次に、JavaScriptを読み込んでみましょう。JavaScriptは、一般的に画面の読み込みを邪魔しないように、一番下（</body>の直前）に書くのが一般的です。これもCSSと同じように、base_url()を使って場所を教えてあげます。


<button id="myButton">ここをクリック！</button>

    <script src="<?= base_url('js/main.js') ?>"></script>
</body>
</html>

これで、public/js/main.jsに書いた「ボタンを押したらメッセージを出す」といったプログラムが、自分のWebページで動くようになります。連携はたったこれだけです！

6. 実際に動くか確認してみよう！実行結果のイメージ

正しく設定できれば、ブラウザで見たときにデザインが反映されます。例えば、CSSで文字を赤くし、JavaScriptでアラートが出るようにした場合、以下のような結果になります。


（ブラウザの表示結果）
・「こんにちは！」という文字が青色になっている
・ボタンを押すと「ボタンが押されました！」という小さな窓（アラート）が出る

もし、何も変わらない場合は、ブラウザの「開発者ツール」という機能（キーボードのF12キー）を使って、ファイルが読み込めているか確認しましょう。赤文字でエラーが出ていなければ成功です！

7. よくある失敗！リンク切れを防ぐコツ

初心者の方が一番ハマるのが「ファイルが見つかりません（404 Not Found）」というエラーです。これは、指定した住所にファイルが置いていないことが原因です。以下のポイントをチェックしてみてください。

スペルミス： cssと書いてあるか、sisになっていないか。
大文字小文字： Style.cssとstyle.cssは、コンピューターにとっては別のものです。
フォルダ階層： publicの中にちゃんとフォルダを作っていますか？

特にCodeIgniterでは「publicフォルダより上の階層」にあるファイルは、セキュリティの関係でブラウザから見ることができません。必ずpublicフォルダの中に入れる、というルールを徹底しましょう。

8. テンプレートエンジンを意識した効率化

慣れてきたら、すべてのページで同じCSSやJavaScriptを書くのは大変だと気づくでしょう。そんな時は、CodeIgniterの「レイアウト」機能を使います。ヘッダー（頭の部分）やフッター（足の部分）を共通のファイルとして作っておき、中身だけを入れ替える仕組みです。

この仕組みを使うと、CSSの読み込みコードを1箇所書き換えるだけで、サイト全体のデザインを一気に変更できるようになります。これがプログラミングの「再利用性」という考え方で、効率よく開発するための第一歩です。


// app/Views/layout/main.php（共通テンプレート）
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="<?= base_url('css/bootstrap.min.css') ?>">
</head>
<body>
    <?= $this->renderSection('content') ?>
    <script src="<?= base_url('js/app.js') ?>"></script>
</body>
</html>

このように共通化することで、初心者でも大規模なサイトを管理しやすくなります。まずは1枚のページから始めて、少しずつこうした便利な機能に挑戦していきましょう！

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

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

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

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

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

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