レスポンシブウェブデザイン対応のWEBサイトの作成方法
レスポンシブウェブデザイン対応のWEBサイトの作成方法です。方法としてはCSS3のメディアクエリーを使用します。レスポンシブウェブデザインは検索エンジンのGoogleも推奨していて今後、主流となるでしょう。
レスポンシブウェブデザインとは
レスポンシブウェブデザインとはどういうものかといいますと、PCの方ですと現在使用しているブラウザの幅を狭くしたり広げたりしてみてください。そうすると、右のメニューが表示されたり、非表示になったりすると思います。これがレスポンシブウェブデザインです。スマートフォンやタブレット、PCのブラウザ幅に合わせてサイトのコンテンツを変化させるものです。
レスポンシブウェブデザインのサンプル
一つのHTMLファイルでPCとスマートフォン、タブレットにも対応するレスポンシブウェブデザインは難しくありません。早速、サンプルのコードをみてみましょう。
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" /> <title>プチモンテ</title> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <link rel="stylesheet" href="common.css" type="text/css" /> </head> <body> <div id="contents"> <div id="main"> 本文 </div> <div id="menu"> メニュー </div> </div> <div style="clear:both;"></div> </body> </html>
[CSS(common.css)]
/* Media Queries 769px以上 */
@media screen and (min-width: 769px){
#contents {
width:960px;
}
#main {
float:left;
width:620px;
}
#menu{
float:left;
width:340px;
}
}
/* Media Queries 768px以下 */
@media screen and (max-width:768px){
#contents {
width:95%;
}
#main {
width:95%;
}
#menu{
display:none;
}
}
サンプルの解説
[HTMLの6行目]
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1" />
ここではスマートフォンやタブレットの表示領域を設定しています。device-widthは表示領域を端末幅に合わせる。initial-scale=1は初期ズーム設定で倍率1倍。minimum-scale=1は最小倍率1倍です。ようするにスマートフォンでは最小化できなくて、最大化はできるように設定しています。この設定は任意で変更できます。
[HTMLの8,9,10行目]
<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
これはCSS3に対応していないIE8以下でも正常に動作するようにしています。
[CSSの2-17行目]
@media screen and (min-width: 769px){
...
}
ここではブラウザ幅が769px以上(PCなど)の場合のみ実行されるCSSです。メニューも表示されます。
[CSSの20-33行目]
@media screen and (max-width:768px){
...
}
ここではブラウザ幅が768px以下(スマートフォン、タブレットなど)の場合のみ実行されるCSSです。display:none;でメニューを非表示にしています。
サンプルの応用
この応用編としてPC、スマートフォン、タブレット毎にCSSファイルを作成して「@media screen and(...)」で各端末毎に切り分ける事もできます。
<link rel="stylesheet" href="pc.css" type="text/css" /> <link rel="stylesheet" href="tablet.css" type="text/css" /> <link rel="stylesheet" href="smart.css" type="text/css" />
/* Media Queries 769px以上 */
@media screen and (min-width: 769px){
...
}
/* Media Queries 768px以下 */
@media screen and (max-width: 768px){
...
}
/* Media Queries 640px以下 */
@media screen and (max-width: 640px){
...
}
ブラウザ幅について
基本的にスマートフォン(縦向き)のブラウザ幅は320px～360px、タブレット(縦向き)の幅は600px～768pxとなります。一方、スマートフォン(横向き)のブラウザ幅は568px～640px、タブレット(横向き)960px～1024pxとなります。スマートフォンやタブレットの幅は端末によって異なりますので、その辺りは各自で調査してくださいね。
関連記事
