レスポンシブ対応サクッとまとめ #JavaScript

最近フロント寄りのプロジェクトを行うことが多くなり画面サイズ最適化、
いわゆるレスポンジブデザインについて調べることが多くなり、どんな方法があってどう使えば良いのか整理したくなったので、まとめたいと思います。

レスポンシブデザインに対応するには主に
・HTMLのviewport
・CSSのmedia query
・Bootstrap
・JavaScript ほぼjQuery

その他にも色んな方法があるかと思うのですが、代表的なものはこんな感じだと思います。
上から簡単な例とともに見ていきたいと思います。

・HTMLのviewport

viewportというhtmlの機能を使ってスマホに対応させる方法。

hoge.css

<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
  <div>
    コンテンツ
  </div>
</body>
</html>

こんな感じでmetaタグに記述させるだけで、簡単に導入することができます。
width=device-widthこの記述でスクリーンサイズに合わせてねってことになり、
例えば、width=width=500とすると画面幅500px用の表示になります。

initial-scale=1.0は初期表示する際の拡大率。

他にもオプションがあり、
user-scalable=no　でピンチ操作を不可能にするオプションがあります。

・CSSのmedia query

cssで対応する方法。お手軽に使えて結構使う機会が多い。

hoge.html

  <link rel="stylesheet" href="sp.css" media="screen and (max-width: 500px)">
  <link rel="stylesheet" href="pc.css" media="screen and (min-width: 1000px)">

少し紛らわしいところですが、
max-width 画面幅が500px以下はsp.cssを読み込み、
min-width 画面幅が1000px以上はpc.cssが読み込まれるという感じ。
これは余り使ったことがなくて、よく使うのは下記ような方法

hoge.css

  @media screen and (max-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

  <div class="container">
    <div class="row">
      <div class="col-xs-4 col-md-5"></div>
      <div class="col-xs-8 col-md-5"></div>
      <div class="hidden-xs col-md-2"></div>
    </div>
  </div>

分割のみならず、class='hidden-xs'でスマホサイズで非表示に、
逆にclass='visible-xs'で隠していたのを表示することができる。

これがなかなか便利でpcだと長い文言を表示できるけど、スマホだと見づらいなんてときに切り替えができる。

<div id="tabbody">
   <div id="tab1"><span class='hidden-xs'>お客様の</span>基本情報</div>
   <div id="tab2">観覧履歴</div>
</div>

例えば、タブのテキストが長くスマホだと２行になって見栄えが悪くなるときも、
そこをhidden-xsで消してしまえる。

まとめ

上記以外の方法では、jsで動的にサイズを変更するなどですかね。
モーダルの表示位置を中央にしたいときとかに使えますね。

あとは、そもそもそのデバイス専用サイト作って振り分けるなどの方法があるのですが、
あまり今後も使う機会がなさそうなので、省きます。

またフレッシュな方法があれば、追記していきたいと思いまっす！