CI フレームワークで CSS スタイルを参照する手順の詳細な説明

WBOY
リリース: 2024-01-16 09:28:05
オリジナル
1044 人が閲覧しました

CI フレームワークで CSS スタイルを参照する手順の詳細な説明

チュートリアル: CSS スタイルを CI フレームワークに導入する詳細な手順。具体的なコード例が必要です。


はじめに:

Web アプリケーションの開発において、スタイルは非常に重要です。一部。 CSS (Cascading Style Sheets) を使用して Web ページを美しくし、より良いユーザー エクスペリエンスを提供します。 CodeIgniter (CI) フレームワークを使用して開発する場合、CSS スタイルを正しく導入する方法が特に重要です。この記事では、CI フレームワークに CSS スタイルを導入する詳細な手順を紹介し、具体的なコード例を示します。

ステップ 1: CSS ファイルを作成する

まず、CI フレームワークのリソース フォルダーに新しい CSS ファイルを作成する必要があります。 CI フレームワークの「assets」ディレクトリに新しいフォルダーを作成して、CSS ファイルを保存できます。 CSS ファイルを「assets/css」ディレクトリに保存し、「style.css」という名前の CSS ファイルを作成すると仮定します。このファイルでは、背景色、テキスト サイズ、境界線などのさまざまなスタイルを定義できます。

/* style.css */

body {
    background-color: #f1f1f1;
}

h1 {
    color: #333;
    font-size: 24px;
}

.button {
    background-color: #d32f2f;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}
ログイン後にコピー

ステップ 2: CI のリソース パスを構成する

CI フレームワークは、デフォルトでリソース ファイルのパスを構成しています (通常は「applicationconfigconfig.php」ファイル内)。ファイルを開いて、次のコード行を見つけます。

$config['base_url'] = '';
ログイン後にコピー

これを次のように変更します。

$config['base_url'] = 'http://your-domain.com';
ログイン後にコピー

「your-domain.com」を Web アプリケーションの実際のドメイン名に置き換えます。
ステップ 3: CSS ファイルをビュー ファイルに導入する次に、作成した CSS ファイルをビュー ファイルに導入する必要があります。 CI フレームワークでは、組み込みの base_url() 関数を使用してリソース ファイルを導入できます。ビュー ファイルが「application/views/welcome_message.php」であると仮定して、ファイルの

タグ内に次のコード行を追加します。

<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/style.css'); ?>">
ログイン後にコピー

このコード行先ほど作成した CSS ファイルにリンクします。
ステップ 4: CSS ファイルをロードする最後に、CSS ファイルを CI フレームワークのコントローラー ファイルにロードする必要があります。コントローラー ファイルでは、CI フレームワークによって提供される $this->load->helper() および

$this->load->view()

を使用できます。 CSSファイルを読み込み、ファイルを表示する機能。以下は、コントローラー ファイルの名前が「application/controllers/Welcome.php」であると仮定したサンプル コントローラー ファイルです: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php defined('BASEPATH') OR exit('No direct script access allowed'); class Welcome extends CI_Controller { public function index() { $this-&gt;load-&gt;helper('url'); $this-&gt;load-&gt;view('welcome_message'); } }</pre><div class="contentsignin">ログイン後にコピー</div></div>この例では、<code>$this->load-> を渡します。 helper('url') 関数は、base_url() 関数を使用できるように、CI フレームワークの URL ヘルパーをロードします。次に、ビュー ファイル「welcome_message.php」が

$this->load->view('welcome_message')

関数を通じてロードされます。

概要: ###上記の 4 つの手順を通じて、独自の CSS スタイルを CI フレームワークに導入することができました。これで、必要に応じて CSS ファイルにスタイルを追加し、ビュー ファイルに適用できるようになります。 CI フレームワークの柔軟性により、CSS スタイルの導入と管理がシンプルかつ効率的になります。この記事がお役に立てば幸いです! ###

以上がCI フレームワークで CSS スタイルを参照する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!