W3Data Includes

❮ 前章へ 次章へ ❯

HTML に HTML スニペットをインクルードする方法について学習します。

HTML

.html ファイルにインクルードしたい HTML を保存します：

content.html

<a href="http://www.w3schools.com/html/">HTML</a><br>
<a href="http://www.w3schools.com/css/">CSS</a><br>
<a href="http://www.w3schools.com/bootstrap/">Bootstrap</a><br>
<a href="http://www.w3schools.com/js/">JavaScript</a><br>
<a href="http://www.w3schools.com/sql/">SQL</a><br>
<a href="http://www.w3schools.com/php/">PHP</a><br>
<a href="http://www.w3schools.com/w3css/">W3.CSS</a><br>

HTML のインクルード

HTML のインクルードは、w3-include-html 属性を使用して行います：

例

<div w3-include-html="content.html"></div>

JavaScript の追加

HTML のインクルードは、JavaScript で行います。

ページに w3data.js がロードされていることを確認し、w3IncludeHTML() を呼び出します：

例

<script>
w3IncludeHTML();
</script>

完全な例

例

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>

<div w3-include-html="content.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
</html>
Try it Yourself ❯

多数の HTML スニペットのインクルード

幾つもの HTML スニペットをインクルードすることができます：

例

<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>

<div w3-include-HTML="h1.html"></div>
<div w3-include-HTML="content.html"></div>

<script>
w3IncludeHTML();
</script>

</body>
<html>
Try it Yourself ❯

❮ 前章へ 次章へ ❯