Webアプリ開発者必見!レスポンシブデザインで押さえておきたいポイント3選 | 千葉で集客ホームページ制作はティーエスフォート
コラム

Webアプリ開発者必見!レスポンシブデザインで押さえておきたいポイント3選

Webアプリ開発者必見!レスポンシブデザインで押さえておきたいポイント3選

今や、レスポンシブデザインに対応するのは当たり前になってきつつあります。

そこで今回の記事では、スマホやパソコンのブラウザなど、複数のデバイスでの表示に対応したデザイン、レスポンシブデザインを行う上でのポイントをご紹介します。

1.Viewportの指定

viewportとは一言で表現すると「表示領域」のことです。スマホでもパソコンでも、ディスプレイ上には画像や写真、映像を表示する領域があります。そのイメージです。

viewportを設定していないパソコン向けのページをスマホで表示すると、文字もページも小さくなってしまいます。viewportの概念は、パソコンだけの環境では意識する必要はあまりありませんでした。ですが、今はパソコンよりスマホ、タブレットの使用頻度が高くなっているため、どのデバイスでも見やすくするためにそれぞれのデバイスでの表示に差異がなるべくがないように指定する必要が出てきました。

これがレスポンシブデザインが注目されるようになった背景としてあります。

viewportはHTMLの中にmetaタグとして指定し、content属性で表示領域を指定します。

よく使うのは、以下の画像拡大ができる、できない、の2パターンです。

1.画面拡大できないようにする場合
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">


2.画面拡大ができるようにする場合
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=yes">

2.メディアクエリの活用

メディアクエリではブレークポイントと呼ばれる分岐点を設定し、ブレークポイントを境目にしてCSSを変化させます。

ブレークポイントの記述方法は、パソコン向けサイトを基準に考える「PCファースト方式」とスマホ向けサイトを基準に考える「モバイルファースト方式」の2パターンがあります。

PCファーストの例
/* デフォルト:980px以上用(PC用)の記述 */
@media screen and (max-width: 979px) {
/* 979px以下用(タブレット用)の記述 */
}
@media screen and (max-width: 767px) {
/* 767px以下用(タブレット/スマートフォン用)の記述 */
}
@media screen and (max-width: 479px) {
/* 479px以下用(スマートフォン用)の記述 */
}


このように、ディスプレイサイズをもとにメディアクエリを用いて切り替えることが可能になるのです。

3.レスポンシブでの画像切り替え方法

デバイスに応じて、表示する画像を切り替えたいときがあります。

そのためには、imgタグのsrcset属性を使う方法と、メディアクエリでimgタグの表示・非表示を切り替える方法とがあります。

srcset属性を指定
画面サイズごとに使用する画像ファイルをsrcset属性で指定します。srcset属性で、メディアクエリと同じような切り替えができます。
<img srcset="image-sp.jpg 480w, image-tablet.jpg 640w, image-pc 960w">


img要素の表示・非表示を切り替え
imgタグを複数記述し、使用するimgタグをdisplayプロパティで切り替えるという方法です。
<img class="mobile" src="image-sp.jpg">
<img class="pc" src="image-pc.jpg">


CSSでは以下のようにメディアクエリでdisplay: noneを指定するルールを記載しておきます。
@media screen and (min-width: 481px) {
.mobile {
display: none;
}
}
@media screen and (max-width: 480px) {
.pc {
display: none;
}
}

まとめ

今回のコラムでは、レスポンシブデザインに対応するにあたって、押さえておくべきポイントを3つご紹介しました。基本を押さえておくことによって、対応デバイスが増えた時にでも対応できるようになるでしょう。

①Viewport
Viewportを活用することによって、表示領域を設定することができます。

②メディアクエリ
ブレークポイントを活用することで、パソコン向け、スマホ向けにCSSを切り替えることができます。

③画像切り替え方法
デバイスに応じて画像を切り替えるにあたり、imgタグのsrcset属性を使う方法と、メディアクエリでimgタグの表示・非表示を切り替える方法があります。

関連記事

ページ先頭へ