CI フレームワークに CSS スタイルを追加するにはどうすればよいですか?

PHPz

リリース： 2024-01-16 10:51:05

オリジナル

835 人が閲覧しました

CI フレームワークに CSS スタイルを追加するにはどうすればよいですか?

CSS スタイルを CI フレームワークに導入する方法

CSS (カスケードスタイルシート) は、Web デザインにおいて非常に重要な役割を果たしており、Web ページのレイアウトを制御できます。、スタイルと装飾効果。 CodeIgniter (CI) フレームワークを使用して Web サイトを開発する場合、CSS スタイルシートの導入は必須の手順です。この記事では、CI フレームワークに CSS スタイルを導入する方法と具体的なコード例を詳しく紹介します。

1. CI フレームワークに CSS フォルダーを作成する

まず、すべての静的リソースを保存するために、CI フレームワークのルートディレクトリに「assets」という名前のフォルダーを作成する必要があります。「assets」フォルダー内に「css」という名前の別のフォルダーを作成し、CSS ファイルを保存します。これにより、ファイル構造が明確になり、静的リソースの一元管理が容易になります。

2. CSS スタイルシートを記述する

「css」フォルダーに「style.css」という名前のファイルを作成し、対応する CSS スタイルコードを記述します。簡単な例を次に示します。

/* style.css */

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

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

p {
    color: #666;
    font-size: 16px;
}

ログイン後にコピー

上記は、Web ページの背景色、フォントスタイル、タイトル、段落スタイルを定義する単純な CSS スタイルシートです。

3. CI フレームワークへの CSS スタイルの導入

CI フレームワークでは、base_url() 関数を link_tag()# と組み合わせて使用できます。 ## CSS スタイルを導入する関数。

まず、コントローラーファイルで、CI フレームワークに必要な補助関数「URL」を読み込みます。これは、コントローラーのコンストラクターメソッドに次のコードを追加することで実現できます:

$this->load->helper('url');

ログイン後にコピー

次に、CSS スタイルを導入する必要があるビューファイルに、次のコードを使用して CSS スタイルシートを導入します。

<?php echo link_tag('assets/css/style.css'); ?>

ログイン後にコピー

このコードは、CI フレームワークの構成に基づいて正しい CSS ファイルパスを生成します。パスを HTML に埋め込みます。

4. 完全な例

次は、CSS スタイルを CI フレームワークに導入する方法を示す完全な例です。 CI フレームワーク「assets」という名前のフォルダー。

「assets」フォルダー内に「css」という名前のフォルダーを作成します。

「css」フォルダーに「style.css」という名前のファイルを作成し、対応する CSS スタイルコードを記述します。
CIフレームワークに必要な補助機能「URL」をコントローラーファイルに読み込みます。
CSS スタイルを導入する必要があるビューファイルに、次のコードを通じて CSS スタイルシートを導入します。

CI框架引入CSS样式示例 <?php echo link_tag('assets/css/style.css'); ?>

Welcome to CodeIgniter!

This is an example demonstrating how to include CSS stylesheet in CodeIgniter framework.

ログイン後にコピー

上記の手順により、CSS スタイルを CI に正常に導入できました。フレームワークを使用し、ビューファイルに適用できます。

概要
CSS スタイルシートを CI フレームワークに導入するのは非常に簡単です。CSS ファイルを保存するフォルダーを作成し、対応するビューファイルで
link_tag()# を使用するだけです。 . ##CSSスタイルシートを導入する機能。これにより、CSS スタイルの管理と適用が容易になり、Web ページがより美しく読みやすくなります。
参考:
CodeIgniter 公式ドキュメント - URL ヘルパー機能: https://codeigniter.com/user_guide/helpers/url_helper.html

CodeIgniter 公式ドキュメント - HTML ヘルパー関数: https://codeigniter.com/user_guide/helpers/html_helper.html
以上がCI フレームワークに CSS スタイルを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。