f:id:s_kadota:20161004131058p:plain

こんにちは、まちいろの門田です。

昨今ではスマートフォンを利用される方は当たり前のように世の中に溢れているわけですが
それに伴ってWEBサイトもスマホユーザー向けのサイト、
むしろ閲覧されるデバイスがスマホが基本となっているサイトも多く見られるようになってきました。

今後もPC、スマホ両方での閲覧を考慮されたWEBサイト開発が主流となってきます。そこで今回はそんな複数の画面サイズに対応した「レスポンシブデザイン」を作成する上で知っておきたいCSSの読み込み設定を記したいと思います。
（自分用の備忘録でもあります。）

１　画面幅の違いで読み込むCSSを選り分ける。

f:id:s_kadota:20161004131048p:plain

一番簡単、というわけではないですがおそらく一番直感的に書ける手段かと思います。
また画面幅読み込みにも二通りございます。

css側で範囲を指定する。
html側で範囲を指定する。

CSS側で範囲を指定する。

css内で適用する画面幅の最大あるいは最小のサイズをメディアクエリで指定して（または同時）、その範囲内で書かれたcssはその指定幅の時のみ有効となる方法です。
cssを分けずに管理したい場合などに有用です。

@media screen and (max-width: 768px) {
  h1{
    font-size:15px;
    color:#333333;
  }
}

上記のものは「画面幅最大768px」まで適用されるcssになります。ですので769px以上の画面では適用されません。

@media screen and (min-width: 768px) {
  h1{
    font-size:20px;
    color:#000000;
  }
}

逆に上記のものは「画面幅最小768px」まで適用されるcssになります。 767px以下の画面では適用されません。

