スマートフォン 08
リキッドレイアウトのためのベース作り

スマートフォンブラウザはデバイスにより解像度が異なり、同じデバイスでも縦向き／横向きで表示幅が大きく違ってくるため、リキッドレイアウトを採用することが多い。ここでは、リキッドレイアウトのベースの作り方を紹介しよう。

制作・文／新家友代（株式会社スタジオ・アルカナ）

BROWSER iOS Andoroid

01

リキッドレイアウトとは、一般的にWebサイトの幅を固定せず、ユーザーのウィンドウ幅に合わせてレイアウトを維持できるように柔軟性をもたせる手法を指す。PCサイトのレイアウト方法としては賛否両論もある手法だが、スマートフォンのサイトをデザインする上では基本となる。

なぜなら、iPhoneでは縦、横に持ち変えることでサイト画面も縦横が切り替わるが、縦持ちの幅を基準に固定幅でサイトを作ると横画面では非常に見づらくなってしまう。また、iPhone／iPadといったデバイスの種別だけでなく、Android端末にいたっては機種ごとに画面幅が異なるため、サイトの横幅を固定すると端末によっては横スクロールが必要になってしまいユーザビリティに問題が出てくる【1-1】。ほかにも後述するViewportの設定においてwidthにdevice-widthを指定した場合、iPhone系は現状では320pxに統一されているが、Androidは360pxになることも多いため、こうしたところでも細かいレイアウトの崩れが起こってしまう。

したがってデバイスの幅に合わせて自動的に調整されるリキッドレイアウトでサイトをデザインすれば、機種対応などで細かい苦労を強いられることもなく、ある程度のユーザビリティが確保されたサイトを制作することができる【1-2】。

それでは実際にリキッドレイアウトでサイト制作するためのベースを作っていこう。

【1-1】固定幅のサイトでは決めた固定幅より小さい画面で見ると、左右が切れてしまいサイト全体を見るには横スクロールしなくてはならない。

【1-2】リキッドレイアウトでは、画面のサイズに合わせて自動的にサイトのサイズが調整される。

02

まず初めに、Viewportを正しく設定して画面表示の縮尺を揃えていく。

iPhone 用Safari は、PC におけるブラウザのウィンドウサイズに該当するViewportという概念を持っている。デフォルト値は980pxで、試しにViewportを指定していないPCサイトをスマートフォン端末で表示するとわかるが、およそ1/3程度に縮小された状態で表示される。つまり、PCのブラウザウィンドウの幅を980pxにして閲覧した状態だ。この場合、全体の様子は確認できるが、文字が小さすぎるため、読みたいところをピンチやダブルタップで拡大することになる。

そこで、スマートフォン専用のページを作る場合には、独自のViewportを指定することにより、ページ読み込み時の画面サイズ・拡大率を操作して、可読性の高いページを作る。つまり、可読性維持とレイアウト保持の観点から、縮尺を等倍に保った上で拡大縮小を禁止し、デバイスによる表示の差異をなくす、という流れになる【2-1】。各指定の詳細は【2-2】のとおりだ。なお、Viewportについては「スマートフォン 10　スマートフォンサイトでのViewport設定」でも詳しく解説する予定だ。

【2-1】meta viewportの指定により拡大・縮小表示を防ぐ。指定しなかったパラメータにはデフォルト値が入るので、すべてを指定する必要はない。

【2-2】Viewportの指定内容。指定されていない一般のサイトでは自動的に980pxのデフォルト値で表示され、スマートフォンの小さい画面では非常に文字が小さく読みにくい表示になる。

03

次にCSSファイルを用意する。サンプルではhtml5のリセット用CSSファイルbase.cssと、スタイル記述用のcontents.cssを用意してhead内で読み込ませている。

サンプルで使用しているリセットのCSS はhtml5 Doctor（http://html5doctor.com/）というサイトで配布されているものだ【3-1】。

ほかにも無料で配布されているものがあるので、自分に合ったものを探して最適化させていくとよいだろう。

ベース作りの最後は、body内の骨組みを大まかに作っておくことである。最初にこの作業をやっておくと、全体のバランスを見ながら効率よくコーディングを進めることが可能になる。また、この状態で汎用性のあるスマホサイトのテンプレートとして使い回すことができるので便利だ。これでリキッドレイアウトのベースが完成した【3-2】。

【3-1】リセット用CSSはhtml5 Doctorのものを使用している。

【3-2】「HTML」ではリキッドレイアウトのベースが完成。「CSS」は、抜粋したものであるが、width指定はせずに、左右のマージン指定のみでリキッド対応にしている。

[目次に戻る]

【本記事について】
2012年7月28日発売のweb creators特別号「新世代Web制作テクニック総特集」から、毎週記事をピックアップしてご紹介! スマートフォンサイト特集ではデザインのルールとコーディングのポイント、ソーシャルメディア特集では従来のWebサイトとの違いと有効な活用方法、WordPress特集ではサイト構築に必要な機能と役立つプラグインなど、基本的な知識と必須テクニックを網羅した内容になっています。

※本記事はweb creators特別号『新世代Web制作テクニック総特集』からの転載です。この記事は誌面でも読むことができます。