Location: PHPKode > projects > Runemaster > docs/layout.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>第7章 レイアウト</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="generator" content="DocBook XSL Stylesheets V1.73.2">
<link rel="start" href="index.html" title="Runemaster マニュアル">
<link rel="up" href="index.html" title="Runemaster マニュアル">
<link rel="prev" href="node.html" title="第6章 ノード">
<link rel="next" href="load.to.high.runemaster.html" title="第8章 上級マスターへの道 (準備中)">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
<div class="navheader">
<table width="100%" summary="Navigation header">
<tr><th colspan="3" align="center">第7章 レイアウト</th></tr>
<tr>
<td width="20%" align="left">
<a accesskey="p" href="node.html">前のページ</a> </td>
<th width="60%" align="center"> </th>
<td width="20%" align="right"> <a accesskey="n" href="load.to.high.runemaster.html">次のページ</a>
</td>
</tr>
</table>
<hr>
</div>
<div class="chapter" lang="ja">
<div class="titlepage"><div><div><h2 class="title">
<a name="layout"></a>第7章 レイアウト</h2></div></div></div>
<div class="toc">
<p><b>目次</b></p>
<dl>
<dt><span class="section"><a href="layout.html#template.layout">7.1. レイアウト機能</a></span></dt>
<dd><dl>
<dt><span class="section"><a href="layout.html#using.layout">7.1.1. 共通レイアウトを使う</a></span></dt>
<dt><span class="section"><a href="layout.html#content.for.layout.target">7.1.2. コンテンツ挿入先の指定</a></span></dt>
<dt><span class="section"><a href="layout.html#layout.content.target">7.1.3. 利用するコンテンツの範囲指定</a></span></dt>
</dl></dd>
</dl>
</div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h2 class="title" style="clear: both">
<a name="template.layout"></a>7.1. レイアウト機能</h2></div></div></div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h3 class="title">
<a name="using.layout"></a>7.1.1. 共通レイアウトを使う</h3></div></div></div>
<p>
      Web サイトを構成するためいくつかのページを準備する際、
      それらページの全てでヘッダ情報 (&lt;head&gt; ) や外観を共通のものとして利用したいことがあるでしょう。
      そのような場合は、レイアウト機能を使用すればよいでしょう。
    </p>
<p>
      レイアウト機能を使用すれば、本来の描写内容として指定するテンプレートとは別に、
      外観 (外枠) が記述してあるレイアウトテンプレートを別途指定することで、
      レイアウトテンプレートとコンテンツテンプレートを組み合わせた結果を画面に描写させることができます。
    </p>
<p>
      レイアウト機能を使用するためには、
      コンテンツテンプレートを指定する cast メソッドの前の段階において setLayout メソッドを使用し、レイアウトテンプレート名を指定します。
      またレイアウトテンプレート内ではコンテンツ内容を挿入する場所として、適当のエレメントに「content_for_layout」属性を付与させたものを準備します。
    </p>
<div class="example">
<a name="id344239"></a><p class="title"><b>例 7.1. レイアウト機能の利用</b></p>
<div class="example-contents"><div class="variablelist"><dl>
<dt><span class="term">レイアウトテンプレート (Layout.html)</span></dt>
<dd><pre class="programlisting">
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Runemasterマニュアル&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div content_for_layout&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></dd>
<dt><span class="term">コンテンツテンプレート (Content.html)</span></dt>
<dd><pre class="programlisting">
&lt;h1&gt;Hello, World!&lt;/h1&gt;</pre></dd>
<dt><span class="term">PHP コード</span></dt>
<dd><pre class="programlisting">
$master = new Rune_Master('/path/to/templateDirectory');

$master-&gt;setLayout('Layout');
$master-&gt;cast('Content');</pre></dd>
<dt><span class="term">実行結果</span></dt>
<dd><pre class="programlisting">
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Runemasterマニュアル&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div&gt;&lt;h1&gt;Hello, World!&lt;/h1&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></dd>
</dl></div></div>
</div>
<br class="example-break">
</div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h3 class="title">
<a name="content.for.layout.target"></a>7.1.2. コンテンツ挿入先の指定</h3></div></div></div>
<p>
      前述のとおり、レイアウトテンプレートではコンテンツテンプレートの内容の挿入先を指定するため、content_for_layout 属性を準備します。
      この属性が指定されたエレメントの内部に、コンテンツ内容が挿入されることになります。
    </p>
