月別アーカイブ: 2013年12月

CakePHP2.x LayoutsファイルでCSSの読み込み

ここではCakePHP2.xのLayoutファイルでのCSSの読み込みについて解説しています。

cakephp

Controllerで読み込むcssファイルを設定

<?php

    $arrCss = array();
    array_push($arrCss, 'common');
    array_push($arrCss, 'default');
    $this->set('arrCss', $arrCss);

拡張子の「.css」は省略して記述してください。
読み込むcssファイルは
/app/webroot/css/以下に配置します。

Layoutsファイル

<?php echo $this->Html->css($arrCss, 'stylesheet', array('media'=>'screen'));?>

Layoutファイルのhead内に記述します。
これでCSSファイルの読み込みができます。

出力結果

<link rel="stylesheet" type="text/css" href="/css/common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/default.css" media="screen" />

/app/webroot/css/以下にフォルダを作る場合

<?php

    $arrCss = array();
    array_push($arrCss, 'admin/common');
    array_push($arrCss, 'admin/default');
    $this->set('arrCss', $arrCss);

/app/webroot/css/admin/以下にcssファイルを配置した場合の例です。
$this->Html->css();で生成されるcssファイルの場所は/app/webroot/css/がデフォルトなので、/app/webroot/css/以下を指定します。

出力結果

<link rel="stylesheet" type="text/css" href="/css/admin/common.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/admin/default.css" media="screen" />

関連記事
CakePHP2.x LayoutsファイルでJavascriptの読み込み