プラカンブログSTAFF BLOG

2015.12.08

レスポンシブWebサイトの作り方 ~導入編~

title

こんにちは。デザイナーの(鈴)です。
Googleの推奨もあり、最近では当たり前になった
レスポンシブWebサイトの作り方を紹介します。

以前(杉)くんが「レスポンシブWebデザイン」について紹介していたので、
概要やメリットなどはそちらを読んでみてください。

今回は作り方(導入部分)を中心に説明します。

  • 「viewport」について
  • CSSの設定「メディアクエリー」によるcss管理
  • CSSの設定「ユーザーエージェント」によるcss管理

最低限必要なことは「viewport」と「css」の2つの設定になります。
この2つができていれば基本的に問題ありません。
意外に設定は簡単なので、気楽に読んでみてください。

「viewport」について

「viewport」とは「表示領域」のことで、
スマホは端末ごとに画面幅が異なるので、
「表示領域」を設定することで、見え方を調整可能になります。

実際に何をするかというと
htmlの ~の中に以下のコードを追加します。

「content」内容についは下記を参照ください。

「width=device-width」 表示領域の幅をデバイスのサイズに合わせる。
 「device-width」部分をピクセルの値でも指定が可能で、
 その場合はその値を端末の表示領域の幅として表示します。
「user-scalable=yes」 ズームの操作の許可。初期値は許可。許可しない場合は「no」
「maximum-scale」 最大倍率の指定。(0~10の範囲、初期値は1.6)
「minimum-scale」 最小倍率の指定。(0~10の範囲、初期値は0.25)
「initial-scale」 初期表示倍率の指定。

これでhtml側の準備ができました。

CSSの設定

今回は「メディアクエリー」と「ユーザーエージェント」の2つの管理方法を紹介します。
特に「メディアクエリー」によるcss管理は一般的なので、
これさえ理解していればレスポンシブWebサイトは制作可能です。
「ユーザーエージェント」による管理は複雑なサイトの場合など
サブの手段として理解していれば大丈夫です。

「メディアクエリー」によるcss管理

「メディアクエリー」によるcss管理とは指定した幅用のCSSを用意して、
端末ごとに表示を制御する方法です。 

実際には下記のようにCSS内スマホ用の記述をします。
※パソコン用CSSを基本とし、スマホ用を改めて指定した場合

/* 画面の横幅が768pxまで(スマホ用) */
@media screen and (max-width: 768px){
この部分にスマホ用に対応させたいCSSを記述
}

上記では768pxとしていますが、端末の画面サイズに合わせ変更可能です。
またタブレット用の指定も可能で、メディアクエリーはいくつでも記述できます。

例としてタブレットとスマホのCSSを分けた場合は下記になります。

/* 画面の横幅が768pxまで(タブレット用) */
@media screen and (max-width: 768px){
この部分にタブレット用・スマホ用に対応させたいCSSを記述
}

/* 画面の横幅が640pxまで(スマホ用) */
@media screen and (max-width:640px){
この部分にスマホ用だけに対応させたいCSSコードを記述
}

ただ注意点としてIE8以下では使えません。
そのためGoogleコードで公開されている、css3-mediaqueries.jsを使用し、対応します。下記のコードをhead内に読み込めば問題ありません。

以上が「メディアクエリー」によるcss管理になります。

 

「ユーザーエージェント」によるcss管理

「ユーザーエージェント」とは、ざっくり説明すると、
Webサイトへのアクセスした時のブラウザやスマホ・タブレットなどの端末情報のことです。
アクセスしてきたブラウザや端末を判別して、CSSを切り替えて管理します。

まずはスマホ用とパソコン用のCSSを準備します。
「メディアクエリー」のようにCSS内に特別な記述は必要ありません。
head内か外部JSとして下記のコードを記述すれば、CSSの切り替えが実行されます。
※cssの格納場所やファイル名は自由に指定してください。
 下記ではスマホ用を「sp.css」、パソコン用を「pc.css」としています。

この方法はjQueryなどのスクリプトがスマホとパソコンで異なり、
CSSもスマホ用に指定する内容が多いなど複雑なページには有効な方法です。
スクリプトの切り替えと一緒にCSSも切り替えるのが便利です。
また無駄に読み込むことがないので、表示負荷が減ります。

ただCSSをスマホ用とパソコン用で分けるので、
「メディアクエリー」より管理が少し面倒です。
一般的な構成の場合は「メディアクエリー」による管理をオススメします。

まとめ

「レスポンシブWebサイト」
初めて聞いたときは聞き慣れない言葉で「???」でした。
実際は「viewport」と「css」の2つの設定だけで成り立つので、
臆せず、気楽に試してください。

またGoogleからも推奨されていますし、
これからは必須の内容になってくるので、
今のうち覚えましょう!!

参考リンク

下記サイトは参考にしたサイトになります。
メディアクエリーについて詳しく紹介しています。

http://blog.livedoor.jp/blogfire-it_skill/archives/43483029.html
http://www.panzee.biz/archives/4059
https://syncer.jp/how-to-create-responsive-web-design
http://www.hp-stylelink.com/news/2014/05/20140516.php

 

この記事は、SUZUKI が書きました。