フレームを使わずに現代的なWebレイアウトを構築する方法

かつての日本語サイトでは、画面を複数の領域に分割し、メニュー、本文、補助情報を別々のHTML文書として表示するフレーム構成が広く使われていました。更新しやすく、限られた通信環境でもページを組み立てやすい仕組みでしたが、現在のブラウザーや検索エンジン、スマートフォン利用を前提にすると、操作性と保守性の面で課題が目立ちます。

フレームを使わずに同等のレイアウトを実現するCSSの代替案としては、CSS Grid、Flexbox、固定配置、position: sticky、レスポンシブ設計を組み合わせる方法が基本になります。古いサイトを再設計する場合は、見た目をそのまま再現するだけでなく、文書構造、URL、アクセシビリティ、文字コードまで整理することが重要です。

フレーム構成が担っていた役割を分解する

フレームを置き換える前に、元の画面がどのような役割分担で成り立っていたかを確認します。左側に常時表示されるメニューがあり、右側に本文を表示する構成なら、現在は一つのHTML文書の中にheader、nav、main、aside、footerを配置し、それぞれをCSSでレイアウトします。表示領域を分割するのではなく、意味を持つ要素を並べる発想に変えることが出発点です。

フレームでは、メニュー側の文書と本文側の文書が別々に読み込まれていました。そのため、ページタイトルや検索結果のURLが分かりにくくなり、履歴操作にも不自然な挙動が生じます。新しい構成では、各ページに固有のURLとタイトルを与え、リンクを通常のアンカーとして機能させます。共通部分はテンプレート、静的サイトジェネレーター、サーバーサイドの部品化などで管理すると、重複したHTMLも抑えられます。

旧サイトの状態を調べる際には、HTMLの変遷資料のような歴史的背景も参考になります。文字化けしたタイトルや読み込めない画像が残っている場合は、レイアウトだけでなく、文書のエンコーディングと参照先も同時に点検すると、再構築後の不具合を減らせます。

CSS Gridでページ全体の骨格を作る

複数の列と行を持つページには、CSS Gridが適しています。たとえば、上部にヘッダー、中央にナビゲーションと本文、下部にフッターを置く構成なら、グリッド領域を名前で定義できます。HTMLの順序と視覚的な配置を分離しすぎないよう注意しながら、画面全体の骨格を一つのCSSで管理できます。

.page {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "nav    main"
    "footer footer";
  min-height: 100vh;
}

.site-header { grid-area: header; }
.site-nav    { grid-area: nav; }
.site-main   { grid-area: main; }
.site-footer { grid-area: footer; }

minmax(0, 1fr)を使うと、長いURLや大きな画像によって本文領域が意図せず横へ広がる問題を抑えられます。フレーム時代のように幅をピクセルで固定するのではなく、メニューは読みやすい最小幅、本文は残りの領域という考え方で設計します。gap、padding、max-widthを組み合わせれば、境界線や余白を含む古い画面の印象も無理なく再現できます。

Flexboxでナビゲーションと部品を整える

横並びのメニュー、ヘッダー内のロゴと操作ボタン、カードの一覧など、一次元の配置にはFlexboxが向いています。Gridをページの大枠に使い、Flexboxを各部品の内部に使うと、役割が明確になります。ナビゲーション項目の数が増減しても、flex-wrapによって自然に折り返せるため、固定幅のセルを並べる方式より柔軟です。

