[HTML/CSS]これだけ覚えて！超簡単レスポンシブ対応

レスポンシブ対応とは
レスポンシブ対応の種類
まとめ

レスポンシブ対応とは

近年、スマートフォンの普及によってWebページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきています。

そんな時に今までパソコンでの表示を前提としたWebページをそのまま使っていてもいいのか？
答えは、NO！です。
今までパソコンではきれいにバランスよく表示されていたものがスマホやタブレットなど画面サイズが異なるデバイスで表示したときに、レイアウトがぐちゃぐちゃになってしまうのです。

そこで必要なのが、「レスポンシブ対応」と呼ばれるものです。
要は、レスポンシブ(どんな要望にも応える！)と思っていてくれればOKです。
たとえ画面サイズが変わっても、表示を崩さずにきれいに表示してくれます。

レスポンシブ対応の種類

一言で”レスポンシブ対応”といってもやり方はいろいろあります。
今回はその中でも代表的な、

HTMLのviewport
CSSのmedia query
Bootstrap

の３つについて紹介しますね。

HTMLのviewport

まずはこちら。HTMLのviewportという機能を使ってスマホなどに対応する方法です。
早速サンプルコードを見てみましょう

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

このように、HTMLのmetaタグに記述するだけで簡単にレスポンシブ対応することができます。
ちょっと説明すると、

width=device-widthこの記述でスクリーンサイズに合わせます
initial-scale=1.0は初期表示する際の拡大率を示します

IT博士

ほかにも” user-scalable=no “で
ピンチ操作を不可能にするオプションなどもあります。

CSSのmedia query

次に、CSSでレスポンシブ対応をする方法です。

IT博士

この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社が生みの親の便利フレームワークである”Bootstrap”の紹介です。
フレームワークでHTMLのclass要素に指定の記述を入れるだけで、レスポンシブ対応出来てしまうかなりの優れモノなんです。

できることは結構あるのですが、
代表的なものは、グリッドシステムというもので、

指定方法	適応画面サイズ
col-lg-num	1024以上
col-md-num	992px以上、1200px未満
col-sm-num	768px以上、992px未満
col-xs-num	768px以下

この表のようなサイズ定義で横幅を１２分割して、コンテンツの幅をそれぞれコントロールできます。

<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’”で隠していたのを表示することができます。

IT博士

これがとても便利でパソコンだと長い文章を表示できるけど、
スマホだと見にくい。なんてときに切り替えることができるんです！