こんにちは、最近スマートフォンコーディングにアップアップのともよーんです。
今回はスマートフォンコーディングにおいてよく言われる「なるべくリキッドレイアウトに」を解釈していきたいと思います。

スマートフォンコーディングに関して様々な技術ブログやWebサイトの記事で情報が発信されていますが、多くのサイトで共通して挙げられているのが、「なるべくリキッドレイアウトにする」ということです。
しかし、どこにも具体的な説明がなされていなかったため、結局実案件でトライアル＆エラーを繰り返すことになりました。本当に、やってみないとわからないことは多いものです。

ではでは、
・リキッドレイアウトにしたほうがよい理由
・リキッドレイアウトにする方法
のふたつの方面から見ていきたいと思います。

 

リキッドレイアウトにしたほうがよい理由

 

リキッドレイアウトとは、一般的に表示領域の幅がある程度変更されても従来のレイアウトを維持できるようにする手法のことです。まずリキッドレイアウトにしたほうがよい理由を考える上で、リキッドレイアウトにせず幅固定でページを作った場合のことを考えてみましょう。

幅が固定されていると、横幅をぴったりに表示させるためにデバイスの幅に合わせて全体を可変にする必要が出てきます。
ここで注意したいのが、全体を拡大・縮小させるとそれに伴って文字の大きさも拡大・縮小されるということです。
文字が大きくなると入ってくる情報量が少なくなり、文字が小さくなると読みにくくなり、
ユーザビリティ的に良くないページになってしまいます。

また、iPhone、iPadなどのデバイスの種類ごと、Androidに至っては機種ごとにデバイス幅が違うという奔放さなので、それぞれに対しての調整が必要になります。iPhoneでは、拡大するためにcssでzoomプロパティを指定すると、
フォントサイズが正しく認識されなくなるというバグも起こります。

つまりまとめると、幅を固定してしまうと調整の手間がかる上に読みにくいサイトになってしまう、という結果になります。

「なるべくリキッドにする」を解釈すると、
「縦向き横向きに関わらず同じ縮尺で、表示領域の幅だけ伸びる」手間のかからないページにするということで、
具体的には、
「viewportのinitial-scaleとmaximum-scale両方を1の状態でちゃんと表示されるサイトを作る」ということであると言えそうです。

 

リキッドレイアウトにする方法

 

■ブロック要素の幅指定
%指定にする、または、親要素に対してのマージンやパディングのみ指定するにとどめる。
ブロック要素が幅いっぱいいっぱいに広がろうとするという性質を理解しているとある程度実現可能です。
もちろんデザイナーさんがリキッドレイアウト前提のデザインをしてくれると大変やりやすくなります。

 

■サイズが可変になってほしい画像の幅指定
まず画像にぴったりサイズのブロック要素を用意して、その中に画像を配置する。
次にスタイルシートでその箱になる要素に対して画像の幅100％を指定する。

 

■サイズ固定の画像の作り方
ボタンやアイコンなどサイズ固定のものは、単純に画像を配置する。
テキストベースでボタンを作る場合はcssで実現できる範囲の背景にする。
背景に画像を敷いてその上にテキストを置くと、デバイスによってテキストの位置に微妙な差が生じるので
上下の位置がずれて恰好悪いことになりやすいです。

 

まとめ

このようにポイントを押さえて、できるだけフレキシブルに作ってブラウザに素直に解釈してもらう！
これが一番ですね。