.site-nav ul {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

古いフレームページでは、メニューをクリックすると右側だけが更新されるため、利用者は同じ画面のまま内容が変わる感覚を持っていました。この感覚を現代の構成で保つなら、ページ全体を遷移させる通常リンクを基本にし、必要な箇所だけJavaScriptで部分更新します。JavaScriptが無効でも内容へ到達できる設計にしておけば、検索エンジンや支援技術にも情報が伝わります。

ボタンやリンクの高さ、行間、フォーカス表示もFlexboxによる整列と一緒に調整します。画像だけをロゴとして置く場合には、代替テキストを設定し、画像が欠けてもサイト名やページの役割が伝わるようにします。古い画像ファイルをそのまま再利用する場合も、表示サイズをCSSで制御し、レイアウトの幅を画像の実寸に依存させないことが大切です。

固定メニューとスクロールを再設計する

フレームの大きな特徴は、メニューを固定したまま本文だけをスクロールできることでした。現代のCSSでは、position: stickyを使うと、通常の文書の流れを保ったまま、指定位置に達した要素を画面内に留められます。次のように設定すれば、長い本文を読んでいる途中でも目次や補助メニューを確認できます。

.side-menu {
  position: sticky;
  top: 1rem;
  align-self: start;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

stickyが機能しない場合は、親要素にoverflow: hiddenやoverflow: autoが指定されていないか確認します。また、メニューの高さが画面を超えると、メニュー自身をスクロール可能にする必要があります。固定要素の下に本文が隠れないよう、上部の余白やスクロールマージンも調整します。

画面全体をposition: fixedで構成する方法もありますが、本文の高さやキーボード操作への配慮が必要です。固定配置を多用すると、拡大表示した利用者が本文へ到達できなくなったり、スマートフォンのアドレスバーによって表示領域が変化したりします。通常の文書フローを基本とし、固定が本当に必要な部分だけに限定すると、扱いやすいレイアウトになります。

スマートフォン向けに表示を切り替える

フレームを前提にした古い画面は、横幅の狭い端末でメニューと本文が押し合い、文字が読みにくくなりがちです。CSSメディアクエリを使えば、一定幅を境に二段組みを一列へ切り替えられます。重要なのは、デスクトップ用の配置を小さく縮めるのではなく、情報の優先順位に合わせて構造を変えることです。

@media (max-width: 48rem) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "nav"
      "main"
      "footer";
  }

  .side-menu {
    position: static;
    max-height: none;
  }

  .site-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

メニュー項目が多い場合は、開閉式のナビゲーションにする方法があります。その際は、見た目だけでなくbutton要素、aria-expanded、キーボード操作を組み合わせます。単純に幅を超えた項目を隠すと、利用者が存在に気づけないため、開閉状態が分かるラベルと視覚的な状態表示を用意します。

画像や表を含む本文には、max-width: 100%、height: auto、適切な折り返し設定を適用します。横幅の固定値を多数残すと、グリッドを導入しても横スクロールが発生します。相対単位、clamp()、min()、max()を利用して、画面幅に応じて文字サイズや余白を滑らかに変えると、広い画面と小さな画面の両方で読みやすくなります。

URLとページ遷移を分かりやすくする

フレームを廃止する作業では、見た目の移植よりURL設計のほうが長期的な影響を持ちます。本文が切り替わるたびにURLも変わるようにし、利用者がブックマークや共有を行える状態にします。ページタイトル、見出し、パンくずリストもURLの内容と対応させると、検索結果から訪れた人が現在地を判断しやすくなります。

古いサイトのリンクには、相対パスの誤り、拡張子の違い、文字化けしたファイル名、存在しないフレームターゲットが含まれていることがあります。移行時にはリンク一覧を作り、各ページが単独で開けるか、画像やスタイルシートが正しく読み込まれるか確認します。旧URLをすぐに削除せず、必要に応じてリダイレクトを設定すると、外部からの参照も維持できます。

サイトの役割や提供内容が判別しにくい古いページでは、トップページにサイト名、概要、主要な導線を明示します。たとえば、関連するWeb情報へ移動する入口として参考サイトを案内する場合も、リンク先が何を扱うページなのかを短い説明で示します。リンク文字だけを並べるより、利用者が移動の目的を理解しやすくなります。

アクセシビリティと保守性を高める

フレームを使わない構成では、見た目の自由度が高まる一方、HTMLの意味づけを開発者が担う必要があります。ページの主題はh1、大きな区分はh2、補助的な区分はh3というように、見た目の大きさではなく情報の階層で見出しを設計します。リンク先が本文なのか資料なのか、外部サイトなのかも、リンク周辺の文章で分かるようにします。

文字コードはHTMLのmeta charset="UTF-8"、HTTPヘッダー、保存ファイルの実際のエンコーディングを一致させます。いずれか一つだけを変更すると、タイトルやメニューだけが文字化けする場合があります。古い機種依存文字や半角カナを含む資料は、原文を保持する必要があるか確認したうえで、表示用の文章をUnicodeへ整理します。

CSSは一つの巨大なファイルにまとめるより、レイアウト、部品、ページ固有の調整に分けると変更箇所を追いやすくなります。色や余白をCSSカスタムプロパティに集約すれば、古い配色を保ちながら、コントラストを改善する作業も容易です。フォントサイズを固定しすぎず、ブラウザーの拡大機能を妨げないことも、長期運用では欠かせません。

段階的な移行と表示確認を進める

大規模な古いサイトを一度に作り直すと、リンク切れや情報の欠落を見つけにくくなります。最初に現状のURL、画像、文書、フレーム関係を一覧化し、次に共通レイアウトを作り、その後で個別ページを移行する段階方式が安全です。トップページや代表的な本文ページを先に対象にすると、ナビゲーションとCSSの問題を早い段階で発見できます。

確認時には、デスクトップの主要ブラウザーだけでなく、スマートフォン、タブレット、文字サイズを拡大した環境、キーボードだけで操作する環境も調べます。横スクロールの発生、フォーカス位置、開閉メニューの状態、画像がない場合の表示、印刷時の崩れを確認します。自動のリンクチェックやHTML検証を取り入れると、目視だけでは見逃しやすい問題を減らせます。

レイアウトの再現度を評価するときは、昔の画面とピクセル単位で一致させることを目的にしません。メニューが見つかるか、本文が読みやすいか、ページを直接共有できるか、スマートフォンでも迷わず移動できるかを基準にします。視覚的な雰囲気を残しつつ、構造と操作を現在のWeb標準に合わせることが、フレーム廃止の実質的な成果になります。

既存のHTMLを少しずつ整理し、CSS GridとFlexboxで構造を置き換え、stickyとメディアクエリで画面幅に適応させてください。URL、文字コード、見出し、キーボード操作まで確認すれば、古いサイトの記憶に残る配置を活かしながら、長く使えるWebページへ移行できます。