ビューを更に考える (3/7)
作成:2010-02-17 16:02
更新:2010-05-10 19:13
更新:2010-05-10 19:13
■スタイルシートを用意する
続いて、レイアウト・テンプレートで使用するスタイルシートを作成しましょう。スタイルシートは、配置場所に注意する必要があります。これは「views」内には配置しません。「app」フォルダ内にある「webroot」というフォルダの中に用意するのです。
この「webroot」は、静的ファイルを配置するための専用フォルダです。静的フォルダというのは、まあ要するに「PHPのスクリプトやテンプレートなどでなく、ただファイルをそのまま利用するだけのもの」と考えてください。普通のHTMLファイルやスタイルシートがそうですし、イメージファイルなどもそうです。
CakePHPでは、Webアプリケーションにアクセスすると、強制的にCakePHPのプログラムが起動され、そこでファイルが処理されるような仕組みになっています。例えばHTMLファイルのあるアドレスにアクセスしても、そのHTMLファイルが表示されるのではなく、CakePHPのプログラムがまず起動し、そこから指定されたHTMLファイルが読み込まれ処理されるのです。
そこで、「CakePHPは関係なく、ファイルをそのまま呼び出して使用するような場合」のために、このwebrootというフォルダが用意されているわけです。ここに用意したファイルは、すべてCakePHPのプログラムを介さず、直接呼び出すことができます。
では、このwebroot内にある「css」フォルダの中に、「cake.sample.css」というファイルを作成してください。そして以下に挙げたソースコードを記述しましょう。ここでは、テンプレートで使用しているヘッダー・フッター・コンテンツ関係、そして<h>関係のタグのスタイルだけ用意しておきました。それ以外のものは、必要に応じて随時追加していけばよいでしょう。
この「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; }
※関連コンテンツ
「初心者のためのCakePHP 1.3 プログラミング入門」に戻る