• ベストアンサー

HTMLでソースを共通化する

HTMLでのWEBページ作成で、「共通モジュール」のような考え方で ソースを共通化したいと考えています。 どのようにすればよいのでしょうか? ヘッダ部やフッタ部・サイドメニューのようなもの等を 各ページで同じ物を表示したいのです。 ご指導をお願いします。

  • HTML
  • 回答数8
  • ありがとう数9

質問者が選んだベストアンサー

  • ベストアンサー
  • JoanOfArc
  • ベストアンサー率100% (1/1)
回答No.7

SSIが使えるのでしたら、SSIでincludeするのがベストです。 <!--#include file="~"--> <!--#include virtual="~"--> みたいな感じですね。SSIがだめでPHPが使えるのでしたら、 PHPでincludeできます。 <?php include "~"; ?> もしサーバのrootがあるのでしたら、mod_layoutを使うという 方法もあるのですが、これはちょっと微妙な気がします。 CGIで挿入するという方法は、機能の割に負荷が高いので お勧めできません。

taku_pan
質問者

お礼

ありがとうございます。 SSIにて実現することにしました。

その他の回答 (7)

  • you-m
  • ベストアンサー率58% (190/327)
回答No.8

そもそも、HTMLは構造化文書の表現方法であるため、システム的な共通化の考え方等を実現する枠組みが存在しません。 ちょっと前に似たような質問について、回答しています。 http://okweb.jp/kotaeru.php3?q=1471916 個人的には、SSIやCGIを使った方法は、サーバの環境に依存する為、コンテンツとしての汎用性に欠けます。 やはり、こういった場合は予め作成したヘッダやフッタと本文の部分を結合したHTMLを吐き出すようなプログラムを作成するのが一番いいかと思います。 少なくとも管理する側からは、共通モジュール化して管理できるし、一旦フィルタ処理したデータは、単なるHTMLである為、どこへでも持っていけます。

taku_pan
質問者

お礼

ありがとうございます。 SSIにて実現することにしました。

  • equation
  • ベストアンサー率38% (10/26)
回答No.6

MacromediaのDreamwaver(スペル違うかも)だったらテンプレート機能のようなもので一括変更できるらしいですよ。

taku_pan
質問者

お礼

ありがとうございます。 SSIにて実現することにしました。

  • grape16
  • ベストアンサー率55% (52/93)
回答No.5

<iframe>を使う手もありますね。 もしMicrosoft FrontPageをお使いなら「ページ挿入」や「共有枠」の機能が利用できます。

taku_pan
質問者

お礼

ありがとうございます。 下でiframeについて、これなら要求を満たすことができるかもしれないと書いたのですが、 少し違うような気もしてきました。ほとんどフレームの考え方ですね。 使いようだと思いますが、今回はiframe以外で考えたいと思います。 (使い方は分かりました)

  • Dpop
  • ベストアンサー率51% (279/544)
回答No.4

Web屋です。 HTMLには、ファイルをインクルードする。と言う概念がありません。 そのため、HTMLの部品化はできません。 僕が作ったCGIで、HTMLファイルを再帰的にインクルードし、最終的にHTMLとして表示したり、ファイルに保存する。と言う物があります。 この仕組みの場合、共通部品として利用したHTMLをインクルードファイルとして用意(と、言っても普通のHTMLファイルですが。)して置いて、親の階層で<!-- @include xxxx.html --> で呼び出す事で取り込まれる。と言う事をやっています。 また、PHPを使ってインクルードする。と言う方法を推奨している人も居ますね。 この考え方は、XOOPSなどでも利用されています。Movable Typeでも採用されていますが、完全とは言い切れないですね。 純然たるHTMLだけでは無理があるので、PerlやPHPを利用して、必要に応じてページを再構築する。と言う作業を伴うか、CGIでリアルタイムにインクルードして表示する様にするか。 だと思います。

taku_pan
質問者

お礼

ありがとうございます。 意識してインクルードさせるような仕組みにしないといけない、ということですね。 でもすみません。あまり理解していないかもしれません。 SSIを用いるということでしょうか?

noname#40524
noname#40524
回答No.3

