最近フロント寄りのプロジェクトを行うことが多くなり画面サイズ最適化、
いわゆるレスポンジブデザインについて調べることが多くなったので、どんな方法があってどう使えば良いのか整理したくなったのでまとめたいと思います。ほぼほぼメモ。
レスポンシブデザインに対応するには主に、
・HTMLのviewport
・CSSのmedia query
・Bootstrap
・JavaScript ほぼjQuery
その他にも色んな方法があるかと思うのですが、代表的なものはこんな感じだと思います。
上から簡単な例とともに見ていきたいと思います。
・HTMLのviewport
viewportというhtmlの機能を使ってスマホに対応させる方法。
hoge.css
こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。
width=device-widthこの記述でスクリーンサイズに合わせてねってことになり、
例えば、width=width=500とすると画面幅500px用の表示になります。
initial-scale=1.0は初期表示する際の拡大率。
他にもオプションがあり、
user-scalable=no でピンチ操作を不可能にするオプションがあります。
・CSSのmedia query
cssで対応する方法。お手軽に使えて結構使う機会が多い。
hoge.html
少し紛らわしいところですが、
max-width 画面幅が500px以下はsp.cssを読み込み、
min-width 画面幅が1000px以上はpc.cssが読み込まれるという感じ。
これは余り使ったことがなくて、よく使うのは下記ような方法
hoge.css
@media screen and (min-width: 499px) {
/* 画面サイズ 499pxから適用 */
.content {color: #red;}
}
@media screen and (min-width: 500px) and (max-width: 999px) {
/* 画面サイズ 500pxから999pxまで適用 */
.content {color: #green;}
}
@media screen and (min-width:1000px) {
/* 画面サイズ 1000px以上から適用 */
.content {color: #blue;}
}
こんな感じで切り替えたい画面幅で、好きなようにスタイルを適応させれるのが便利ですね。
・Bootstrap
おなじみの便利フレームワーク。twitter社が生みの親のフレームワークでHTMLのclassに指定の記述をするだけで、レスポンシブ出来てしまう優れもの。
できることが結構あるのですが、代表的な機能はグリッドシステムで、
指定方法 適用画面サイズ
col-lg-num 1024以上
col-md-num 992px以上、1200px未満
col-sm-num 768px以上、992px未満
col-xs-num 768px以下
表のサイズ定義で横幅を12分割し、コンテンツ幅をコントロールできる。
hoge.html
分割のみならず、class=’hidden-xs’でスマホサイズで非表示に、
逆にclass=’visible-xs’で隠していたのを表示することができる。
これがなかなか便利でpcだと長い文言を表示できるけど、スマホだと見づらいなんてときに切り替えができる。
例えば、タブのテキストが長くスマホだと２行になって見栄えが悪くなるときも、
そこをhidden-xsで消してしまえる。
まとめ
上記以外の方法では、jsで動的にサイズを変更するなどですかね。
モーダルの表示位置を中央にしたいときとかに使えますね。
あとは、そもそもそのデバイス専用サイト作って振り分けるなどの方法があるのですが、
あまり今後も使う機会がなさそうなので、省きます。