秋田の総合広告代理店-WEB制作・グラフィック制作・映像制作・写真撮影・イベント企画-

2014/01/11 草皆 亮平

レスポンシブウェブデザインの作り方(デモあり)

001

今、スマートフォンの普及率は20代が64.8%、30代が56.6%、40代が40.4%とスマートフォンは急速に広まりました。WEBでのプロモーションをする上でスマートフォンへの対応は必須になりつつあります。そこで生まれた技術、レスポンシブウェブデザインの作り方をご紹介します。
レスポンシブウェブデザインは一つのHTMLで全てのデバイス(PC、スマートフォン、タブレット)に対応可能で、ユーザにストレスを与えることなくサイトを見る事を可能にしました。

1.meta viewportの指定をしデバイスの最適化をする

この指定によりスマートフォンでアクセスしてきたときのウェブサイトの自動縮小をしないように指定します。このmetaダグを入れないと正常に動作しません。
HEADダグに下記のMETAを追加します。


2.スタイルシートを設定する。

デバイス(画面サイズ)ごとにスタイルシートを用意し、画面サイズごとにスタイルを指定していきます。cssのMedia Queriesを記述しスタイルを適用していきます。下記にサンプルを記述しています。
【スマートフォン】0px〜640px
【タブレット】641px〜980px
【PC】980px〜
上記は参考のサイズです。


import.cssの中身

/*スマートフォン用CSS*/
@import url("s_layout.css") screen and (min-width:0px) and (max-width: 639px);
@import url("s_style.css") screen and (min-width:0px) and (max-width: 639px);

/*タブレット用CSS*/
@import url("t_layout.css") screen and (min-width:640px) and (max-width: 979px);
@import url("t_style.css") screen and (min-width:640px) and (max-width: 979px);

/*PC用CSS*/
@import url("layout.css") screen and (min-width:980px)
@import url("style.css") screen and (min-width:980px)

3.IE8の対応をする

IE8ではMedia Queriesが効かないためIE8用のスタイルシートを用意する必要があります。


以上で基本的なレスポンシブウェブデザインのサイトが作成できます。下記にデモサイトを用意しました。スマホとPCで最適に見れるように制作しております。
ナビ周りのアニメーション、Javascriptの設定は今後どこかで説明したいと思います・・・。

レスポンシブウェブデザインデモ(トップページのみ)

株式会社プロデュース・プロ

〒010-0001 秋田県秋田市中通6-1-65PPビルディング2F
TEL:018-884-3711 FAX:018-884-3722

ホームページ内に掲載している写真、テキストなどの著作権は、株式会社プロデュースプロに帰属します。 Copyright PRODUCE PRO INC.All Rights Reserved.