それに近いことはスタイルシート(CSS)で出来ます。 XXX.jsファイルで設定されてます。 それからインラインフレームを使用して、メニュー以外だけを 変更する事も出来ます。 ↑これは実際に使用しています。

taku_pan
質問者

お礼

ありがとうございます。 cssだと書式部分のみが共通化できるということでしょうか?もっと広く活用できるのでしょうか? インラインフレームですか。なるほど。 まだ使ったことないですが、これなら要求を満たすことができるかもしれません。 (回答を見てちょっと調べただけなので、よく分からないですが。) もし使用例や参考ページ、使用上の注意などありましたら、補足頂けるとうれしいです。

  • otu_otu
  • ベストアンサー率31% (17/54)
回答No.2

その気持ちわかります。。フッタ等を別ファイルにしておければ、メンテナンスが容易ですよね。。 将来的にはXMLでWebサイトを作るようになれば、対応できるのではないでしょうか。。(憶測ですが...)

taku_pan
質問者

お礼

ありがとうございます。 >フッタ等を別ファイルにしておければ、メンテナンスが容易ですよね。。 そういうことなのです。 (ヘッダ/フッタ以外にも共通で表示させたいものがあるのですが、  全ページを毎回更新するなんてイヤなのです) 現状ではできないのでしょうか?

noname#15285
noname#15285
回答No.1

基本になるものを作っておいて後は変更の度に名前を変えるだけでいいと思います。 違う意味ならごめんなさい。

taku_pan
質問者

お礼

たぶん意味が違うと思います。 別の箇所で同じロジックを呼び出したいのです。 単なるコピペならできます。

