宮崎のWEB制作アドエス

レスポンシブなホームページ制作の基礎的なところ

2015.10.13

まずviewportの設定

 

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

 

width=device-widthは、幅は見てる人の機種の幅に合わせてねという意味。
initial-scale=1.0は、初期のサイズ(倍率)は拡大縮小なしの状態(100%)ねという意味。初期のサイズなので見てる人は指で任意に拡大できます(スマホだとお馴染みですよね)

 

<meta name="format-detection" content="telephone=no">

 

ご存知の方も多いと思いますが、スマホだと何も設定していないのに電話番号を自動で認識してリンクにしてくれたりしますよね。ただこれ、電話番号じゃなくても数字とハイフンがあると勝手に電話番号と誤解されてしまってオイオイとかコラコラとか余計ナコトスルナとか思いがちですよね。それを防ぐために最初に注意書きしておくんです。電話番号と思っても勝手にリンクとかにしないでねと。

 

 

次にstylesheetの設定

 

<link rel="stylesheet" type="text/css" href="style.css">

 

これはいつものリンクです。
意味はスタイルシートはと同じ階層にあるstyle.cssを読み込んでねという意味。

 

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" media="screen and (max-width: 768px) and (min-width: 641px)" type="text/css" href="css/tablet.css">
<link rel="stylesheet" media="screen and (max-width: 640px)" type="text/css" href="css/smart.css">

 

今回はこうですね。
意味は最初にstyle.cssを読み込ませます。それからデヴァイスの幅が769px以上なら何もしなくていいよと。768pxから641pxまでの場合はtablet.cssも読み込んでねと。640px以下の時はsmart.cssを読み込んでねという意味です。
もうおわかりですね。

 

  • ・PC(幅769px以上)の場合はstyle.css
  • ・タブレット(幅641px〜768pxの間)の場合はstyle.css+tablet.css
  • ・スマホ(幅640px以下)の場合はstyle.css+smart.css

 

が適応されます。

 

ちなみに順番が大事なんですよ。
最初にstyle.cssを読み込んで、その下に各追加cssを読み込むのはもちろん”下に書いたcssが優先適応される”からですね。

 

わかりやすく例としてヘッダーを考えてみましょう。

 

  • PC時:画面横幅いっぱいに表示、高さは100pxで背景色は赤
  • タブレット時:画面横幅いっぱいで高さは150px、背景色は青に変えたい
  • スマホ時:ヘッダーをなくしたい

 

res-head

うわ〜

テキトーな図ですみません。(でもきっと無いよりいいはず)

こんなヘッダーを作りたいとします。

 

htmlは分かりやすくこんなのにします。

<div id="header"></div>

まずはstyle.cssに769px〜スタイルを書きます。

#header {
     width: 100%;
     height: 100px;
     background-color: red;
}

 

これでPC用のスタイルができました。
続いてタブレット時のスタイルをtablet.cssに書きます。

#header {
     width: 100%;
     height: 150px;
     background-color: blue;
}

 

ここで注意なのがwidthです。
タブレットになってもPC時と同じ条件(100%)です。
なのでわざわざ上書きする必要はありませんよね。
つまり今回書き込むのはこうです。

#header {
     height: 150px;
     background-color: blue;
}

 

さらに!
スマホになるとヘッダーを無くしたいので、smart.cssにはこう書きます。

#header {
     display: none;
}

 

いかがでしょうか。
方法は他にもいくつかあって、1つのcssにメディアクエリで条件ごとのスタイルを書いたりなどもありますが、管理面から考えるとCSSごと分けるのが楽かなーと個人的にはそう思います。

 

また、順番をスマホから順に作る方法もあります。基本的にスマホのスタイルが簡単でPCになると複雑化することが多いのでその方がいいと言う方もいらっしゃいます。

 

それもうなずけるのですが、古いブラウザがメディアクエリに対応していないことを考えると、古いブラウザのPCはPC用をデフォルトにしておいて、タブレットやスマホ(新しいブラウザ)はメディアクエリで追加スタイルを読み込む。というスタイルの方が対応ブラウザの面で良いのかな〜と考えています。そうしないと古いブラウザのPCではスマホのスタイルになっちゃいますからね!

 

もちろんjsで回避もできます。jQueryのプラグインを使用するときなどはプラグインがスマホを基準にCSSを作っている場合が多いですよね。そんな時はrespond.jsなどを使って古いブラウザでもメディアクエリが使えるようにするといいですよ。