【HTML/CSS】超簡単にレスポンシブでスマホ対応をする方法【コピペOK】

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回は、HTML/CSSで行うレスポンシブ対応（スマホ対応）について、使い方や種類についてご紹介します。

レスポンシブ対応（スマホ対応）とは

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

そんな時に今までパソコンでの表示を前提としたWebページをそのまま使っていてもいいのか？
答えは、NO！です。

今までパソコンでは綺麗にバランスよく表示されていたものが、スマホやタブレットなど画面サイズが異なるデバイスで表示した時に、レイアウトがぐちゃぐちゃになってしまうのです。

そこで必要なのが、「レスポンシブ対応（スマホ対応）」と呼ばれるものです。

レスポンシブ(どんな要望にも応える！)と思っていてくれればOKです。

たとえ画面サイズが変わっても、表示を崩さずにきれいに表示してくれます。

レスポンシブ対応（スマホ対応）の種類

一言で「レスポンシブ対応（スマホ対応）」といってもやり方はいろいろあります。

今回はその中でも代表的な、

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

HTMLのヴューポート（viewport）を使った方法

まずはこちら。HTMLのviewportという機能を使ってスマホなどに対応する方法です。

早速サンプルコードを見てみましょう

See the Pen viewport by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

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

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

CSSのメディアクエリ（media query）を使った方法

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

この方法が一番使い勝手が良いので私もよく使っています。

サンプルコードを見ていきましょう。

See the Pen Media queries by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

このように、画面サイズを定めてそれぞれで好きなようにスタイルを変更できます。

この方法だと、デザインの幅も広がりますね。

Bootstrapを使った方法

では最後に、twitter社が生みの親の便利フレームワークである「Bootstrap」の紹介です。

フレームワークでHTMLのclass要素に指定の記述を入れるだけで、レスポンシブ対応出来てしまうかなりの優れモノなんです。

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

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

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

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

【HTML/CSS】レスポンシブ対応（スマホ対応）まとめ

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

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

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

 最近の案件ではレスポンシブ対応はほぼ必須です。

レスポンシブ対応（スマホ対応）は他の方法だと「JavaScript」を使う方法などがあるので、また今度ご紹介していきます。

HTML/CSSカテゴリの関連記事