<template> - テンプレート

トップ > HTMLリファレンス > <template>

概要

項目説明
形式<template>~</template>
サポートH2 / Ch26 / Fx22 / Sa7.1 / Op15
カテゴリメタデータコンテンツ, フローコンテンツ, フレージングコンテンツ, スクリプトサポート要素
親要素メタデータコンテンツ, フレージングコンテンツ, スクリプトサポート要素 を子要素に持てるもの
span属性を持たない colgroup要素
子要素フローコンテンツ, メタデータコンテンツ
ol, ul, dl, figure, ruby, object, video, audio, table, colgroup, thead, tbody, tfoot, tr, fieldset, select要素の子要素
タグの省略開始タグ:必須 / 終了タグ:必須

説明

template は、スクリプトで利用される要素のテンプレートを定義する際に用いられます。

<template>~</template> で囲まれた部分は、ページを表示した際には表示されません。JavaScript 等のスクリプトの中で複製され、値を設定され、挿入されることで表示されるようになります。

使用例に示したサンプルでは、テーブルの 1行に対応するテンプレートを定義しておき、JavaScript の中でテンプレートを複製(clone)し、値を設定し、tbody要素に挿入することで、テーブルの各行を生成しています。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<!DOCTYPE html>
<html>
<head>
<title>Cat data</title>
<script>
var data = [
  { name: 'Pillar', color: 'Ticked Tabby', sex: 'Female' },
  { name: 'Hedral', color: 'Tuxedo', sex: 'Male' },
];
</script>
</head>
<body>
<table border=1>
 <thead>
  <tr>
   <th>Name</th><th>Color</th><th>Sex</th></tr>
  </tr>
 </thead>
 <tbody>
  <template id="row">
   <tr><td></td><td></td><td></td></tr>
  </template>
 </tbody>
</table>
<script>
window.onload = function() {
  var template = document.querySelector('#row');
  if (!'content' in template) {
      return;
  }
  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.name;
    cells[1].textContent = cat.color;
    cells[2].textContent = cat.sex;
    template.parentNode.appendChild(clone);
  }
};
</script>
</body>
</html>
表示
NameColorSex
PillerTicked TabbyFemale
HedralTuxedoMale

関連項目

<script>

Copyright (C) 2015 杜甫々
初版:2015年1月17日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/template.htm