mieki256's diary

せっかくだからCSSを使って今風のHTMLにしてみようかと、Microsoft Visual Studio Code 1.98.2 + Live Server拡張 + GoogleChrome 134.0.6998.178 を使って修正を試みたのだけど…。

手元の環境では問題無く表示できる html を、親父さんが使ってるホームページビルダー 20.0.6.0 で開いてみたら、「エラーがあるから修正する」と表示されて、結構な部分を破壊されてしまった…。レイアウトまでグチャグチャ。仕方ないので、ホームページビルダー上で古のテーブルレイアウトを多用してレイアウトし直す羽目に…。

一応トップページを差し替えることはできたけれど、今後の更新作業には難がある状態で…。

トップページを修正しようとして、ホームページビルダーで自宅サーバ用アカウント全体のサイト情報を開いてしまうと、ページ数や画像数が膨大過ぎて、ホームページビルダーが15〜30分ぐらい無反応になる。これではトップページ(index.html)の更新作業なんて滅多にできない。

かといって、サイト情報は開かずに、トップページだけ開いて編集すると、親父さんは依存(?)ファイルを把握しないまま作業してるので、どの画像ファイルをアップロードすればいいのかも分からずに「画像が見れない」と言い出して絶対にハマるだろう…。

トップページには手をつけず、トップページ内に別ファイルを表示できればいいのに、と思ったところで iframeタグが使えるのではないかと気が付いた。

試しにそういうHTMLを書いてみたけど、おそらくイケそう。

iframe を使えば更新される部分だけ別ディレクトリに置いておくことができるから、そのディレクトリだけをホームページビルダーで管理すれば、比較的軽い状態で作業ができるのではないかな…。たぶん。

ただ、iframeのサイズを決め打ちできないというか、表示するhtmlの縦横幅を反映できないのは問題だなと…。ページ内にスクロールバーが出現してしまうので、ちょっとダサい。どうにかならんか…。

以下のページで、JavaScript を利用すれば iframe内のhtmlの幅と高さをiframeに反映させることができると知った。

_CSSでiframeタグの高さを自動調整する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

手元で試したところ、たしかに動作した。問題は、ホームページビルダー 20 で開くとどうなるか…。