ビューを更に考える (3/7)

続いて、レイアウト・テンプレートで使用するスタイルシートを作成しましょう。スタイルシートは、配置場所に注意する必要があります。これは「views」内には配置しません。「app」フォルダ内にある「webroot」というフォルダの中に用意するのです。

この「webroot」は、静的ファイルを配置するための専用フォルダです。静的フォルダというのは、まあ要するに「PHPのスクリプトやテンプレートなどでなく、ただファイルをそのまま利用するだけのもの」と考えてください。普通のHTMLファイルやスタイルシートがそうですし、イメージファイルなどもそうです。

CakePHPでは、Webアプリケーションにアクセスすると、強制的にCakePHPのプログラムが起動され、そこでファイルが処理されるような仕組みになっています。例えばHTMLファイルのあるアドレスにアクセスしても、そのHTMLファイルが表示されるのではなく、CakePHPのプログラムがまず起動し、そこから指定されたHTMLファイルが読み込まれ処理されるのです。

そこで、「CakePHPは関係なく、ファイルをそのまま呼び出して使用するような場合」のために、このwebrootというフォルダが用意されているわけです。ここに用意したファイルは、すべてCakePHPのプログラムを介さず、直接呼び出すことができます。

では、このwebroot内にある「css」フォルダの中に、「cake.sample.css」というファイルを作成してください。そして以下に挙げたソースコードを記述しましょう。ここでは、テンプレートで使用しているヘッダー・フッター・コンテンツ関係、そして<h>関係のタグのスタイルだけ用意しておきました。それ以外のものは、必要に応じて随時追加していけばよいでしょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

body {
	background: #6A6;
	color: #EFE;
	margin: 0px;
}
#header {
	font-size: 14pt;
	font-weight: bold;
}
#footer {
	color: #DFD;
	font-size: 8pt;
	text-align: right;
}
#content {
	background: #EFE;
	color: #060;
}
h1 { font-size: 14pt; }
h2 { font-size: 12pt; font-weight: bold; }
h3 { font-size: 12pt; }
h4 { font-size: 10pt; }
h5 { font-size: 9pt; }
h6 { font-size: 8pt; }