レスポンシブWebサイトのデザイン方法を解説！デバイスごとに美しく表示させる基本テクニック

レスポンシブWebサイトとは、デスクトップPC、タブレット、スマートフォンなど、あらゆるデバイス上で美しく見やすい表示を実現するWebサイトのことです。サイトをレスポンシブ対応にするには、レスポンシブデザインを採用する必要があります。

その仕組みの中心にあるのは、HTMLとCSSを活用して画面サイズに応じて要素のサイズを変更したり、非表示にしたり、拡大表示したりする技術です。

レスポンシブとは？表示イメージを見てみよう

まずは、ブラウザのサイズを変更したときにWebサイトがどのように変化するのか、具体例を見てみましょう。

デスクトップ（PC）での表示

デスクトップPCでのWebサイトデザインは以下のようになります。

タブレットでの表示

同じWebサイトをタブレットで表示すると、このようにレイアウトが調整されます。先ほどのデスクトップのスクリーンショットと比較してみると、違いがよく分かります。

スマートフォンでの表示

スマートフォンでは、さらにコンパクトなレイアウトへと自動的に切り替わります。

このように、デバイスの画面サイズに関わらず見栄えの良いレスポンシブWebサイトを作るには、以下の3つの重要な概念を理解し、実装する必要があります。

1. ビューポート（Viewport）の設定

ビューポートは、モバイルブラウザ上のレイアウトを制御するための設定です。<meta>タグ内に記述することで、Webページの寸法やスケーリングをどのように制御するかをブラウザに指示できます。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

このコードの各部分の意味は以下の通りです。

• width=device-width：ページの幅をデバイスの画面幅に合わせて設定します。
• initial-scale=1.0：初期のズーム倍率を設定します。ページがブラウザに最初に読み込まれる際の拡大率を制御します。

この設定がないと、スマートフォンでPC向けサイトが縮小されて表示されたり、意図しないレイアウトになってしまうため、レスポンシブ対応の第一歩として必ず記述しましょう。

2. メディアクエリ（Media Queries）の活用

メディアクエリを使うと、「ブレークポイント」と呼ばれる特定の画面幅の境界線を設定できます。ブレークポイントを境にして、デザインの各部分が異なる挙動をするようにCSSを切り替えることが可能です。

例えば、画面幅が768px以下の場合はナビゲーションメニューをハンバーガーメニューに変更する、といった柔軟なデザイン調整が行えます。

3. 画像のwidth・heightプロパティの設定

画像をレスポンシブ対応させるには、CSSでwidthプロパティを100%に、heightプロパティをautoに設定します。

img {
  max-width: 100%;
  height: auto;
}

こうすることで、画像が親要素の幅に合わせて自動的に縮小され、画面からはみ出すことなく、縦横比も維持されたまま表示されます。

まとめ

レスポンシブWebサイトの実現には、①ビューポートの適切な設定、②メディアクエリによるブレークポイントの設計、③画像の柔軟なサイズ指定、という3つの要素が欠かせません。これらの基本を押さえることで、PCでもスマートフォンでも快適に閲覧できる、ユーザーフレンドリーなWebサイトを構築できます。