back

レイアウトを作ろう！ (2/4)

■レイアウトファイルを作成する

では、実際に簡単なレイアウトを作成してみましょう。前回、使用したSampleアプリケーション用に、「Sample.ctp」というレイアウトファイルを作ってみます。

下のリスト欄に、Sample.ctpのソースコードを掲載しておきます。ここではごくシンプルなページデザインを用意しました。ここでは、ボディ部分は３つのエリアに分けてあります。ざっとレイアウトのタグについて整理しておきましょう。
<div id="container">
ボディにまず配置されるのがこのタグです。この中に、ページの基本的な表示内容が組み込まれます。
<div id="header">
ヘッダー領域です。コンテンツのタイトル表示などがここに用意されます。
<div id="content">
これがコンテンツの表示領域です。ビューとして用意されたものは、この中に組み込まれます。
<div id="footer">
フッター領域です。コピーライトなどのようにページ末尾に必ず表示するものがここに用意されます。

これでページの基本的な構成はできました。ただし！　このSample.ctpは、HTMLノタグによるページの構造を記述しただけです。肝心の表示に関する具体的なデザインはほとんどありません。

ページのデザインは、専用のスタイルシートを用意して対応します。スタイルシートは、「app」フォルダ内にある「webroot」というフォルダの中の「css」フォルダに用意されます。

今回は、ここに「sample.css」というファイルでスタイルシートを用意することにしましょう。下のリスト欄にサンプルを挙げておきます。ここでは、必要最低限のスタイルしか用意していません。見ればわかるように、<body>タグと<h1>タグの他は、先ほどあげた４つのタグに割り当てるものだけです。これで、ヘッダー・コンテンツ・フッターの基本的な表示を設定しています。

（※テーブル関係のスタイルも用意されていますが、これは次回以降に使うモデルで利用するためのものです。今回は特に使っていません。）


(by. SYODA-Tuyano.)

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

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

※Sample.ctp

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <?php echo $this->Html->charset(); ?>
  <title>
    <?php echo $title_for_layout; ?>
  </title>
  <?php
    echo $this->Html->meta('icon');
    echo $this->Html->css('sample');
    echo $scripts_for_layout;
  ?>
</head>
<body>
  <div id="container">
    <div id="header">
      <?php echo $header_for_layout; ?>
    </div>
    <div id="content">
      <?php echo $this->Session->flash(); ?>
      <?php echo $content_for_layout; ?>
    </div>
    <div id="footer">
      <?php echo $footer_for_layout; ?>
    </div>
  </div>
 </body>
</html>


※Sample.css

body {
  background: #ffeeee;
  color: #660000;
  font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
  font-size:90%;
  margin: 0;
}

#container {
}

#header {
  background-color:#660000;
  color:#FFFFFF;
}
h1 {
  color:#660000;
  font-size:18pt;
}
#content {
  padding: 5px;
}

#footer {
  text-align:right;
  color:#990000;
  border-bottom:1px solid #990000;
  padding:20px 10px 0px 0px;
}

table {
  width:90%;
}
td {
  padding: 2px 5px 2px 5px;
  background-color: #FFFFFF;
  color:#660000;
  border: #ffeeee solid 2px;

}
pre {
  background-color: #FFFFFF;
  padding:5px 10px 5px 10px;
  margin:10px 20px 10px 20px;
}



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.