<プロが教えるコーディング>レスポンシブページにレイアウト切替えボタン | 東京IT新聞

<プロが教えるコーディング>レスポンシブページにレイアウト切替えボタン

コンシューマー その他

CODING  FACTORYです。2010年6月から月1回のペースでお届けしている「Coding Methodology」は、1957案件のHTMLコーディング案件を納品した中から生み出された、今すぐ役立つ実践的コーディングノウハウです。第61回の今回もちょっとした工夫や発想の転換など、コーディングの手法やスムーズに進めるコツを紹介します。

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

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

 レスポンシブ対応のページは、画面幅によってレイアウトがかわります。それは、css3のMedia Queriesを使用することで実現しています。   上記の(1)は、レスポンシブ対応ページのheadタグ内の記述例です。PC用のcssとスマートフォン用のcssの両方を読み込み、media属性によって適用する画面幅を指定しています。例では、画面幅が768px以上でPCレイアウトに、767px以下でスマートフォンレイアウトになります。  では、端末の幅が768pxより狭いスマートフォンで、強制的にPCレイアウトにするにはどうすればよいでしょうか。ここで必要になるのがviewportの設定です。  (1)では、content属性に、「width=“device-width”」という値が指定されていますが、この値を「width=“960”」のように数値に変更すると、端末の固有の画面幅に関わらず、指定した数値が画面幅として認識されます。そのため、数値の部分に、PCレイアウトのコンテンツ幅を指定すれば、画面にぴったり収まる形で、PCページが縮小して表示されます。

viewportとcssを書き換える方法

 この仕組みを利用して、レイアウト切替えボタンがタップされたときに、headタグ内の指定を下記の(2)のように書き換えれば、レスポンシブ対応ページでレイアウトを変更することができます(※注)。   ロジックは、以下のようになります(切替えボタンのHTML例は下記の(3)を参照) 。 ■切替えボタンタップ時(javascriptによる処理 - 下記の(4)参照) 1.どちらのボタンがタップされたかを判別し、その値をcookieに保存する。2. 画面をリロードする。  ■画面ロード時(phpによる処理) 1. cookieの値を取得し、値があれば、該当するレイアウトのviewport及びcssを出力する(PCの場合は(2)-1、スマートフォンの場合は(2)-2参照)。2 . 値がなければ、レスポンシブ対応のviewport及びcssを出力する(1)。 (※注)viewportの書き換えは、javascriptを使用して属性値を上書きすることでも実現できますが、ロード後にviewportを書き換えることになるため、端末によっては変化を検知できず、レイアウトが切り替わらない場合があります。phpなどのサーバサイドプログラムであれば、ロード前に条件判定をし、必要な記述のみをHTMLとして出力するため、より安全に切り替えることができます。  
今回の執筆担当者 奈須 聡子(なす・さとこ) コーディングファクトリー コーディングチーム 班長/コーダー  
《株式会社モノサス》

特集

コンシューマー アクセスランキング

  1. 話題の「ユーチューバー」は本当に儲かる? その実態と現実を先駆者に聞く

    話題の「ユーチューバー」は本当に儲かる? その実態と現実を先駆者に聞く

  2. <IT坊主の説話>実は「経営」や「経済」は仏教から生まれた用語だった

    <IT坊主の説話>実は「経営」や「経済」は仏教から生まれた用語だった

  3. 実はすごい「ホームドア」 鉄道の自動運転化には欠かせぬ存在だった

    実はすごい「ホームドア」 鉄道の自動運転化には欠かせぬ存在だった

  4. 子供に超人気!5歳のユーチューバー“がっちゃん”はどうやって生まれたか

  5. なぜ「LINE」で乗っ取り被害に遭ってしまうのか 回避策はあるの?

アクセスランキングをもっと見る

page top