| 2018/02/09 | サイトの更新・フレーム対応 | |||
<frame>や<iframe>を使ったページだと、iPadやAndroidのような端末では、スクロールバーが出ないため表示がうまくいきません。たとえば「ずんぐり車図鑑」のページだと、フレームの高さに関係なくダダーと全部表示されてしまうためレイアウトがうまくいかず、フレームが使えませんでした。最近、cssファイルを使った裏技のようなものを覚えたのでフレームを使うことにしました。
やり方は、cssファイルにiframeのコンテナになるものを書いておいて、ここにフレームのサイズをピクセル単位で指定、次にiframeのスタイルを指定、ここには width:100%;、height:100%;を指定。そうすると実際のhtmlファイル上で、<div class="iframeのコンテナ名"> <iframe class="スタイル名" src="ファイル名" ＞といった具合にすると、何故かiPad上でもフレームのサイズが固定できるため、表示があふれることがなくなります。iPadではパソコンのブラウザーのようなスクロールバーは出ないので、フレームに表示しきれない行は、そこの画面を指で押さえたままスライドさせてスクロールさせることになります。
トップページと「ずんぐり車図鑑」、「ずんぐりF1」のページの一部に使っています。現在、「ずんぐりF1」のページは、順次、フレーム対応版に書き変えを進めているところです。
ブログのページは、cssファイルに書かずに、あえて<iframe>タグをhtml書類に直接記述しているので、iPadだと1月分のファイルが縦にずらっと表示されます。フレーム枠を固定しない方が見やすように思いました。PCのブラウザの場合は、フレームサイズをオーバーした分はスクロールバーが表示されます。
ただし、現在使っている編集ソフトが、DreamweaverMX2004とかなり古く、最新のHTMLには対応していないため<iframe>の編集や表示確認ができません。この部分だけテキストエディタで直接編集しています。
ホームページ・ビルダーのようなソフトを試したことがありますが、サイトのファイル数が多いため最初の起動で完全に固まってしまいます（何時間たってもサイト管理のファイルができない）。Dreamweaverだとファイル数が多くても問題がないのですが、今のバージョンはかなりのプロ仕様で素人には使いこなせないと思い、古いバージョンのものをそのまま使い続けています。
ホームページの作成を始めた頃は、インターネットも常時接続ができず、随時モデムを繋ぐのが普通、ファイルをアップロードしても数時間は更新されないのが普通でした。そのため、画面サイズは800ドット以下で作成し、極力画像は小さくしていましたが、ネット環境やパソコンの性能が向上した今となっては、あまり大きな制約はありません。画面を少しだけ大きくしたり、新しいHTML規格を使ったり、ちょこちょこと改良していくのも面白くなっています。