現在別サイトを作成中だが、以下のような問題が出てきた。 ページ数が多く、フッターに決まり文句を記載している場合、１字でも変更すると全ページを修正しなければならない。フッターをひとつの HTML ファイルに切り出し、それを各ページで呼び出せば管理が容易になる。その方法はいくつかあるので、どれが良いか吟味してみた。 ① PHP：全ページのファイル拡張子を php に変更する必要がある。 ② SSI：利用している「お名前.com」では全ページのファイル拡張子を shtml に変更する必要がある。 ③ JavaScript：オフラインでは動作しないと思われる。 <div id="footer"></div> <script> fetch("footer.html") .then((response) => response.text()) .then((data) => document.querySelector("#footer").innerHTML = data); </script> ④ iframe：ネット上であまり推奨されていないが、もっともとっつきやすい。 ① ② ③ は難点がある。④ の方法でやってみよう。HTML5 では height を px で指定しなければならないので、ウインドウ幅を変えたときに footer 文の行数が増減すると下端に余白ができたり下端が隠れたりする。縦横比が一定のコンテンツをぴったり埋め込むには calc で height を求めればよいが、それとは事情が異なる。そのため、レスポンシブデザインでお馴染みの方法を使って次のようにする。 HTML <div id="wrap-iframe"> <p><iframe class="myiframe" allowTransparency="true" frameBorder="0" marginHeight="0" marginWidth="0" scrolling="no" src="footer.html"></iframe></p> </div> CSS #wrap-iframe { posiiton: relative; margin: 0; padding: 0; } .myiframe { position: absolute; left: 0; width: 100%; height: 118px; /* デフォールトは２行の場合（数値は適宜調整・以下同様）*/ } @media screen and (max-width: 907px) { /* ウインドウ幅が 907px 以下の場合：３行 */ .myiframe { height: 138px; } } @media screen and (min-width: 1794px) { /* ウインドウ幅が 1794px 以上の場合：１行 */ .myiframe { height: 98px; } } CSS（スマホ用） @media screen and (max-width: 479px) { .myiframe { height: 215px; } } は、デスクトップファーストでもモバイルファーストでもない。