htmlでimportみたいなことってできるんですか？

###htmlでimportみたいなことってできるの？
例えば、あるサイトを作ろうとしたときに、phpやhtmlファイルを複数作ったとして、bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だし、変更も一括でしたいですよね？
そういうときってどのような解決方法がありますか？
phpを使ってechoする方法も考えましたが、なんともスマートでない気がする…

追記：たくさんのご回答ありがとうございます。一ヶ月前ほどにhtmlやcss,phpを学び始めたばかりで何ができて何ができないのか全然わからず、曖昧な質問の仕方になってしまいました、すみません。
html単体でも他の言語のように簡単にimportできるものかと思っていましたが、どうやら難しそうなので、phpのincludeで利用するのが一番自分の想定していた使い方に近かったのでベストアンサーとさせていただきます。

行動規範の内容に同意します

回答10件

ベストアンサー

ぶっちゃけPHP使ってるならinclude文で良いような気がします。

header.php
1<header>
2  <div>site header</div>
3</header>

footer.php
1<footer>
2  <div>site footer</div>
3</footer>

page.php
1<html>
2  ...
3  <body>
4    <?php include "./header.php"; ?>
5    <main>
6      <!-- Your page content here -->
7    </main>
8    <?php include "./footer.php"; ?>
9  </body>
10</html>

投稿2020/01/15 23:25

frodo821

総合スコア322

「HTML Importsってものがあったけど普及前に廃止されたので覚えなくていい」ってことを覚えておく。
もう使えない技術を半端に古い情報に騙されて使い出すのは初心者がやりがちな間違い。
https://developer.mozilla.org/ja/docs/Web/Web_Components/HTML_Imports
https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c
2013の情報見ても全く役に立たない。
https://www.html5rocks.com/ja/tutorials/webcomponents/imports/

htmlから別のhtmlを読み込むなんて簡単にできそうなことが実はできない。

一番簡単なのはPHP使う方法なので最初はこれでいい。
PHPでも単純なincludeからWordPressのテーマ、フレームワークと徐々に洗練されていくので自分のレベルに合わせて選ぶ。

投稿2020/01/16 01:17

kawax

総合スコア10377

JavaScript使っていいならAjaxとか？
参考
（参考サイトはjQuery使ってます）

投稿2020/01/15 23:43

kyoya0819

総合スコア10429

Y.H.

2020/01/16 00:56

静的なリソースのみで実現するなら手軽だしこれでしょうね。

退会済みユーザー

2020/01/16 01:26

共通部分に変更が生じたときはどのように対応するのでしょう。共通部分の「変更も一括でしたい」ということのようですが。

Y.H.

2020/01/16 01:46

Ajaxで取得するファイル(url)を一意にしておけば一括で変更できると思うのですが・・・

kyoya0819

2020/01/16 02:11

URLが変わらない限り変更には対応できるとおもいますが？ URLが変わるなら他の方法でも同様の手順を踏む必要があり、手間は変わらない気がします。

m.ts10806

2020/01/16 02:32

質問者の >なんともスマートでない気がする… ここを「どうすればスマートと感じるのか」解消できるか我々には分かりませんからね。客ではないので「とりあえず案だしてよ」的なスタンスなのは気になります。

kyoya0819

2020/01/16 02:41

te2jiさんの回答で、 > その要件であってます。 > 管理したいパーツは静的なものです。ツールのようなものに頼らずhtmlのみで実現できないのでしょうか？ > 今はphpで長い文字列としてheader部分をまとめて変数に入れておいて、それを各ファイルでechoする、という形で管理していますが… html onlyで行くと、iframeしかない気はしますが、、、

退会済みユーザー

2020/01/16 02:54

PHP 系のフレームワークにも ASP.NET と同様なレイアウトページが使える機能があるそうですし、それが使えないならオーサリングツールで適当なものを探してみるという話になると思っています。それらすべてお気に召さないということに話が及んだときに ajax 案が選択肢の一つとして出てくるのかなという気がします。しかし、そもそも質問者さんの目的は te2ji さんの回答のコメントを見ると、「コンテンツをパーツに分けて管理したい」ということなので、それなら ajax 案も選択肢としてアリかなとは思います。（最初の質問の「bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だ」という話はどこへ行ったのでしょう？　話が通じてないのかも）

m.ts10806

2020/01/16 03:02

>「bodyのheaderとfooterは全ページ共通の場合、それぞれのファイルにそれをいちいち書くのは面倒だ」 →なら可変部分だけechoすればviewは1ファイルで済むじゃないが私の回答です。スマートだと思ったんだけどなあ(コード量も)

kyoya0819

2020/01/16 03:03 編集

PHPが最もスマートだという私の主観。

sodiumplus3

2020/01/16 06:21

JavaScriptでもできるんですね、jsに関してはほぼ知識がないので今回はPHPでひとまず実装することにしました。いずれ戻ってきてまた見てみます。

行動規範の内容に同意します

以下のHTMLパーツ２つが、それぞれHTMLファイルとして/partsディレクトリ直下にあるとします。

HTML
1<!-- /parts/header.html -->
2<p>ここは、共通ヘッダーです。<a href="/parts/header.html">このhtmlファイル</a>を読み込んで表示しています</p>

HTML
1<!-- /parts/footer.html -->
2<p>ここは、共通フッターです。<a href="/parts/footer.html">このhtmlファイル</a>を読み込んで表示しています</p>

