フレームセットを使った古い日記のHTMLを書き直しました

フレームセットを使った古い日記のHTMLを書き直しました

<frameset>で左にメニュー、右にコンテンツ…。
画像は横幅360pxで表示するスマートフォンをエミュレートしたものです。
googleのモバイルユーザビリティテストでモバイルフレンドリーではないと出てしまいます。
仕方がないので、モバイル端末の時は左側のメニューページにリダイレクトがかかるようにしていましたが…。
Google ウェブマスター向け公式ブログ: モバイル ファースト インデックスを開始します

モバイル ファースト インデックスとは、モバイル版のページをインデックスやランキングに使用し、主にモバイル ユーザーが探しているものを見つけやすくすることを意味します。
コンテンツではなく、メニューだけインデックスされるようになりました。

フレームセットを使った古い日記のHTMLを書き直しました

だったら、<iframe src=""></iframe>、つまりインラインフレームを使ってPCで表示する時は左右分割フレームのようにして、スマートフォンの時はメニューが上に移動するようにすれば…。
HTML5で<frameset>タグが廃止されたのはおそらく、代わりに<iframe src=""></iframe>を使えという事なんだろうな…と思いました。

ところが、CPU使用率が100%になり、「このページは応答していません」になってしまいます。
インラインフレームで長い縦スクロールは…想定されている操作ではないのかもしれません。

PCでも負荷が高くなってブラウザが固まる…となると、モバイル端末ではさらに…。

書き直す事にしました。

フレームセットを使った古い日記のHTMLを書き直しました

左のメニューの位置を固定したので、スクロールするのは右側のコンテンツだけ。
まるで左右分割フレームのようになりました。

しかし、この書き方では…。
すべてのページに左側のメニューが必要です。
フレームを使っていたのは、それが面倒だったからなのですが…。

秀丸エディタのgrepして置換を使ってどうにかしました。

フレームセットを使った古い日記のHTMLを書き直しました

スマートフォンの時は、メニュー上、コンテンツが下、どちらもスクロールするように。

フレームセットを使った古い日記のHTMLを書き直しましたフレームセットを使った古い日記のHTMLを書き直しました
/*疑似フレーム*/

.menu {
width: 218px;
margin: 18px 0 0 16px;
position: fixed;
top: 0;
}
.content {
width: calc(100% - 258px);
position: absolute;
left: 250px;
margin: 8px 0 0 0;
}
左メニューの幅は8+18+218=242です。最初の8pxはbodyのデフォルトのマージンです。
右側のコンテンツは、左から250pxの位置から…。
250-242=8px分の余白を確保するためです。
右側のコンテンツの幅は 100%-258px 。100%-250pxにすると、右側の余白が0になるので、8px分幅を狭くしました。

フレームセットを使った古い日記のHTMLを書き直しました

ChromeでiPadをエミュレート。コンテンツの左右に8px分の余白。

フレームセットを使った古い日記のHTMLを書き直しました

文字フォントがMS P ゴシックだったので、メイリオに変更して見た目を近代化…。

レガシーなタグがまだたくさん残っていますが、どうにか…。

らくがき絵日記

今回作業したページはこちら。
posted by さとぴあ at 2019/02/10 22:07 | Web制作

この記事へのコメント

コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。