関連するQ&A

  • サイトの共通ヘッダーのHTMLソース管理について

    PHPを用いない、HTMLのみのサイトの 共通ヘッダーやフッターを1ファイルで管理するため、 SSIで、<!--#include file=\"***.html\" -->と設定し、 読み込むファイルは拡張子を.htmlとしたいです。 ヘッダーやフッターには、テキストリンクや画像のみをおくこととします。(プログラム的な動作はしない) みなさんは、ヘッダーやフッターのデータをどのように管理されているでしょうか。 DreamweaverのTempleteやLibraryを使っていますか。 SSIを使っていますか。 includeをするためだけにPHPをつかっているのでしょうか。

    • ベストアンサー
    • HTML
  • 楽天市場のデザインのコーディングについて

    今度、楽天市場に出展するのですがコーディングについて教えて下さい。 まずfireworksでデザインした物をDreamweaverでコーディングした後、楽天の説明文にソースをコピー&ペーストをしたのですが・・・うまくいきません。 具体的にはヘッダー→コンテンツ(左にサイドメニュー・右にコンテンツ)→フッターというデザインでどのページに行ってもヘッダー・サイドメニュー・フッターは共通で表示される様にしたいのですが、商品の詳細画面になるとメニューの下に商品情報が出てきてしまいます。 何か良い方法があれば教えていただけますでしょうか? 宜しくお願いいたします。

  • htmlでヘッダやフッタを共通化したい

    ヘッダ、サイドバー、コンテンツ、フッタというレイアウトで 100ページぐらいあるWebサイトを構築する場合、 ヘッダやフッタに変化がないのであれば、共通化したくなります。 (変更があった時に、1箇所変更すればいい、という風にしたいため) そこで、例えば、PHPが使えるところであれば、includeすればいいのですが、 使えない場合、JavaScriptを使えば可能ではあると思います。 しかし、JavaScriptはOffにされた時のことを考えると このやり方はリスクがあるような気がします。 そこで、知りたいのですが、htmlを共通化したい場合、 PHPなどを使う以外に、どんなやり方があるのでしょうか? できれば、サーバサイドに仕込む方法ではないやり方でお願いします。

    • ベストアンサー
    • HTML
  • CSSでページ下部ソースを上に表示するには?

    タイトルがわかりづらくて申し訳ございません・・・。 やりたいことを要約しますと、CSSをつかい ページの上部によく配置しているナビゲーションメニューを ページ上では上に表示したいのですが、 ソース上、すべてのページが共通ですので SEOを考えて、ソースの下に配置したいのですがどうすればいいかわかりません・・・ 現在、サイドバーはfloatをつかい、ソース内では、コンテンツの下にきております。 現在の構成と、希望の構成を書きますので、ご教授いただけると助かります! ■現在の構成 (ヘッダー) (ナビゲーションメニュー) (コンテンツ)※ブラウザでは右側 (サイドバー)※ブラウザでは左側に表示 (フッター) ■希望の構成 (ヘッダー) (コンテンツ) (サイドバー) (ナビゲーションメニュー) (フッター) ブラウザ上の表示は、同じにしたいです。

    • ベストアンサー
    • CSS
  • 各ページに共通するヘッダーやフッターの記述

    各ページに共通するヘッダーやフッターの記述 ホームページ作成について質問です。 過去の質問を検索しましたが 解決できなかったので質問させていただきます。 ホームページビルダーで各ページに共通するヘッダーやフッターをテンプレートにすると 全てのページにヘッダーに使われている文章やリストなどのhtmlソースがすべて記述されてしまいます。 いろんなサイトを見るとヘッダー部分は同じなのにhtmlソースが記述されておりません。 SSIのincludeもなくphp、java scriptも記述されていません。 別ページにリンクさせているようなアドレスが記述されています。 そのような方法はあるのでしょうか? またSEO対策としてはどちらがいいのでしょうか?

  • 複数のページで使用する共通のレイアウトについて

    なるべく(X)HTML+CSSでサイトを作ろうと思っているのですが、 ヘッダ、フッタ、メニューなどの複数のページに及ぶ共通のレイアウト部分を CSSで一括で管理する方法はないのでしょうか? JavaScriptでの方法は分かるのですが。。。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • 共通ソースの一括更新管理方法

    皆さん こんにちわ。 Webクリエーター2年生です。 HyperEdit(HTMLエディター),Fireworks,Illutrator,Photoshopなどを使用して制作しています。 最近、フレームを使わないことが主流になっていますので、私も使わないようにしています。 ただ、ヘッダー・フッター・メニュー・JavaScriptなど、共通のソースが多いため、変更がある度に、コピー&ペーストの作業がなかなか大変です。 インラインフレーム、JavaScriptのjsファイル、PHP、zopeなどを調べましたが、今ひつ良い方法が見つかりません。 また、複数ファイルの一括置換するフリーソフトを見つけましたが、操作ミスするとどうなるか少し不安があります。 私が管理するHPは、10~30ページ(ファイル)程度です。 第一線のプロのWebクリエーターの方は、どの様な方法をとられているのでしょうか? 先輩の皆様のアドバイスを宜しくお願いします。

    • ベストアンサー
    • HTML
  • HTML+CSSについて質問です

    当方のHPは左サイドにメニューリスト、中央部分に記事を書いている2カラムです。また、ページ数は100ページくらいありますが左サイドのメニューリストは全て共通となっています。左サイドのメニューリストは定期的に更新しているのですが、一つの項目を追加したい(削除したい)場合、全てのページの左サイドメニューを更新しなければならず、かなりの手間がかかってしまいます。なので、左サイドメニューは独立したHTMLを作成し、更新の手間がかからないような形にしたいと考えています。このようなHTML+CSSを作成する場合、どのようにすればよろしいのでしょうか?また、参考になるサイトがあればご教授よろしくお願いします。ちなみに当方のHPを作成する知識は、基本的なタグやCSSがわかる程度の初心者レベルです。

    • ベストアンサー
    • HTML
  • HTML ソース

    windowsVistaを使っておりまして、 HTMLの勉強をしているのですが、 練習で自分で作ったHTMLを記述したページを ブラウザ上に表示はできるのですが、そこからソースを表示しての 修正や編集ができません ソース表示はできるのですが、メモ帳で表示されないため 編集ができません どうすればいいのでしょうか

    • ベストアンサー
    • HTML
  • HTMLソースがみれないんです・・・・教えてください!

    こんばんわ。 先日からXPのPCでWEBページのHTMLをみようとするのですが全く見れないんです。98のPCで見るとみれるのに・・・・。いまHPを作る勉強をしているのでとても困っています。なぜソースがみれないんでしう??? 教えてください。よろしくお願いいたいしますm(__)m