こんにちは、リバティエンジニアのFUNA(フナ)です。
現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。
この記事はこんな方におすすめ
- HTML/CSSで簡単にレスポンシブ対応(スマホ対応)したい
- コピペでレスポンシブ対応(スマホ対応)したい
今回は、HTML/CSSで行うレスポンシブ対応(スマホ対応)について、使い方や種類についてご紹介します。
目次
レスポンシブ対応(スマホ対応)とは
近年、スマートフォンの普及によってWebページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきています。
そんな時に今までパソコンでの表示を前提としたWebページをそのまま使っていてもいいのか?
答えは、NO!です。
今までパソコンでは綺麗にバランスよく表示されていたものが、スマホやタブレットなど画面サイズが異なるデバイスで表示した時に、レイアウトがぐちゃぐちゃになってしまうのです。
そこで必要なのが、「レスポンシブ対応(スマホ対応)」と呼ばれるものです。
レスポンシブ(どんな要望にも応える!)と思っていてくれればOKです。
たとえ画面サイズが変わっても、表示を崩さずにきれいに表示してくれます。
レスポンシブ対応(スマホ対応)の種類
一言で「レスポンシブ対応(スマホ対応)」といってもやり方はいろいろあります。
今回はその中でも代表的な、
- HTMLのviewport
- CSSのmedia query
- Bootstrap
この3つについて紹介しますね。
HTMLのヴューポート(viewport)を使った方法
まずはこちら。HTMLのviewportという機能を使ってスマホなどに対応する方法です。
早速サンプルコードを見てみましょう
See the Pen viewport by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
このように、HTMLのmetaタグに記述するだけで簡単にレスポンシブ対応することができます。
ポイント解説
- width=device-widthこの記述でスクリーンサイズに合わせます
- initial-scale=1.0は初期表示する際の拡大率を示します
他にも「user-scalable=no」でピンチ操作を不可能にする、といったオプションもあります。
CSSのメディアクエリ(media query)を使った方法
次に、CSSでレスポンシブ対応をする方法です。
この方法が一番使い勝手が良いので私もよく使っています。
サンプルコードを見ていきましょう。
See the Pen Media queries by TAKUYA FUNABIKI (@takuya20180216) on CodePen.
このように、画面サイズを定めてそれぞれで好きなようにスタイルを変更できます。
この方法だと、デザインの幅も広がりますね。
Bootstrapを使った方法
では最後に、twitter社が生みの親の便利フレームワークである「Bootstrap」の紹介です。
フレームワークでHTMLのclass要素に指定の記述を入れるだけで、レスポンシブ対応出来てしまうかなりの優れモノなんです。
できることは結構あるのですが、代表的なものは「グリッドシステム」というもので、
指定方法 | 適応画面サイズ |
col-lg-num | 1024以上 |
col-md-num | 992px以上、1200px未満 |
col-sm-num | 768px以上、992px未満 |
col-xs-num | 768px以下 |
この表のようなサイズ定義で横幅を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'」で隠していたのを表示することができますよ。

【HTML/CSS】レスポンシブ対応(スマホ対応)まとめ
今回は、HTML/CSSにおけるレスポンシブ対応(スマホ対応)についてまとめました。
スマートフォンやタブレットの普及で、Webページもパソコンだけでなく、スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきました。
そのためデバイスでもきれいにレイアウトされ見やすく表示させるために、必要不可欠なものですので、ぜひ習得してください!
HTML/CSSカテゴリの関連記事
-
CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】
CSSのみで実装することのできるアニメーションの方法を解説します。サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。
-
【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ!
今回はHTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。設定しても上手く効かない時の対処法も紹介しています。
-
【コピペOK】HTMLにCSSを埋め込み適用させるサンプルをご紹介
HTMLにCSSを埋め込み、適用させる方法についてサンプルコードを元にご紹介します。初心者の方でもわかりやすいようにコピペでも簡単に実装できるようにまとめていますので、どんどん使ってください。
-
【HTML/CSS】コピペでOK!チェックマークを作る簡単な方法
こんにちは、リバティエンジニア[?]のFUNA(フナ)です。 現役エンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。 この記事はこんな方におすすめ HTM ...
-
【2021年最新】HTML/CSSの学習で初心者におすすめしたい本【ベスト5!】
2021年最新版のHTML/CSSの勉強でおすすめの本を紹介します。「HTML/CSS」はとてもメジャーな言語であり、多くの入門書や参考書があります。その中でもおすすめな本を現役エンジニアの私が解説も入れてご紹介しています。
-
【HTML/CSS】 縦・横方向で中央揃え(中央寄せ)してみよう!【コピペOK】
今回はHTML/CSSで要素を縦と横方向で中央揃え(中央寄せ)する方法について、簡単にコピペで実装できるようにいくつかのパターンを紹介していこうと思います。上手く中央寄せできない場合などにぜひ参考にしてください。
-
HTML5のタグを全部まとめて一覧でご紹介!【詳細リンク付き】
今回は、HTML5のHTMLタグをすべて公開し、解説していこうと思います。各タグを詳しく解説するページも順次作っていきますので、できたものからリンクで飛べるようまとめておきます!