レスポンシブ対応とは
近年、スマートフォンの普及によって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は初期表示する際の拡大率を示します
ほかにも" user-scalable=no "で
ピンチ操作を不可能にするオプションなどもあります。
CSSのmedia query
次に、CSSでレスポンシブ対応をする方法です。
この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'”で隠していたのを表示することができます。
これがとても便利でパソコンだと長い文章を表示できるけど、
スマホだと見にくい。なんてときに切り替えることができるんです！
まとめ
今回はHTML/CSSにおけるレスポンシブ対応についてまとめてみました。
近年では、スマートフォンやタブレットの普及によりWebページもパソコンだけでなく、
スマホやタブレットといった実に幅広いさまざまなデバイスで閲覧されるようになってきました。
そのためデバイスでもきれいにレイアウトされ見やすく表示させるために、必要不可欠なものですので、ぜひ習得してください！
最近のWebページの作成の仕事の案件もだいたいレスポンシブ対応がもとめられることが増えてきていますね。
がんばって覚えます！
レスポンシブ対応はHTML/CSSでするしかないんですか？
ほかの方法だと"java script"を使う方法などがありますね♪
~はじめてのCSS~ HTMLに紐づけてみよう！