昨今ではスマートフォンの所持率? も上がり、
webサイト構築もスマホを前提としたデザインが主流になってますよねぇ。
地味にですが、スマホ表示をそのまま大きくしたようなサイトも増えてますが、
意外と定着してないような……? 主流になるかもと思っていたのですが……
シンプルだけど手が込んでそうなデザインで、嫌いではないのですが……
さて、最近のwebサイト構築の常套手段として、
同一のhtmlでPCにもスマートフォンにも対応させる方法として、
デバイス（ブラウザ）の横幅を取得して、それで表示を変える方法があります。
それがいわゆる『レスポンシブ』というやつです。
んで、今回はその方法をまとめようかなぁと。
Wordpressなんか使ってるとレスポンシブ化されてるテーマも多いですが、
レスポンシブ化されてないものもありますからね。
そういう時にこの方法でレスポンシブ化させるとよいかと思います。
レスポンシブ化の手順はこんな感じ。
- htmlにviewportを設定する
- CSSにmediaqueryを設定する
こんな感じ。では一つ一つ見ていきますか。
1.htmlにviewportを設定する
viewportてのは、表示領域の設定だそうです。
この辺、実はよく分かってません(；・∀・)
ですが、この設定をしてあげると、
ブラウザの横幅に対応したCSSを読み込むことが出来るようになります。
色々と細かい設定もあるのですが……とりあえずすぐに設定出来るのはこんな感じ。
以下のコードをhtmlのheadの中に記述します。
<meta name="viewport" content="width=device-width,initial-scale=1" />
このコードを書いてあげると、
『表示領域はデバイスの横幅に合わせるよ』
『読み込んだ時のズームは1倍だよ』
という設定が出来ます。
WordPressでのテーマに適応させる場合は、
header.phpのhead内に記述すればいいかなと。
2.CSSにmediaqueryを設定する
『mediaquery』てのは、CSSの技術の一つで、
表示させる環境によって読み込むCSSを変えられるやつです。
例えば『ブラウザ表示用』と『印刷する時用』のCSSを、
同じCSSファイルに記述できるということです。
んで、レスポンシブ化の場合は、
ブラウザの横幅によって、読み込むCSSを変えるのに使います。
例を挙げると、こんな感じ。
- 横幅769px以上の場合はPC用のCSSを読み込む
- 横幅481px以上768px以下の場合はタブレット用のCSSを読み込む
- 横幅480px以下の場合はスマホ用のCSSを読み込む
こんな感じにしたい場合は、以下のような記述にします
@media screen and (min-width: 769px) {
PC用のCSS
}
@media screen and (max-width: 768px) {
タブレット用のCSS
}
@media screen and (max-width: 480px) {
スマホ用のCSS
}
こう記述してあげると、アクセスしたブラウザの横幅によって、
それぞれ適応するCSSを切り替えてくれます。
一番上のPC用のCSSはmedia screenでは囲まずに設定することも出来ます。
その代わり、下のタブレット用とスマホ用のCSSで上書きする形になるので、
その分記述は増えるかなと。
既存のサイトをレスポンシブ化するのなら、
既存のCSSの一番下に、タブレット用とスマホ用のmediaqueryを、
追記していく形が一番自然だと思います。
それぞれの細かい説明はここでは省きますが、
こんな感じで設定してあげるとキチンと表示分けができるかなと。
これを使えばWordpressでレスポンシブ化してないテーマでも、
キチンとレスポンシブ化出来ると思います。
注意!!
『ダメっ!』てわけではないですが、今回に限らず、
Wordpressの既存のテーマをカスタマイズする場合は、
テーマに直接手を入れるのではなく、子テーマを作ることをお勧めします。
あと、レスポンシブ化したら、
こちらのサイトで一度チェックしてみることをおすすめいたします。
スマホ対応してるサイトのことを『モバイルフレンドリー』というそうで。
