HTML/CSS

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

レスポンシブ対応とは

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

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

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

レスポンシブ対応の種類

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

  • HTMLのviewport
  • CSSのmedia query
  • Bootstrap

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

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博士
IT博士

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

    CSSのmedia query

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

    IT博士
    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-num1024以上
    col-md-num992px以上、1200px未満
    col-sm-num768px以上、992px未満
    col-xs-num768px以下

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

    <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博士
    IT博士

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

    まとめ

    今回はHTML/CSSにおけるレスポンシブ対応についてまとめてみました。


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

    そのためデバイスでもきれいにレイアウトされ見やすく表示させるために、必要不可欠なものですので、ぜひ習得してください!

    IT博士
    IT博士

    最近のWebページの作成の仕事の案件もだいたいレスポンシブ対応がもとめられることが増えてきていますね。

    がんばって覚えます!

    レスポンシブ対応はHTML/CSSでするしかないんですか?

    IT博士
    IT博士

    ほかの方法だと"java script"を使う方法などがありますね♪

    ~はじめてのCSS~ HTMLに紐づけてみよう!


    Copyright© FUNA BLOG , 2020 All Rights Reserved.