• コーディング ファクトリーHOME
  • Coding Methodology
  • 第81回 レスポンシブページでレイアウト切替えボタンを実装する

コーディングメソドロジー

第81回 レスポンシブページでレイアウト切替えボタンを実装する

スマートフォンでサイトを見ていると、「PC表示」や「スマートフォン版へ」といったボタンを見かけることがあります。今回は、こうしたレイアウト切替えボタンをレスポンシブ対応のページで実現する方法をご紹介します。

レスポンシブ対応ページのレイアウトを決める要因

レスポンシブ対応のページは、画面幅によってレイアウトがかわります。それは、css3のMedia Queriesを使用することで実現しています。は、レスポンシブ対応ページのheadタグ内の記述例です。PC用のcssとスマートフォン用のcssの両方を読み込み、media属性によって適用する画面幅を指定しています。例では、画面幅が768px以上でPCレイアウトに、767px以下でスマートフォンレイアウトになります。

レスポンシブ対応ページのheadタグ内の記述 - ①

レスポンシブ対応ページのheadタグ内の記述 - ①

では、端末の幅が768pxより狭いスマートフォンで、強制的にPCレイアウトにするにはどうすればよいでしょうか。ここで必要になるのがviewportの設定です。では、content属性に、「width="device-width"」という値が指定されていますが、この値を「width="960"」のように数値に変更すると、端末の固有の画面幅に関わらず、指定した数値が画面幅として認識されます。そのため、数値の部分に、PCレイアウトのコンテンツ幅を指定すれば、画面にぴったり収まる形で、PCページが縮小して表示されます。

viewportとcssを書き換える方法

切替えボタンタップ時に出力するheadタグ内の記述 - ②

切替えボタンタップ時に出力するheadタグ内の記述 - ②

切替えボタンのHTML - ③

切替えボタンのHTML - ③

この仕組みを利用して、レイアウト切替えボタンがタップされたときに、headタグ内の指定をのように書き換えれば、レスポンシブ対応ページでレイアウトを変更することができます(※注)。
ロジックは、以下のようになります(切替えボタンのHTML例はを参照) 。

■切替えボタンタップ時(javascriptによる処理 -

  • 1.どちらのボタンがタップされたかを判別し、その値をcookieに保存する。
  • 2. 画面をリロードする。

■画面ロード時(phpによる処理)

  • 1. cookieの値を取得し、値があれば、該当するレイアウトのviewport及びcssを出力する(PCの場合は②-1、スマートフォンの場合は②-2)。
  • 2 . 値がなければ、レスポンシブ対応のviewport及びcssを出力する()。

javascript (jQuery) の処理‒ ④

javascript (jQuery) の処理‒ ④

※注)viewportの書き換えは、javascriptを使用して属性値を上書きすることでも実現できますが、ロード後にviewportを書き換えることになるため、端末によっては変化を検知できず、レイアウトが切り替わらない場合があります。
php等のサーバーサイドプログラムであれば、ロード前に条件判定をし、必要な記述のみをHTMLとして出力するため、より安全に切り替えることができます。

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • レスポンシブWebデザインセミナーがDVDになりました。
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム