スマホサイトで画面の横幅に応じて、レイアウト比率を変えないで対応する
スマホサイト隆盛の現在において、レスポンシブデザインの知識はHTML5のコーダーにとって必須ですね。
レスポンシブデザインというと、まぁ、普通はメディアクエリで画面の横幅基準でブレイクポイントを作り、設定を切り替えるという方法をとるでしょう。
bootstrapもこれですね。
とある仕事で、もうちょっとアプリ的に対応したいという場合がありまして。
つまり、メディアクエリで対応するレスポンシブの場合、ブレイクポイント同士の間は同じCSS設定が反映されるため、全体の見た目が一定ではないのですね。
例えば、横幅320px～374pxで文字サイズを12pxに指定した場合、一行に入る文字数は320pxの場合と360pxの場合では異なります。
その分、行数が減る箇所もあれば、それによってやや余白が出ることもあるでしょう。
そうじゃ無くて、どんな画面サイズでも、（ほぼ）常に一定のレイアウトにしたい、というのがその時の要望。
例えば画像を横幅100%で表示するとすると、その画像はどんなサイズの端末で見ても横一杯に広がって見えます。
横幅に対する画像の中の（画像化された）文字の比率も一緒です。
こういうことを画像じゃなくてテキストでもやりたいと。
で、考えた方法は２種類あります。
（１）cssのvwという単位を使う
（２）jQueryで横幅から基本のサイズを割り出し、全体をそれに対する比率で設定する
■（１）について
単位というとpxとか%とかemとかいろいろあります。
cssで数値を%で指定した場合、ボックスの幅なんかは、親要素に対する割合になります。
しかし、文字のサイズ（font-size）を%で設定した場合、親要素のfont-sizeに対する割合になるのですね。
例えば画面の横幅320pxに対して、1行に10文字入れたい場合、文字は32pxにすれば良いのですが、これをfont-size:10%とは書けないのですね。
そこで新しく登場したのがvwという単位。
上記の例で言うと、font-size:10vmと書くことができるのです。
vwは、画面の横幅に対する比率を設定することができる単位で、1vwは「画面の横幅に対する1%」です。
おお、すげー！便利！
と思ったんだけど、落とし穴が。
vwのブラウザ対応を調べると、Android4.3、4.2の標準ブラウザで非対応とあります。
あとOpera Mini。
http://caniuse.com/#search=vw
切り捨てても良くない？と個人的には思うんですけど、依頼時に対応が必要な環境として指定されているとどうしようもない。
■（２）について
そこで考え出したのがこの（２）の方法
力業だけど、そんなに複雑ではないです。
例えば、320pxの横幅を基本にすると決めます。（基準は何でも良いけど、計算しやすいので）
で、以下のようにします。
（ａ）jQueryで横幅を取得し、それを32で割った値をhtmlのfont-sizeに設定する。
画面が320pxの場合、htmlにfont-size:10pxがセットされます。
$("html").css("font-size",$("body").width()/32);
（ｂ）文字サイズ、ボックスのサイズ、余白、線の太さ、あらゆるサイズの単位をremで指定する。
remはhtmlに指定されたfont-sizeを基準とした単位です。
画面が320pxの場合、htmlにfont-size:10pxがセットされ、1remも10pxになります。
つまり、32rem=100%=320pxということですね。
画面のサイズが異なる端末で表示したときは、jQueryで設定される基準値が変わりますが、全体的な比率は維持されます。
例えば画面の横幅が375pxだったとしても、
32rem=100%=375pxです。
あとは320pxの画面を基本にデザインしていくだけ。
簡単です。
10px相当の文字を出したいときは、1rem。
マージンを5px相当取りたい場合は、0.5rem。
ちなみにここで320pxの画面を基準にしたのは数字が比較的きれいなのと、自分の手元に確認できる端末があったというだけの理由ですので、他の数字でも問題ありません。
iPhone6sを基準に進めるなら、
$("html").css("font-size",$("body").width()/37.5);
とするば良いですね。
まぁ、力業感ありますが、最初に作っちゃえば後は楽なのでおすすめです。
レスポンシブデザインというと、まぁ、普通はメディアクエリで画面の横幅基準でブレイクポイントを作り、設定を切り替えるという方法をとるでしょう。
bootstrapもこれですね。
とある仕事で、もうちょっとアプリ的に対応したいという場合がありまして。
つまり、メディアクエリで対応するレスポンシブの場合、ブレイクポイント同士の間は同じCSS設定が反映されるため、全体の見た目が一定ではないのですね。
例えば、横幅320px～374pxで文字サイズを12pxに指定した場合、一行に入る文字数は320pxの場合と360pxの場合では異なります。
その分、行数が減る箇所もあれば、それによってやや余白が出ることもあるでしょう。
そうじゃ無くて、どんな画面サイズでも、（ほぼ）常に一定のレイアウトにしたい、というのがその時の要望。
例えば画像を横幅100%で表示するとすると、その画像はどんなサイズの端末で見ても横一杯に広がって見えます。
横幅に対する画像の中の（画像化された）文字の比率も一緒です。
こういうことを画像じゃなくてテキストでもやりたいと。
で、考えた方法は２種類あります。
（１）cssのvwという単位を使う
（２）jQueryで横幅から基本のサイズを割り出し、全体をそれに対する比率で設定する
■（１）について
単位というとpxとか%とかemとかいろいろあります。
cssで数値を%で指定した場合、ボックスの幅なんかは、親要素に対する割合になります。
しかし、文字のサイズ（font-size）を%で設定した場合、親要素のfont-sizeに対する割合になるのですね。
例えば画面の横幅320pxに対して、1行に10文字入れたい場合、文字は32pxにすれば良いのですが、これをfont-size:10%とは書けないのですね。
そこで新しく登場したのがvwという単位。
上記の例で言うと、font-size:10vmと書くことができるのです。
vwは、画面の横幅に対する比率を設定することができる単位で、1vwは「画面の横幅に対する1%」です。
おお、すげー！便利！
と思ったんだけど、落とし穴が。
vwのブラウザ対応を調べると、Android4.3、4.2の標準ブラウザで非対応とあります。
あとOpera Mini。
http://caniuse.com/#search=vw
切り捨てても良くない？と個人的には思うんですけど、依頼時に対応が必要な環境として指定されているとどうしようもない。
■（２）について
そこで考え出したのがこの（２）の方法
力業だけど、そんなに複雑ではないです。
例えば、320pxの横幅を基本にすると決めます。（基準は何でも良いけど、計算しやすいので）
で、以下のようにします。
（ａ）jQueryで横幅を取得し、それを32で割った値をhtmlのfont-sizeに設定する。
画面が320pxの場合、htmlにfont-size:10pxがセットされます。
$("html").css("font-size",$("body").width()/32);
（ｂ）文字サイズ、ボックスのサイズ、余白、線の太さ、あらゆるサイズの単位をremで指定する。
remはhtmlに指定されたfont-sizeを基準とした単位です。
画面が320pxの場合、htmlにfont-size:10pxがセットされ、1remも10pxになります。
つまり、32rem=100%=320pxということですね。
画面のサイズが異なる端末で表示したときは、jQueryで設定される基準値が変わりますが、全体的な比率は維持されます。
例えば画面の横幅が375pxだったとしても、
32rem=100%=375pxです。
あとは320pxの画面を基本にデザインしていくだけ。
簡単です。
10px相当の文字を出したいときは、1rem。
マージンを5px相当取りたい場合は、0.5rem。
ちなみにここで320pxの画面を基準にしたのは数字が比較的きれいなのと、自分の手元に確認できる端末があったというだけの理由ですので、他の数字でも問題ありません。
iPhone6sを基準に進めるなら、
$("html").css("font-size",$("body").width()/37.5);
とするば良いですね。
まぁ、力業感ありますが、最初に作っちゃえば後は楽なのでおすすめです。
コメント