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」という名前のフォルダーを作成します。

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

4. 
   
   
       
       <?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 に正常に導入できました。フレームワーク を使用し、ビュー ファイルに適用できます。
5. 概要

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 サイトの他の関連記事を参照してください。