<template> * - テンプレート(新)

■ 概要

項  目説  明
記述形式 <template>~</template>
対応ブラウザー H?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
種  類
(カテゴリー)
メタデータ・コンテンツフロー・コンテンツフレージング・コンテンツ  
置ける場所 メタデータ・コンテンツが記入できる場所,
フレージング・コンテンツが記入できる場所,
span属性をもたないcolgroup要素の子要素
内包要素
(コンテンツ・モデル)
次のうちのいずれか1つ。
 ① メタデータ・コンテンツ
 ② フロー・コンテンツ
 ③ thead要素
 ④ ol要素ul要素 が含むことが出来る要素
 ⑤ dl要素 が含むことが出来る要素
 ⑥ figure要素 が含むことが出来る要素
 ⑦ ruby要素 が含むことが出来る要素
 ⑧ video要素audio要素 が含むことが出来る要素
 ⑨ table要素 が含むことが出来る要素
 ⑩ colgroup要素 が含むことが出来る要素
 ⑪ thead要素tbody要素tfoot要素 が含むことが出来る要素
 ⑫ tr要素 が含むことが出来る要素
 ⑬ fieldset要素 が含むことが出来る要素
 ⑭ select要素 が含むことが出来る要素
  (コンテンツ・モデル: 直接指定

■ 解説

template要素 は,スクリプトによって複製して HTML文書 に挿入される HTML の断片を指定します。

HTML文書のレンダリング時には,template要素 は何も表示しません。

template要素 は,それぞれ,そのテンプレートをコンテンツとして表示する 文書フラグメント・オブジェクト(DocumentFragment object) に関連付けられます。 template要素 が含まれる文書では,ブラウザーが,文書の当該オブジェクトの表示に反映させます。

■ 属性

種  類名  称
【固有属性】 なし
【グローバル属性】 accesskeyclasscontenteditable * dir
hidden *idlangspellcheck *style
tabindextitletranslate *
【ARIA role属性】
指定可能な値 (役割)
なし
【ARIA aria-* 属性】
指定可能なもの
ARIA グローバル状態とプロパティ   

■ CSSプロパティ

種  類名  称
【よく使うもの】

■ 使用例1( template要素の活用-その1)

次の例では,<template> 要素 で表(テーブル)の4つのセルからなる1行分の HTML の断片:

<tr><td></td><td></td><td></td><td></td></tr>

"row_Ex1" という id属性 の値で定義しています。

 

後続の2つの <script> 要素では,

  1. 最初の <script> 要素では,表の各行に挿入するデータをJavaScriptの配列として "data" という名前で定義しています。
  2. 2番目の <script> 要素では,配列 "data" から,各セルに対応するテキストデータを取り出してテンプレート: '#row_Ex1' のセルに挿入して 1行分の HTML の断片を作成 した上,template.parentNode.appendChild(clone); という命令で,表にこの行を追加します。 これを,行の数だけ実行します。

HTMLソース
HTML
<body> ~ </body>
<table style="border:solid 1px;">
  <!-- 省略 -->
  <tbody>
    <template id="row_Ex1">
     <tr><td></td><td></td><td></td><td></td></tr>
    </template>
  </tbody>
</table>
<script type="text/javascript">
  var data = [
    { 学年: 1, 氏名: '山田次郎', 専攻: '情報科学', 性別: '男' },
    { 学年: 1, 氏名: '沢田太郎', 専攻: '数理科学', 性別: '男' },
    { 学年: 2, 氏名: '大教花子', 専攻: '自然研究', 性別: '女' },
    { 学年: 3, 氏名: '生駒一郎', 専攻: '欧米言語', 性別: '男' },
    { 学年: 4, 氏名: '金剛富子', 専攻: '社会文化', 性別: '女' }
  ];
</script>
<script type="text/javascript">
  var template = document.querySelector('#row_Ex1');
  for (var i = 0; i < data.length; i += 1) {
    var cat = data[i];
    var clone = template.content.cloneNode(true);
    var cells = clone.querySelectorAll('td');
    cells[0].textContent = cat.学年;
    cells[1].textContent = cat.氏名;
    cells[2].textContent = cat.専攻;
    cells[3].textContent = cat.性別;
    template.parentNode.appendChild(clone);
  }
</script>

ブラウザー 表示例 ( IE と Edge では正しく表示できません)

■ 使用例2( template要素の活用-その2)

上の [例1] では,表のヘッダー(見出し)部分が欠落しております。 そのため,最初の「学年」のデータが,間違って記入された通し番号のようにも見えて,あまり見栄えがよくありません。 そこで,ヘッダー部分もテンプレートを使って挿入するようにしてみましょう。 以下のようになります。 [例1] からの変更部分(青色)に注目してみてください。

HTMLソース
HTML
<body> ~ </body>
<table style="border:solid 1px;">
  <thead>
    <template id="head_item">
     <tr><th></th><th></th><th></th><th></th></tr>
    </template>
  </thead>
  <tbody>
    <template id="row_Ex2">
     <tr><td></td><td></td><td></td><td></td></tr>
    </template>
  </tbody>
</table>
<script type="text/javascript">
  var data = [
    { 項目1: '学年', 項目2: '氏 名', 項目3: '専 攻', 項目4: '性別' },
    { 学年: 1, 氏名: '山田次郎', 専攻: '情報科学', 性別: '男' },
    { 学年: 1, 氏名: '沢田太郎', 専攻: '数理科学', 性別: '男' },
    { 学年: 2, 氏名: '大教花子', 専攻: '自然研究', 性別: '女' },
    { 学年: 3, 氏名: '生駒一郎', 専攻: '欧米言語', 性別: '男' },
    { 学年: 4, 氏名: '金剛富子', 専攻: '社会文化', 性別: '女' }
  ];
</script>
<script type="text/javascript">
  var template = document.querySelector('#head_item');
  var cat = data[0];
  var clone = template.content.cloneNode(true);
  var cells = clone.querySelectorAll('th');
  cells[0].textContent = cat.項目1;
  cells[1].textContent = cat.項目2;
  cells[2].textContent = cat.項目3;
  cells[3].textContent = cat.項目4;
  template.parentNode.appendChild(clone);

  var template = document.querySelector('#row_Ex2');
  for (var i = 1; i < data.length; i += 1) {
    var cat = data[i];
    var clone = template.content.cloneNode(true);
    var cells = clone.querySelectorAll('td');
    cells[0].textContent = cat.学年;
    cells[1].textContent = cat.氏名;
    cells[2].textContent = cat.専攻;
    cells[3].textContent = cat.性別;
    template.parentNode.appendChild(clone);
  }
</script>

ブラウザー 表示例 ( IE と Edge では正しく表示できません)

なお,同じこのページ内で表示する関係上,この [例2] では, <tbody> ~ </tbody> 間にある ヘッダー以外の1行を表すテンプレート については, id属性 の値を [例1] の "row_Ex1" から "row_Ex2" に変更してあります。 1つの HTML文書内で id属性 の値は,一意的でないといけません。 これは,template要素id属性 の値は,スクリプトからのデータの挿入先を定義する もので,スクリプト内では この値により挿入先を指定する ことを考えれば,当然のことです。 従って,同じ形式の複数の表を書く場合でも,<template> 要素id属性 の値は2度以上同じものは使用できませんので注意が必要です。

■ 備考