How TO - HTML のインクルード

❮ 前章へ 次章へ ❯

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

HTML

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

content.html

<a href="howto_google_maps.html">Google Maps</a><br>
<a href="howto_css_animate_buttons.html">Animated Buttons</a><br>
<a href="howto_css_modals.html">Modal Boxes</a><br>
<a href="howto_js_animate.html">Animations</a><br>
<a href="howto_js_progressbar.html">Progress Bars</a><br>
<a href="howto_css_dropdown.html">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.html">Click Dropdowns</a><br>
<a href="howto_css_table_responsive.html">Responsive Tables</a><br>

HTML のインクルード

HTML をインクルードするには、w3-include-html 属性を使用します：

例

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

JavaScript の追加

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

web ページに w3data.js というスクリプトを追加します：

例

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

w3IncludeHTML() をコールし、HTML をインクルードします：

例

<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 »

チップ: w3data.js の詳細

❮ 前章へ 次章へ ❯