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に紐づけてみよう!


    最近の投稿

    レバテックキャリアは未経験でも転職できるのか?リアルな口コミで検証します

    IT特化型転職エージェントの「レバテックキャリア 」は未経験でも転職することができるのか?について実際に利用した方のクチコミを元に調査しました。

    レバテックキャリアの悪い評判は本当なのか?利用者から聞く実態と噂の真偽

    【2020年10月更新】IT系の転職エージェントで有名な「レバテックキャリア」ですが、なぜ悪い評判や悪い口コミが多いのか?その理由について説明します。また、是非登録すべき他の転職エージェントもご紹介していますので、参考にしてみてください。

    その会社は大丈夫?知っておきたいブラック企業の特徴

    就職先がブラック企業ではないか不安… 転職を考えているけど、ブラックな会社だったらどうしよう… こういった悩みや不安を抱えている方も多くいると思います。 就職や転職をした際に「この会社、ブラックだった ...

    【2020年最新保存版】副業と複業の違いやそれぞれの意味について徹底解説!

    こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 今、話題になっている「テレワーク」という働き方を利用して「 ...

    テレワークのセキュリティーについて、注意と対策方法とは!?

    こんにちは、リバティエンジニア[?]のFUNAです。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 テレワークを始められる方にとって、気をつけなければいけない ...

    Copyright© FUNA BLOG , 2020 All Rights Reserved.