![未経験からのITエンジニア転職で読んでおくべき資料3点セット](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="1400" height="340"><rect fill-opacity="0"/></svg>)
何度も同じコードを記述するのは非効率！HTMLの共通部分はインクルード化しよう！
HTMLコードを記述している時に、
「毎回毎回同じようなコードを記述するのが面倒」
「共通部分のコードって使いまわしできないの？」
と思ったことはありませんか？
ソースコードは、HTMLに限らず、何度も同じようなコードを記述することが多くあります。
共通部分を何度も記述するのは非効率ですし、思わぬミスにも繋がります。
そこで今回は、共通部分を使いまわしできる「インクルード」について解説します。
この記事を読んでわかる内容は、以下の通りです。
- インクルードについての基礎知識
- インクルードのメリット・デメリット
- 共通部分をインクルード化する方法7選
共通部分をインクルード化できると、何度も同じコードを記述する必要がなくなります。
作業効率を上げたい方も、知識としてインクルードを学んでおきたい方も役立つ内容になっていますので、ぜひ最後まで見てくださいね。
目次[show]
インクルードとは？
Web制作において、インクルードとは、各ページで共通する部分のソースコードを一つのファイルとし、別のページで読み込むことで、「インクルード化」するとも言います。
HTMLの共通部分をインクルード化すると、以下のようなメリットが得られます。
【メリット】
- 何度も同じコードを記述する必要がないから楽（作業効率が向上する）
- コードの記述ミスが減る
- 共通部分の修正が一つのファイルで済む
- コードがシンプル（短く）なり、見やすくなる
ただし、以下のようなデメリットも考慮しておきましょう。
【デメリット】
- 最初にインクルード化する手間がある
- JavaScriptやPHPなどHTML以外の知識も少し必要になる
インクルードについては、以下の記事でも詳しく解説しています。
もう何度も同じコードは書かない！HTMLの共通部分をインクルードする方法を解説
HTMLの共通部分をインクルードする方法
HTMLの共通部分をインクルード化するには、以下の6つの方法があります。
- iframeを使用する
- JavaScriptを使用する
- jQueryを使用する
- PHPを使用する
- SSIを使用する
- CMSを使用する
- 7.フロントエンドの開発ツールを使用する
では、それぞれの方法について詳しく見ていきましょう。
1.iframeを使用する
別のHTMLファイルなどのコンテンツを挿入できるiframeで、インクルード化することができます。
最も簡単で、HTML初心者でも利用できる方法です。
【header.html】
<header>ヘッダー</header>【footer.html】
<footer>フッター</footer>【index.html】
<iframe src="header.html" frameborder="0"></iframe>
<div class="content">
メインコンテンツ
</div>
<iframe src="footer.html" frameborder="0"></iframe>▼ブラウザ表示▼
ただし、以下のようにHTMLファイルを記述した場合、高さの調整が効かない、上手く読み込めないなどのデメリットもあります。
【header.html】
<div class="header">
<div class="logo">
<h1>ヘッダーロゴ</h1>
</div>
<ul class="nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>【footer.html】
<div class="footer">
<div class="logo">
<h1>フッターロゴ</h1>
</div>
<ul class="nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<p>©共通部分のインクルード方法 2021.××.▲▲</p>【sytle.css】
header,footer {
background-color: #eee;
}
.header,.footer,.nav {
display: flex;
justify-content: space-between;
}
.header,.footer {
padding: 20px 0;
}
.nav li {
padding: 10px;
font-weight: bold;
}
.nav a:hover {
color: #fff;
transition: all 0.3s;
}
.content {
height: 300px;
padding: 20px 0;
}
footer p {
padding: 30px 0;
font-size: 10px;
color: #aaa;
}▼ブラウザ表示▼
2.JavaScriptを使用する
JavaScriptでのインクルード化は、最も一般的な方法です。
コンテンツを非同期で読み込めるAjaxを使用してインクルード化します。
【header.html】
<div class="header">
<div class="logo">
<h1>ヘッダーロゴ</h1>
</div>
<ul class="nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>【footer.html】
<div class="footer">
<div class="logo">
<h1>フッターロゴ</h1>
</div>
<ul class="nav">
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
</ul>
</div>
<p>©共通部分のインクルード方法 2021.××.▲▲</p>【sytle.css】
header,footer {
background-color: #eee;
}
.header,.footer,.nav {
display: flex;
justify-content: space-between;
}
.header,.footer {
padding: 20px 0;
}
.nav li {
padding: 10px;
font-weight: bold;
}
.nav a:hover {
color: #fff;
transition: all 0.3s;
}
.content {
height: 300px;
padding: 20px 0;
}
footer p {
padding: 30px 0;
font-size: 10px;
color: #aaa;
}【index.html】
<body>
<script>header();</script>
<div class="content">
メインコンテンツ
</div>
<script>footer();</script>
<script src="sample.js"></script>
</body>【sample.js】
// header.htmlの設定
function header(){
$.ajax({
url: "header.html",
cache: false,
success: function(html){
document.write(html);
}
});
}
// footer.htmlの設定
function footer(){
$.ajax({
url: "footer.html",
cache: false,
success: function(html){
document.write(html);
}
});
}Ajaxは、ローカル環境での確認ができません。
使用する場合は、XAMPPなど、ローカル環境でもPHPの動作確認ができるパッケージなどを利用しましょう。
3.jQueryを使用する
jQueryでインクルード化する場合は、headないにjQueryを読み込み、loadメソッドで各ページを読み込みます。
<head>
<!-- jQuery.jsの読み込み -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
//共通パーツ読み込み
$(function() {
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
/*header.htmlが読み込まれる*/
<div id="header"></div>
<div class="content">
メインコンテンツ
</div>
/*footer.htmlが読み込まれる*/
<div id="footer"></div>
</body>ただし、Googe Chromeのローカル環境では、動作の確認ができません。
ローカル環境で動作の確認を行う場合は、IEやEdgeなどを使用しましょう。
また、ファイルの読み込む順番を間違えてしまうと、不具合が発生する可能性があるので注意が必要です。
4.PHPを使用する
PHPでインクルード化することも可能です。
記述するコードも短いので、初心者でも簡単に利用することができますよ。
【index.php】
<?php include "header.html" ?>
<div class="content">
メインコンテンツ
</div>
<?php include "footer.html" ?>ただし、ローカル環境でPHPの動作確認を行う場合には、専用の環境を構築する必要があります。
普段PHPを使用していない場合は、環境を構築するまでに手間がかかるので注意しましょう。
5.SSIを使用する
Webサーバーにある「SSI（Server Side Include）」という機能を利用して、HTMLコードをインクルード化することもできます。
具体的には、以下のように記述します。
【index.html】
<!--#include file="header.html" -->
<div class="content">
メインコンテンツ
</div>
<!--#include file="footer.html" -->ただし、Webサーバー側での処理が一つ入ることになるので、SSIを使用していないHTMLよりもレスポンスが遅くなるというデメリットもあります。
6.CMSを使用する
CMSとは、Webサイトのコンテンツを構成するデザインやレイアウト、テキストや画像などを保守・管理するシステムのこと。
Ameba OwndやJimdo、Wordpressなどが有名どころです。
独自のルールに従えば、CMSでのインクルード化が可能で、世界的シェア率の高いWordpresは、特に自由度が高く使いやすいです。
WordPressには、独自のルールがあり、各役割とファイル名が決まっています。
ヘッダー部分：header.php フッター部分：footer.php
上記以外にも、全体のプログラムやテーマを管理する「functions.php」や固定ページを管理する「page.php」などがあります。
また、それぞれのファイルに分け、インクルード化したheaderとfooterを表示させるにも、Wordpress独自のコードを使用します。
【header.php】
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- index.htmlのhead部分を挿入 -->
</head>
<body>
<header>ヘッダー</header>【footer.php】
<footer>フッター</footer>
</body>
<html>【index.php】
<?php wp_head(); ?>
<div class="content">
メインコンテンツ
</div>
<?php wp_footer(); ?>7.フロントエンドの開発ツールを使用する
PHPなどのプログラミング言語を利用せずに、gulpやGruntなどのフロントエンド開発ツールでインクルード化することも可能です。
@@include('header.html')
<div class="content">
メインコンテンツ
</div>
@@include('footer.html')共通部分をインクルードしてHTMLコードを効率化！
今回は、HMTLの共通部分を使いまわしできる「インクルート」についてと、具体的な方法を解説しました。
以下は、この記事のまとめです。
- 共通部分のコードを使いまわせるようにする仕組みを「インクルート化」すると言う
- 最初の手間を惜しまなければ、インクルードにより作業効率が上がる
- JavaScripでのインクルードが最も一般的
共通部分をインクルード化する方法は、7つもあるので、自分のレベルや開発環境に合っている方法を選択できます。
それぞれの特徴や、メリット・デメリットなども理解した上で、最適な方法を選択し、共通部分のHTMLコードをインクルードしましょう！
