templateタグとは?|スクリプトで利用するHTMLコードのテンプレートを表す

templateタグとは?|スクリプトで利用するHTMLコードのテンプレートを表す
博士
今回は、<template>タグの使い方について解説するぞ。
 
 
博士
博士
リンゴが師と仰ぐ人物。
毎日HTML/CSSデザインの研究をしており、その知識を余すことなくリンゴに教えてくれる。

スポンサーリンク

<template>タグとは

 

<template>

対応ブラウザ Firefox / Google Chrome
分類 メタデータ・コンテンツ / フロー・コンテンツ / フレージング・コンテンツ / スクリプトサポート要素
利用場所 メタデータ・コンテンツが期待される場所 / フレージング・コンテンツが期待される場所 / スクリプトサポート要素が期待される場所 / span属性がないcolgroup要素の子要素として
内容 メタデータ・コンテンツ / フロー・コンテンツ / 特定要素のコンテンツ・モデルを継承


 
 
<template>タグは、スクリプトによる文書への挿入・複製が可能な、HTMLコードのテンプレートを表します。
template要素は、「JavaScript」などのスクリプトと組み合わせて使用します。
 
 

要素の内容

template要素の内容には、メタデータ・コンテンツやフロー・コンテンツの他に、以下の要素を配置することができます。

 
 

メモ
template要素に対応していないブラウザでは、要素の内容がそのまま表示されてしまいます。未対応のブラウザで非表示にしたい場合は、スタイルシートで以下のように指定しておきましょう。

 
 

スポンサーリンク

使用例

例えば、下記のように記述することで、別の場所に用意されたデータを各td要素内に挿入するよう処理が行われます。

 
 

表示例

html5 templateタグの使用例
 
 

まとめ

スクリプトで利用されるHTMLコードのテンプレートを表す際は、<template>タグを使用します。
 
 

HTML5 タグ図鑑

HTML5タグ全種類を図鑑としてまとめています。タグの意味や使い方でわからないことがあれば、ぜひこのページをご活用ください。

HTML5 タグ図鑑へ

 
HTML5 タグ図鑑

スポンサーリンク








templateタグとは?|スクリプトで利用するHTMLコードのテンプレートを表す