各ページにFilament GroupのScott JehlさんのHTMLインクルード手法を使って、以下のように取り込みます。

HTML
1<!-- /index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4<head><title>テスト</title></head>
5    <body>
6        <iframe src="/parts/header.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
7        <p>ここは、ページ固有のコンテンツです。</p>
8        <iframe src="/parts/footer.html" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
9    </body>
10</html>

ブラウザで表示させChromeデベロッパーツールのElementsタブなどで現在のDOM状態を確認すると、以下のようになっていると思います。

HTML
1<!-- /index.html -->
2<!DOCTYPE html>
3<html lang="ja">
4    <head><title>テスト</title></head>
5    <body>
6        <p>ここは、共通ヘッダーです。<a href="/parts/header.html">このhtmlファイル</a>を読み込んで表示しています</p>
7        <p>ここは、ページ固有のコンテンツです。</p>
8        <p>ここは、共通フッターです。<a href="/parts/footer.html">このhtmlファイル</a>を読み込んで表示しています</p>
9    </body>
10</html>

この手法だとJSがOFFになっていても通常のiframeにフォールバックします。
また共通部分の内容を変えただけで変更がないメインコンテンツ部分のブラウザ側キャッシュが無駄になることもありません。
その他メリット・デメリットについては上で挙げたリンク先の記事をご覧ください。
要件に合うようでしたらご検討ください。

投稿2020/01/16 01:28

shinji709

総合スコア805

PHPでもテンプレート的に組めばいいと思います。
全コントローラーから最後に読み込ませて可変部分だけ渡してそこだけechoすると良いです。

雑な例(動作未確認)
tmp.php

php
1<html> 
2<title>hoge[ページ<?=$title?>]</title>
3<body>
4<p><?=$hello?></p> 
5</body>
6</html>

a.php

php
1$title='a';
2$hello='こんにちは';
3require_once 'tmp.php';

b .php

php
1$title='b';
2$hello='ニーハオ';
3require_once 'tmp.php';

テンプレートエンジン(Smarty,Twigなど)使えばもっとそれっぽく簡潔な記述でできます。

投稿2020/01/15 22:33

編集2020/01/16 03:17

m.ts10806

総合スコア80850

sodiumplus3

2020/01/16 06:15

同じ構造のページの作成には変数を利用してテンプレート的にやるのが効果的そうですね、ありがとうございます。

m.ts10806

2020/01/16 06:21

frodo821さんの回答との違いをご理解の上でコメントいただいているのでしたら良いのですけど。

行動規範の内容に同意します

コンテンツをパーツに分けて管理したい要件と読みました。

方法は色々ありますが、出力に静的なものを想定しているのであれば、静的サイトジェネレーターで作成するのがお手軽です。

投稿2020/01/15 21:39

退会済みユーザー

総合スコア0

sodiumplus3

2020/01/15 22:20

その要件であってます。管理したいパーツは静的なものです。ツールのようなものに頼らずhtmlのみで実現できないのでしょうか？今はphpで長い文字列としてheader部分をまとめて変数に入れておいて、それを各ファイルでechoする、という形で管理していますが…

退会済みユーザー

2020/01/15 22:34

質問のままを回答すると、以下の2点 SSI https://ja.wikipedia.org/wiki/Server_Side_Includes Web Components の最近の仕様と開発手法 https://qiita.com/ka-miyata/items/63e41e4105d7aeb44d6c ただし、薦めないです。

行動規範の内容に同意します

自分もあまり詳しくないのですが、
HTMLだけで完結したいのであれば、
<iframe>タグで似たようなことは可能かと思います。
(正しい使い方かどうかはわかりませんが)

しかし、一般的にはサーバーサイド言語のフレームワーク(Laravelやexpressなど)、その他使っているツール(WordPressなど)の機能で実現するものだと思います。
各フレームワークやツールのドキュメントを読むと、大体そういう機能は載ってると思います。

その機能を主軸としてググりたいなら、「使ってる機能の名前」+「テンプレート」とググると見つかると思います。
「テンプレート」だけだと色んな意味や機能がヒットしてしまうので、このワードが最適解かどうかはわからないです。
もっと適切な探し方を思いつく方がいたら、コメントいただければ幸いです。

投稿2020/01/15 22:49

H40831

総合スコア973

サーバー側で処理

SSI
PHP、JAVAなど

クライアント側で処理

Javascriptでパーツ読み込み
iframeで擬似表示

あとはオーサリング時に結合処理とかですね。
各方法にて処理方法や工夫、メリット・デメリットが異なります。

投稿2020/01/21 04:08

Powerweb

総合スコア16

既に色々回答が来てるのですが、以下の方法もありますよ的なアドバイスを1つ
SSI(Server Side Includes)を

これを使用するにはWebサーバーの設定変更が必要な場合がありますので、使用されているサーバーの設定を確認する必要があります。

私は以下のサイトを参考にしました
http://www.tohoho-web.com/wwwssi.htm#Include

投稿2020/01/21 01:40

MitsukiMorikawa

総合スコア33

質問者さんが使っているフレームワークは何ですか？例えば、ASP.NET ならマスターページという機能があって、やりたいこと (複数ページで共通のヘッダーとフッターを使う) は容易に実現できます。質問者さんが使うフレームワークもしくは開発環境 (オーサリングソフト？) にそう言う機能がないか探してはいかがです？

投稿2020/01/15 22:22

編集2020/01/15 22:27

退会済みユーザー

総合スコア0