include-sourceは、「include-source: url('sub-content.html');」のように外部のHTMLファイルのパスを指定することで、現在のページ内にその内容をレイヤー(重ね合わせ要素)として埋め込んで表示できるプロパティでした。
しかしながら、この仕様はW3Cの国際的なWeb標準には採用されず、Netscape独自の非推奨機能として歴史の中に埋もれていきました。その後のHTML5や現代のWeb標準(Chrome、Safari、Edge、Firefoxなど)においては完全に廃止されており、現在のホームページ制作で記述しても一切機能しません。クライアント(ブラウザ)側でCSSを使って別のHTML文書を直接レイヤー結合するというアプローチ自体が、セキュリティやSEO(検索エンジン最適化)の観点、そしてDOM(文書構造)の制御上の問題から不適切とされたためです。
現代のホームページ(ウェブサイト)における効率的なファイル分割・結合手法
現在のモダンなWeb制作において、外部ファイルやパーツを効率的にインクルードし、保守性の高い事業用ホームページを構築するためには、CSSではなく、サーバーサイドのプログラム、あるいはモダンなJavaScriptフレームワークを活用してプログラミングを行います。
1. PHPによるサーバーサイド・インクルード(最も一般的)
WordPress(ワードプレス)などのCMSや、一般的な静的HTMLをベースとしたホームページ制作において最も広く利用されているのが、PHP言語を用いたファイルの分割管理です。
PHP
<?php include('header.php'); ?>
このように記述しておくことで、サーバー側で自動的にファイルを結合してからユーザーのブラウザへHTMLを出力します。CSSの古いレガシー仕様とは異なり、ブラウザにデータが届いた時点ですでに1つの美しいHTMLとして完成しているため、検索エンジン(Googleクローラー)にも完全にインデックスされ、SEO対策において極めて有利に働きます。
2. iframe要素やオブジェクトによる埋め込み
どうしてもブラウザ(フロントエンド)側で他のHTMLページを枠内に表示したい場合は、HTML標準の <iframe> タグを使用します。ただし、インラインフレームは限定されたコンテンツ(Googleマップの埋め込みなど)に適しており、ページデザインの一部を共通パーツ化する目的での多用は推奨されません。
3. コンポーネント指向のJavaScript(モダン開発)
近年主流となっているReactやVue.js、あるいは次世代のWeb標準機能である「Web Components」を活用した開発現場では、ボタンやメニューなどのUIパーツ(ソース)をコンポーネント化し、必要な場所に柔軟に読み込んで組み立てる手法がとられます。
ページの読み込み速度(表示パフォーマンス)を高速化させ、スマートフォンの狭い画面でも崩れないレスポンシブなホームページを安定して維持していくためには、こうした現代の標準技術に則ってコーディングを組み立てていくことが重要です。時代遅れの独自コードを完全に排除したクリーンな設計ルールが、企業の信頼性を高めるWebサイト運用の強固な土台となります。