@media screen and (min-width: 768px)　and (max-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

そして上記のものは最小値と最大値の同時指定になり、「画面幅768px〜1000px」のみ適用されるcssとなります。
タブレット用のサイト構成、あるいは500px〜800pxなどのPCとスマホの中間にあたる画面幅内でのデザインを設計する際には利用されるシーンが多いかもしれません。
また、逆の指定方法は

@media screen and (max-width: 768px),screen and (min-width: 1000px) {
  h1{
    font-size:18px;
    color:#ff9922;
  }
}

上記のようにカンマ区切りで指定すると「画面幅768px以下、あるいは画面幅1000px以上」というように指定することができます。あまり使うケースはないかもしれませんが、特定の範囲内のみcssを適用させたくない際などに有用かと思われます。

HTML側で範囲を指定する。

html側でcssを読み込む際linkタグでcssを読み込みますがその際に画面幅で読み込むcssファイルを指定します。
cssファイル自体を画面幅ごとに管理している場合はこちらが有用です。
ファイル内でのメディアクエリ内への入れ忘れや、その範囲を探しに行くことなどを考えるとこちらの方が私的には好きな管理方法です。

<link rel="stylesheet" href="style_pc.css" type="text/css" media="screen and (min-width: 768px)">

上記の様にlinkタグ内でメディア属性を指定し、範囲を記述してあげれば完了です。
「画面幅768px以上」の時のみ、style_pc.cssが読み込まれるようになります。

<link rel="stylesheet" href="style_tab_sp.css" type="text/css" media="screen and (max-width: 767px)">

上記のものは「画面幅767px以下」の時に、style_tab_sp.cssが読み込まれるようになります。
また、こちらもandやカンマを使えばcss側同様に同時指定ができます。

２、デバイスの違いで、読み込むCSSを選り分ける。

f:id:s_kadota:20161004131052p:plain

画面幅ではなく、閲覧している端末をjavascriptで判定して読み込むcssを切り替える方法になります。
スマートフォンと一括りに言っても、多種多様な画面幅があるため最新機種が出るたびに画面幅調整に走るよりかは端末を判定してしまったほうが容易かもしれません。

もちろん、先ほども言ったように画面幅が多くあるためその分スマホ全てが同一のデザインでは一部機種では見難い形になってしまうケースもあると思われますので画面幅で選り分けるか、デバイスで選り分けるかは作成されるレスポンシブデザインを鑑みて実装されるのが一番でしょう。

デバイス情報の取得

javascriptでデバイス情報は

navigator.userAgent

で取得することができます。

navigator.userAgent.indexOf('iPhone')

この様に指定すると、navigator.userAgentで取得した情報内に
iPhoneがあった場合その「発見位置」を返してくれます。（1以上）
逆にiPhoneがnavigator.userAgentにはない場合は「-1」が返ってきます。
ですのであとはif文を用いて条件分岐を作成すればデバイスごとのcss読み込みを記述することができます。
iPhone同様にiPad、iPod、Androidを指定できます。

var iphone_flag = navigator.userAgent.indexOf('iPhone');
var ipad_flag = navigator.userAgent.indexOf('iPad');
var ipod_flag = navigator.userAgent.indexOf('iPod');
var android_flag = navigator.userAgent.indexOf('Android');

if(iphone_flag > 0){ 　//発見されない場合-1が返ってくるので0以上で指定する。
  <link rel="stylesheet" href="style_iphone.css" type="text/css">　//iphone用のcss
}else if(ipad_flag > 0){
  <link rel="stylesheet" href="style_ipad.css" type="text/css">　//ipad用のcss
}else if(ipod_flag > 0){
  <link rel="stylesheet" href="style_ipod.css" type="text/css">　//ipod用のcss
}else if(android_flag > 0){
  <link rel="stylesheet" href="style_android.css" type="text/css">　//android用のcss
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css">　//それ以外の際に読み込むcss
}

また条件分岐の中でも

f(iphone_flag > 0){
  <link rel="stylesheet" href="style_iphone_min.css" type="text/css" media="screen and (min-width: 320px) and  (max-width: 400px)">
  <link rel="stylesheet" href="style_iphone_max.css" type="text/css" media="screen and (min-width: 401px)">
}else{
  <link rel="stylesheet" href="style_pc.css" type="text/css">
}

を用いて画面幅指定をすればより詳細なcssの設定をすることができます。

HTML側でのviewport指定

レスポンシブデザインにおいて上記の画面幅やデバイス読み取り設定の他に、
忘れてはいけないことがmetaタグでのviewport指定になります。

これを指定しないで実装すると、画面幅を指定しているにも関わらずスマホで表示した際などに
こちらが想定したデザインとは違うサイズなどで表示されてしまったりします。（画像サイズやフォントサイズなど）
それらはサイト自体の表示幅の設定を施していないために起きてしまう現象です。

<meta name="viewport" content="width=device-width,initial-scale=1">

上記のmetaタグをhtmlのhead内に記述すれば画面幅に準じて、サイズなどが調整されるようになります。

content内のwidthで表示幅を指定します。
device-widthを指定してあげることで表示しているウインドウ幅がデバイスのサイズに基づきます。

<meta name="viewport" content="width=320px,initial-scale=1">

数値を指定してあげればどのデバイスでアクセスしてもそのサイズ幅を基準として表示されます。

しかしメディアクエリを使用している場合はviewportでのwidth指定で特定の数値を設定すると
スマホ側での表示がおかしくなってしまう場合があります。
（サイト表示時、やたらと大きくズームされて表示されたり）

ですのでメディアクエリ使用時には「width=device-width」を指定してあげるのがベストです。

initial-scaleは拡大率となります。基本的に1を指定するのが無難です。
他にもあまり使用されるケースはないかもしれませんが拡大の最大最小率や拡大の許可なども合わせて指定できます。

より掘り下げて調べてていただければもっと詳細な設定がいくつも出てきますが
「とにかくレスポンシブデザインを作ったので、読み込ませたい」という方は下記metaタグをheadに貼りましょう。

<meta name="viewport" content="width=device-width,initial-scale=1">

他の実装方法など

これらを用いないでもWordPressであればデバイス切り替えのプラグインなどもありますし、
Rubyで構成されたサイトでもデバイス切り替えのgem(便利機能のライブラリ)などがあり
cssに限らずコードの出し分けをする手段は様々です。

案件の仕様によって、後々の編集が容易な柔軟性の高い形で実装するのが一番望ましいでしょう。