静的HTMLの共通部分をincludeして使う方法を現役デザイナーが解説【初心者向け】

初心者向けに静的HTMLの共通部分をincludeして使う方法について解説しています。サイト内の各ページで共通する部分をインクルードすることで効率的に編集、管理を行うことができます。JavaScriptなどを使ったいくつかのインクルード方法について見ていきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

静的HTMLの共通部分をincludeして使う方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそも、HTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

静的HTMLの共通部分をincludeして使う方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

共通部分の多いHTML

1つのwebサイト内で同じようなwebページを作る場合には、そのページごとに同じコーディングの部分を記述することになります。通常、HTMLのページで似たような 複数のページを作成する場合にはヘッダーやフッターなどの共通の部分をあえて作り、同じwebサイト内にいることをユーザーに認識してもらえるような構造に作成をしていきます。
同じようなwebページのコーディングは最初に作ったページのコピペでも良いですが、繰り返して使うコードとして1つのファイルに作成しておくと汎用性があり、今後の編集や管理などもしやすくなります。

 

includeの活用方法

includeする、と言いますが、汎用性があるように作成したコードをincludeすることで一つのプログラミングファイルに共通部分のみを記述したコードを取り込んで1つのファイルとして認識をさせるようにすることが出来ます。これにより、ヘッダーなどを統一させたいサイトは全く同じweb表記をさせることが出来るようになります。
また、全てのページで使用しているヘッダーなどを一斉に変更した場合には、共通部分をincludeしていることで修正をしやすくなります。
実務的にはヘッダー、フッター、サイドバーなどが共通の部分として各ページに共通して使用されることが多いです。
それぞれヘッダーファイル、フッターファイル、サイドバーファイルなどを作成し、適宜のページでこれらのファイルをincludeすることで共通部分のコーディングを何度も記述をしなくて済むようになります。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

様々なinclude方法

includeの方法としては大きく分けて3つあります。1つ目はJavaScriptを使う方法です。JavaScriptのファイル名をheader.jsファイルなどとしてヘッダー部分だけを記述したファイルを作成し、それぞれフッター、サイドバーなどのJSファイルも作成し、HTMLの適宜の場所でJSファイルの読み込みをすることで、共通部分を読み込むことができます。
2つ目としてはSSIと呼ばれるサーバーサイドでの読み込みを行う方法です。読み込ませたいhtmlファイルを自分の使用しているレンタルサーバーなどのFTPサーバにアップロードして読み込ませる方法となります。
3つ目としてはPHPやRubyなどのスクリプト言語を用いて表示する方法です。これらのプログラミング言語はその言語自体が他のファイルなどで呼び出す前提で記述をするためインクルードしやすいですが、一旦HTMLをそれぞれの言語に書き換えてからファイルを読み込ませる必要があります。
これらの他にもWordPressやDreamweaverなどではソフトの仕様としてインクルードがされた記述によって作成されています。これらをうまく活用することで管理を簡単にすることが出来るようになります。

 

監修してくれたメンター

木村勇土

TechAcademyの現役メンター。

現在は行政書士事務所を運営しており、お客様にはプログラマーやフリーランサーも多い。WordPressを中心とした自社のWebサイトの修正などを行なっている。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。