<pre class="programlisting">
&lt;div content_for_layout&gt;&lt;/div&gt;</pre>
<p>
      これは、次のように書くことも可能で、同じ結果を得ることができます。
    </p>
<pre class="programlisting">
&lt;div content_for_layout="inner"&gt;&lt;/div&gt;</pre>
<p>
      またこれまでのようにレイアウトテンプレートの指定エレメントの内部にコンテンツを挿入するのではなく、
      指定エレメントそのものをコンテンツに置き換えることもできます。
      次の例のように置き換える対象となるエレメントの属性値として「content_for_layout="outer"」を準備することで、コンテンツの内容がそのエレメントに置き換わって描写されることになります。
    </p>
<div class="example">
<a name="id344488"></a><p class="title"><b>例 7.2. レイアウトの指定エレメントごとコンテンツに置き換える</b></p>
<div class="example-contents"><div class="variablelist"><dl>
<dt><span class="term">レイアウトテンプレート (Layout.html)</span></dt>
<dd><pre class="programlisting">
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Runemasterマニュアル&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div content_for_layout="outer"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></dd>
<dt><span class="term">コンテンツテンプレート (Content.html)</span></dt>
<dd><pre class="programlisting">
&lt;h1&gt;Hello, World!&lt;/h1&gt;</pre></dd>
<dt><span class="term">PHP コード</span></dt>
<dd><pre class="programlisting">
$master = new Rune_Master('/path/to/templateDirectory');

$master-&gt;setLayout('Layout');
$master-&gt;cast('Content');</pre></dd>
<dt><span class="term">実行結果</span></dt>
<dd><pre class="programlisting">
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Runemasterマニュアル&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Hello, World!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></dd>
</dl></div></div>
</div>
<br class="example-break">
</div>
<div class="section" lang="ja">
<div class="titlepage"><div><div><h3 class="title">
<a name="layout.content.target"></a>7.1.3. 利用するコンテンツの範囲指定</h3></div></div></div>
<p>
      レイアウトへ挿入するコンテンツの内容は、テンプレート内の全てではなく範囲を限定させることも可能です。
      利用するコンテンツの範囲を指定するには、コンテンツテンプレートにおいてその箇所をエレメントで囲み、「contents」属性を付与します。
    </p>
<p>
      次の例では &lt;div&gt; に contents 属性を付与させていますので、
      そのエレメント内にある「&lt;h1&gt;Hello, World&lt;/h1&gt;」がコンテンツの内容として利用されることになります。
    </p>
<div class="example">
<a name="id344594"></a><p class="title"><b>例 7.3. レイアウトへ挿入するコンテンツを限定する</b></p>
<div class="example-contents"><pre class="programlisting">
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Runemaster チュートリアル&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div contents&gt;&lt;h1&gt;Hello, World&lt;/h1&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre></div>
</div>
<br class="example-break"><p>
      これはレイアウトテンプレートにおける content_for_layout 属性と同じく、次のように書くことも可能です。
    </p>
<pre class="programlisting">
&lt;div contents="inner"&gt;&lt;h1&gt;Hello, World&lt;/h1&gt;&lt;/div&gt;</pre>
<p>
      また contents 属性の値として「outer」を設定することで、contents 属性をもったエレメントそのものをコンテンツとして使用するよう範囲指定することもできます。次の例では、&lt;div&gt; を含めた全てがコンテンツとなります。
    </p>
<pre class="programlisting">
&lt;div contents="outer"&gt;&lt;h1&gt;Hello, World&lt;/h1&gt;&lt;/div&gt;</pre>
</div>
</div>
</div>
<div class="navfooter">
<hr>
<table width="100%" summary="Navigation footer">
<tr>
<td width="40%" align="left">
<a accesskey="p" href="node.html">前のページ</a> </td>
<td width="20%" align="center"> </td>
<td width="40%" align="right"> <a accesskey="n" href="load.to.high.runemaster.html">次のページ</a>
</td>
</tr>
<tr>
<td width="40%" align="left" valign="top">第6章 ノード </td>
<td width="20%" align="center"><a accesskey="h" href="index.html">ホーム</a></td>
<td width="40%" align="right" valign="top"> 第8章 上級マスターへの道 (準備中)</td>
</tr>
</table>
</div>
</body>
</html>
Return current item: Runemaster