• コーディング ファクトリーHOME
  • Coding Methodology
  • 第51回 スマートフォンサイトを横向きにしたときの制作パターンについて

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

第51回 スマートフォンサイトを横向きにしたときの制作パターンについて

スマートフォンサイトを構築する場合、ランドスケープ(横向き)に対応するための方法の一つとして、「viewport」の設定が考えられます。今回は、その「viewport」を用いた設定方法を3パターンに分けてご紹介します。

① コンテンツの幅を固定するパターン

ランドスケープにしたとき、コンテンツの幅は固定して、左右に余白を設け、画面中央に表示させるパターンです。
縦向きのときと見た目を変えたくない場合は、このパターンに該当します。

コーディングの方法としては、パソコン用サイトをコーディングする時と同様ですが、スマートフォン用にviewportをheadタグ内に記述する必要があります。

① コンテンツの幅を固定するパターン

①②③縦向きの表示画面 ①の横向きの表示画面

② 横広がりになるパターン(リキッドレイアウト)

ランドスケープにしたとき、画像やテキストの大きさは変わらず、ボタンやリンクエリア等の可変できるもののみ、画面幅に合わせて横に広がるパターンです。
ボタンやリンクエリア等も合わせて大きく広がるので、ランドスケープにした状態でも押しやすくなります。

コーディングの注意点としては、横広がりを実現させる為、リキッドレイアウトで制作します。

② 横広がりになるパターン(リキッドレイアウト)

②の横向きの表示画面

③ 縦横比は変えずサイトを拡大させるパターン

サイトのレイアウトは変えずに、デバイス幅に合わせてコンテンツを拡大させるパターンです。①のパターンとは違い、左右の余白を設けないで、デバイス幅に合わせてサイトを表示できます。ただし、コンテンツ全体を拡大してしまうので、文字の表示が大きくなったり、
画像の表示が荒くなったりする場合があります。

※viewportの設定はしますが、javascriptも設定します。

③ 縦横比は変えずサイトを拡大させるパターン

③の横向きの表示画面

※viewport内タグにおける説明

<meta name="viewport" content="width=コンテンツの横幅", initial-scale="ページを開いたときの倍率", minimum-scale=最小倍率, maximum-scale=最大倍率, user-scalable=拡大縮小の可否">

※viewport内タグにおける説明

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

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

    お問い合わせ

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

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