スマホの普及とともに、今や常識となったレスポンシブwebデザイン。
パソコンやタブレット、スマホと、異なるデバイスでも見やすいページを表示させるべく、基本をおさえて一挙両得なウェブサイトを作ってみよう。
レスポンシブwebデザインとは？
閲覧者の画面サイズまたはウェブブラウザに応じて、最適化されたウェブページを表示することを目的としたウェブデザイン手法のこと。
PCでは見やすいけど、スマホで見ると小さい…とか、逆にスマホで見やすいけど、PCで見るとでかすぎる…、などといった現象をそれぞれ最適化して、同じページでも端末を選ばずに見やすくすることを目指している。
そもそもPCの画面が横長なのに対し、タブレットやスマホは縦長が基本。
同じ造りでは見づらくなるのは当然と言える。
スマホの出初めはPC用サイトとスマホ用サイトの２種類用意することが主流だった。
同じ内容でも２つサイトがある状態なので、更新の際はPC用とスマホ用の２箇所を修正する必要があり、これがなかなか手間だった。
そこで、全く同じ内容を見る環境によって見やすく変化させるレスポンシブwebデザインが登場するという訳だ。
さらにスマホが普及して、アクセス数でもスマホが優位になると、それまでPC版を先に組み立てて、後からスマホのレイアウトを当て込んでいく流れも逆になり、スマホファーストでデザインすることが今や当たり前となった。
簡単な図にすると以下のような感じ。
CSSで最適化
簡単に言うと、共通のHTMLにPC用、スマホ用、時にはタブレット用のCSSを用意して、それぞれの「見た目」を変えていく。
メディアクエリ
CSSによって、表示された画面環境に応じて適用するスタイルを切り替える機能がメディアクエリだ。
色々なパターンが考えられるが、まずは一番シンプルなのが以下のような２種。
@media screen and (min-width: 751px) {
body{width: 1000px}
}
@media screen and (max-width : 750px) {
body{width: 100%}
}
上は、画面幅が751px以上に適用＝PC表示用
下は、画面幅が750px以下に適用＝スマホ表示用
中身を見ると、PCにはbodyの幅が1000pxが適用されて、スマホには幅100%が適用されることになる。
JavaScriptで切り替える方法も
メディアクエリは、デバイスのサイズによって適用されるCSSを振り分けるのに対し、JavaScriptを使えば、ユーザーエージェントによって読み込むCSSファイルを指定することも可能。
つまり、PCで見るとpc.cssが適用されて、スマホで見るとsmartphone.css、タブレットで見るとtablet.cssと、見る環境によって別々のCSSファイルを読み込むことができる。
例えば、下記の例だとiPhoneやiPad、Android端末からのアクセスの場合はsmartphone.cssを読み込み、それ以外の場合はpc.cssを読み込むことになる。
<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
document.write('<link rel="stylesheet" type="text/css" href="smartphone.css">');
}else {
document.write('<link rel="stylesheet" type="text/css" href="pc.css">');
}
</script>
また、同様のことはPHPで切り替えも可能だが今回はここまでにする。
viewportも忘れずに
viewportとは「表示領域」を意味し、アクセスしてきた各種デバイスの横幅などを指定することができる。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
HTMLの
部分に上記のコードを入れるとデバイスごとに最適化されて見やすく表示される。せっかく、レスポンシブwebデザインで作成してもこの指定を忘れると意図した表示にならないのでご注意を。
