このページではレスポンシブデザインについて様々な方法を説明していきます。
レスポンシブデザインとは
一つのHTMLに対して画面のサイズ(正確には横の画素数)によってCSS３により別々のレイアウトに変える設計のなされたサイト
を言います。
また、レスポンシブデザインをスマホで確認する時に陥りがちな落とし穴についても解説していきます。
OSを搭載した携帯電話であるスマートフォンの登場により、今後増々、様々なデバイスによって閲覧されるWebサイト作りは重要性を増していくと思われます。そんな状況に対応すべく登場したのがHTML5やCSS3と言っても過言ではないくらいでしょう。そしてより素早く全てのデバイスに対応したwebページを作るためには「より良いレスポンシブデザイン」の作成技術は必須は言えるでしょう。
そこでこのページでは、レスポンシブデザインを作成するための３つの方法と、メリット、デメリット、基本的な注意点を記述していきたいと思います。
レスポンシブウェブデザインを作る3つの方法
1、HTMLの中でCSSファイルを切り替える
2、CSSの中で、サイズによってCSSファイルを切り替える
3、サイズ毎にスタイルを指定していき、一枚のスタイルシートにすべてを記述していく方法
目次
<link rel="stylesheet" media="screen and (min-width:480px) and(maxwidth:768px)"href="tablet_ver.css" />
link要素のmedia属性にて、「横幅の画素数が480pxから768pxまで(タブレットがおおよそこれにあたります)に対しては「tablet_ver.css」を適用します。」という意味を持ちます。
@import url("tablet_ver.css") screen and (min-width:480px) and (max-width: 768px)
先程のやり方とそんなに変わりません。
@media screen and (min-width:480px) and (max-width: 768px){
/* ここにスタイルシートを記述していく */
}
この方法では、一つのスタイルシートがかなり長くなっていってしまう反面、一枚で全ての記述が可能となり、かつ、全てのデバイスにおいて適用させたいものも共有させる事が出来るため、とても便利です。
下のURLのサイトは様々な使い方ができてとても便利です。
それぞれのデバイスの横の幅のシェアをわかりやすく表示してくれます。
http://gs.statcounter.com/#desktop-resolution-ww-monthly-201406-201506
例えば、パソコン上で作ったHTMLやCSSをスマホで確認している時に上手くCSSが適用されていない場合があります。andoroidでは一般的に「Android標準ブラウザ(特に名前なし)」と「Chrome」がデフォルトで入っています。iPhoneではSafariがデフォルトです。
これらは、この中でもAndroid標準アプリというものは問題児(セキュリティ上で脆弱性が発見されこれから出荷されるものにはデフォルトで入れないみたいですが、、、)で、かなり多くのユーザーが未だに古いバージョンを使用しています。
そこで日頃あまりベンダープレフィックスを付ける感覚がないプロパティにまでベンダープレフィックスが必要だったりします。
幸いな事にandroid標準ブラウザもChromeもSafariも全てwebkit系なので、-webkit-を記述すれば、問題は解消されます。
また、ベンダープレフィックスに関しては以下のサイトがおすすめです。
http://caniuse.com/#feat=calc
スマホ用ブラウザについてまで、ベンダープレフィックスの必要の有無を表示してくれます。
更に、そのブラウザのそのバージョンがどのくらいのシェアを占めているのかも表示してくれるのがありがたいです。
ただし、日本の場合では、IEの占める割合はこの数値よりも高いでしょう。
しかし最近では日本でもIEは過半数割れしてしまったみたいです。
Chromeが多いみたいです。
僕はソースなどを見るときにFireFoxをよく利用しますが、玄人の方はOperaを支持されている方が多いみたいです。
なぜでしょう・・・
誰か教えてください・・・
例えば、複数のHTMLを使用してしまうと、後々ページを改変する時にいくつものHTMLを変更しなければならなくなり作業が面倒くさくなってしまいミスをしてしまう可能性が高くなります。
対してHTMLが一つならば改変作業は効率的になります。
これによりSEOが有利になります。
しかし、スマートフォンサイトの場合でも一度パソコン用のページにアクセスしてからスマートフォン用のページに飛ばす事も可能です。
CSSが違うだけなので、実際に画像などの類は全て存在しています。
この事により、スマホでの表示速度は確実に遅くなってしまいます。
出来るだけ、画像を減らしたりしてCSSで装飾していく必要があるでしょう。
例えば、タブレットの縦向きと横向きで全く違うデザインになってしまいます。
パソコンでブラウザの大きさを小さくしていくと自然とスマートフォン用の表示になるので、あえて小さい画面で見たくても不可能になってしまいます・・・
このように課題はたくさんあります・・・
以上
