【Webデザイン】スマホ専用サイトをPCでも美しく！画面中央に固定するフレームレイアウトの実装

Webサイトの閲覧環境がスマートフォン中心となる中、モバイル専用のデザインで構築されたサイトが増加しています。しかし、モバイル専用のレイアウトをそのままパソコンの広い画面で表示すると、コンテンツが横に間延びしてしまい、デザインの意図が崩れてしまう課題があります。

本記事では、パソコンで閲覧された際には背景画像を設定し、画面の中央にスマートフォンサイズの「固定フレーム」を配置することで、デザインを美しく保つレイアウト手法について解説いたします。

具体的なHTMLの構造や、設定すべきCSSのソースコードについては、運営する技術ブログにて詳細に解説しております。具体的な実装方法やコードをすぐにご覧になりたい方は、まず以下のリンクより本編の記事をご参照ください。

https://morinokabu.com/2026/03/28/html-css-mobile-site-pc-layout/

モバイル専用デザインが抱えるPC表示の課題

スマートフォンの縦長画面に合わせて作られたWebサイトは、パソコンの横長画面でそのまま表示すると、文字の行が長くなりすぎたり、画像が極端に拡大されたりして、可読性が著しく低下します。

パソコン向けに全く異なる横長レイアウトをゼロから構築し直すアプローチもありますが、それには多大な開発工数が必要となります。そこで有効なのが、パソコンの画面を大きな「背景」として扱い、その中央にモバイル版のレイアウトをそのまま閉じ込めるフレームアプローチです。

画面の中央にスマホサイズのフレームを固定する

この手法では、パソコンの画面幅でアクセスされた際、画面の中央にスマートフォンの一般的な横幅（例：375pxなど）を持たせたフレームを配置します。

このフレームに対して角丸や影（ドロップシャドウ）の装飾を加えることで、まるでパソコンの画面上に本物のスマートフォンが置かれているかのような、洗練された独立した操作感を演出することができます。

CSSの計算機能で高さを動的に最適化する

フレームを配置する際、最も重要になるのが「高さの計算」です。閲覧するパソコンのモニターサイズはユーザーによって異なるため、高さを固定のピクセル数で指定してしまうと、画面からはみ出したり、不自然な余白ができたりします。

これを解決するために、現在のブラウザの表示領域の高さを取得する単位と、CSS内部で四則演算を行える計算関数を組み合わせます。「画面全体の高さから、上下の余白分を差し引いた数値」をブラウザに自動計算させることで、どのようなモニターサイズであっても常に美しい余白が保たれる、実用的なレイアウトが完成します。

具体的な実装コードはブログで公開中です

パソコン画面上にスマートフォンのフレームを構築するレイアウトの考え方についてお伝えいたしました。

「実際に画面中央へ要素を固定するCSSのプロパティ」や「画面の高さに合わせて計算を行う関数の具体的な記述方法」、「フレーム内部だけでスクロールさせるための設定」など、実際の開発現場ですぐに使えるソースコードは、メインブログにすべて掲載しています。

そのままコピーして動作を確認できる実践的なコードをご用意しております。洗練された表示を実現するフロントエンドの技術を学習中の方は、ぜひ以下のリンクから詳細をご確認いただき、ご自身のWebサイト制作にお役立てください。