CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

Posted under - Web Design

47

今回このブログ - Webデザインレシピを、iPhone などでも見れるようにリデザインしました。使用したのは CSS3 の Media Queries(メディアクエリ)。メディアクエリの使い方や感想、気をつけたい注意書きをまとめてみました!

CSS3 Media Queries

遅ればせながらこのブログ – Webデザインレシピを、スマートフォンでも見れるように改修しました。このブログは WordPress で書いているので、スマートフォンや iPad への対応方法はいくつもあるのですが、今回は CSS3 の Media Queries(メディアクエリ)を使って、iPad、iPhone など、いろんなデバイスに対応(対応というか、一応見れる程度)にしてみました。

なので Media Queries を使ったスマートフォン対応と、リデザインしながら思ったことなどをまとめてみました。

ATTENTION

2012年 6月、またリデザインしましたので、この記事の内容と現在のデザインでは、一部違いがあります。

CSS3 Media Queries 目次

  1. Media Queries って何ですか?
  2. スクリーンサイズごとに、スタイルシートを指定する
  3. リキッドレイアウトでレイアウトしていこう!
  4. スマートフォンならではのViewport
  1. スマートフォンの縦と横を意識した Media Queries と Viewport
  2. Media Queries と一緒に覚えておきたい Tips
  3. Media Queries でスマートフォンに対応させることを前提にしたデザイン
  4. Media Queries でのスマートフォン対応はいいことばかりじゃないのかな

1. Media Queries って何ですか?

Webサイトをスマートフォンに対応させる方法はいくつかあると思いますが、今回は CSS3Media Queries を利用してみました。でも、そもそも Media Queries って何でしょう?Media Queries については色んなブログで説明されていますが、一応おさらいしておきます。

1.1. Media Queries は Media Type の拡張

Media Queries は、前から(CSS2)からある、Media Type の拡張です。Media Type は、みなさんも以前から使っているはず。Webサイトを作る時、スタイルを指定している CSS ファイルを読み込むのに、こんな風に記述していると思います。

HTML
<link rel="stylesheet" href='style.css' type="text/css" media="screen" />
/* ↑ パソコン用のスタイルシート */
<link rel="stylesheet" href='print.css' type="text/css" media="print" />
/* ↑ プリンタ用のスタイルシート */

media="screen"media="print" の部分が Media Type の部分です。こうやって Media Type を利用して、デバイスごとにスタイルシートを割り振ってます。上の例では、パソコン用の時は style.css で指定したスタイルが適応されて、印刷するときは print.css が適応されますよね!

1. CSS3 Media Queries

その Media Type をもっと便利にしたのが、CSS3 からの Media Queries。Media Queries を使うと、デバイスの更に細かい仕様に応じて、スタイルシートの割り振りを指定できるようになります。例えばこの記事の中では、以下の Media Queries を利用しています。

  • スクリーンサイズに応じて、CSSを使い分ける。
  • デバイスの解像度に応じて、CSSを使い分ける。

今回は上記の 2点、特にスクリーンサイズに応じて、読み込む CSS を割り振っていきます。単純にこれだけのお話です。スマートフォンに対応 … とタイトルを付けていますが、ユーザーエージェントによって振り分けている訳ではないので、
正確にはスクリーンサイズごとに対応 … という感じですね!

MEMO

ユーザーエージェントによって振り分けというのは、パソコンからのアクセスとか、スマートフォンからのアクセスかどうかを、いろんな方法で取得して振り分けること。.htaccessJavascript を使ったり、PHP などのサーバーサイドスクリプトを使ったりします。スマートフォンからのアクセスだから、スマートフォン向けの CSS を読み込もうとか、スマートフォン向けに作った別サイトに飛ばしてしまおう … とかの処理ができますね!

Media Queries そのものの説明は、IT戦記さんの、Media Query まとめが分かりやすかったです。

1.2. Media Queries、IE への対応

でもご存知の通り、IEでは CSS3 が使えません。当然 Media Queries も使えないのですが、ここで魔法のスクリプトの登場です!

Googleコードで公開されている、css3-mediaqueries.js を使えば、IE でも media queries が使えるようになります。おまじないとして、<head>~</head> 間に以下を記述しておきましょう。

HTML
<!--[if lt IE 9]> 
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]-->

これで IE でも Media Queries を使うことができるようになります!

2. スクリーンサイズごとに、スタイルシートを指定する

Media Queries を使えば、デバイスのスクリーンサイズによって、スタイルシートを割り振ることができるというのは分かりました。なので iPadiPhone などのスクリーンサイズを参考にして、それぞれのスタイルを指定してあげればいい訳ですね!

それぞれのスクリーンサイズは以下の通りです。あ、iPad や iPhone などは、縦の時(ポートレート表示)と横の時(ランドスケープ表示)のサイズが変わることにも注意が必要ですね!

  • iPad – 768px x 1024px
  • iPhone – 320px x 480px
  • 横のときは、逆になるだけです!

では実際にどうやって Media Queries を指定するのか?を見て行きたいのですが、Webデザイナー Nick La さんのブログ、Web Desiner Wall で、Media Queries を使ったスマートフォン対応の仕方が、とても詳しく解説されています!

私も Media Queries を使ってスマートフォンサイズで表示させるのに、とっても参考にさせていただきました。もちろん Web Designer Wall 自体、Media Queries を利用して、スマートフォンや iPad で見やすいように工夫されています。

上記ページにはデモも設置されていますので、Media Queries を利用するとどんな風になるのかが体感できると思います!

2.1. Web Designer Wall を見てみよう

Web Desinger Wall、スクリーンサイズを変更していくとどんな風に変化していくかを、ちょっと見てみることにします。まずは私の環境、1280pxで見たときです。

スクリーンサイズ 1280px

スクリーンサイズ 1280px

Mac の Aiファイル – Apple Product Vector Pack

このときのコンテナやサイドバーなどのサイズは、px 指定で固定されています。

スクリーンサイズ 1028px

スクリーンサイズ 1028px

2カラムに変化します。ロゴの形が変わったり、メニューや検索フォームの位置も移動して、新たに罫線も出現したりします。

スクリーンサイズ 768px

スクリーンサイズ 768px

サイドバーが落ちて(フロートをやめて)、1カラムレイアウトに。ロゴが横のラインを強調できる大文字に変化。検索窓やツイッター、RSSボタンとレイアウト的に並びます …。

スクリーンサイズ 480px

スクリーンサイズ 480px

基本的なレイアウトは、760px の時と同じですが、下の方に表示されていた広告などが非表示になります。

スクリーンサイズ 320px

スクリーンサイズ 320px

主に縦方向のマージンやパッディングを小さくして、見やすく工夫されています。どのスクリーンサイズで見ても、とても素敵ですね!

2.2. Media Queries を書いてみよう

それでは実際に Media Queries を使って、スクリーンサイズごとにCSSを振り分けてみます。基本的な書き方は以下の通り。CSS ファイルに直接書きます。

各スクリーンサイズごと、段階的に書いていく場合は、max-width: 1000px のように書いて行きます。

CSS
@media screen and (max-width: 1000px) {
  #container{
    width : 95%;
  }
}
@media screen and (max-width: 760px) {
  /* style */
}
@media screen and (max-width: 480px) {...}
@media screen and (max-width: 320px) {...}

iPhone のポートレート表示(320px)でアクセスした時には全部に当てはまるので、上から順番にスタイルを継承していくって感じですね!

また、例えばこんな風に書くこともできます。

CSS
@media only screen and (min-device-width: 760px)
    and (max-device-width: 1000px){
        /* style */
}

こうすると、スクリーンサイズが 760px ~ 1,000px の時という風に限定できます。

外部ファイルで読み込む場合は以下のように記述します。

CSS
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css" />

またデバイス別のスクリーンサイズごとに振り分けた、Media Queries の記述例が以下のリンクに詳しく載っているので、参考になると思います!

前述したように、@media only screen and (min-device-width: 760px) and (max-device-width: 1000px){ ... } など、条件分岐のように使えるので、対象サイズ以外のデバイスでアクセスしたときは、この部分は読み込まずに飛ばす … その分通信は軽くなる … と言う訳ではないと思うんですよね …。

あくまでスタイルの適応を限定するだけで、CSSファイルは全て読み込んでいる … んじゃないかなぁ

この辺について、テスト方法など、詳しくご存知の方がいらっしゃったら、教えていただけるとうれしいです!

Attention

コメント欄で教えていただきました!やっぱりすべてのメディアクエリの CSS ファイルを読み込んでいるようです。検証もしていただいています …。whokachi さん、とても手間がかかったと思います …。貴重なお時間、そして検証結果、本当にありがとうございました!

3. リキッドレイアウトでレイアウトしていこう!

ここまでで、Media Queries を使って、スクリーンサイズごとにスタイルを指定する方法はわかりました!それでは実際に、どんな風にスタイルを指定していけばいいのでしょう?今まで通り、普通に要素の幅や高さを固定してしまって大丈夫 … という訳には行きません。

デバイスのスクリーンサイズは様々ですし、Media Queries で振り分けているのは maxsize でした。なのでコンテナなどのボックス、マージンやパディング、画像の幅、ポジションの値など、基本的には %で指定して可変にしておきましょう。いわゆるリキッドレイアウトですね!その際の tips も、Web Designer Wall で紹介されていました。

HTML

単純に以下のような、ヘッダーとフッター、メインとサイドバーの 2カラムレイアウトを例にして、話を進めて行きます。

<div id="container">
     <div id="header"></div>
     <div id="main"></div>
     <div id="sidebar"></div>
     <div id="footer"></div>
<div>
CSS

前述した通り、各要素の横幅は、スムーズに変化するように % で指定しています。また、サイトの全幅、コンテナも 95%などして、少し余白を作った方が読みやすくなりますね。

1. 2カラムのまま、段々細くする
@media screen and (max-width: 1000px) {
  #container{
    width:95%
  }
  #main {
    width:60%;
    padding:3% 4%;
  }
  #sidebar{
    width:30%;
  }
  img{
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
  }
}

ここで注意するのは、img タグで貼付けた画像の取り扱いです。画像のサイズも可変にしないと、ボックスからはみ出してしまいます X( 最後の行は、IE8 への CSSハックですねー。

2. 1カラムにしちゃう

iPad など用のサイズでは、シングルカラムにした方がいいのかな …?記事幅が広くなるので読みにくくなったりするかなーと悩んだりもしましたけど、結局シングルカラムにしてしまいました!

2カラム時にフロートさせていた、#main#sidebar のフロートを無しにします。

CSS
@media screen and (max-width: 760px) {
  #container{
    width:90%;
  }   
  #main,
  #sidebar{
    float:none;
    width:auto;
  }
}

あとはもっと小さいスクリーンサイズに応じて、いろいろスタイルを指定していきます!

4. スマートフォンならではの Viewport

Media Queries を使って、スクリーンサイズごとにスタイルを振り分ければ、これでスマートフォンサイズ対応 OK!という訳ではありません …。

スマートフォンのブラウザには、Viewport という機能があります。Viewport とは何でしょう … 上手く言えないのですが、擬似的なスクリーンサイズみたいな感じでしょうか?口ではうまく説明できないのでちょっと画像で説明します。

Webデザインレシピ

例えばこのブログ – Webデザインレシピは、横幅 940pxで作ってあります。これを Viewport の指定を特に行わない(デフォルトでは 980px)で iPhone で表示した場合、こんな風にに表示されます。

小さくて見れません … X( iPhone の横幅は 320px ですが、擬似的に980px にしているので、上記のように表示されるんですね!なのでせっかく Media Queries で 480px 以下のスタイルを指定したのに、980pxで表示されてしまうんです XD

そこで meta タグを使って、Viewport をコントロールしていきます。その前に、Viewport のプロパティと値は以下の通りになっています!

4.1. Viewport のプロパティ

width
コンテンツの幅です。何も指定しなければ、デフォルトの 980px になります。200 ~ 10,000px、または device-width を指定します。
height
コンテンツの高さです。200 ~ 10,000px、または device-heightを指定します。
initial-scale
倍率です。0 ~ 10の間で指定できます。
minimum-scale
最小倍率です。0 ~ 10(倍)で指定します。デフォルトでは 0.25です。
maximum-scale
最大倍率です。0 – 10(倍)で指定します。デフォルトでは 1.6です。
user-scalable
ユーザーが縮小や拡大できるようにするかどうかです。yes、または no で指定します。デフォルトは yes です。

4.2. Viewport を meta タグで指定しよう

それでは実際に meta タグを記述してみましょう。例えば以下のように書きます。

  • 1. <meta name="viewport" content="width=device-width; initial-scale=1.0" />

上の例では、コンテンツの幅はデバイスの幅にして、倍率は1.0 にするという意味です。でも、気をつけないといけないのが、これらはページを読み込んだ時点の指定ということ。もうちょっと詳しく後述しますが、今はページを読み込んだ時点ということだけ覚えておいてください。

特に大事なのは width ですね!コンテンツの幅 = デバイスの幅とすることで、縦なら 320px、横なら480pxとなります。これで Media Queries で指定したスタイルが適応されるようになります!

5. スマートフォンの縦と横を意識した Media Queries と Viewport

さて、Viewportを使えば、iPhone などのスマートフォンの width をコントロールできることが分かりました。ここで問題になるのは、縦の時(ポートレート表示)は 320px で、横のとき(ランドスケープ表示)は 480px(iPhone)になるということです。

ふたつスタイルを用意しなければいけないの? … と思うかもしれません。もちろん Media Queries を利用して、ふたつスタイルを用意しても OK です。冒頭で紹介した、Web Designer Wall は、ふたつのスタイルを用意しています。

5.1. 480px 以下は統一する場合

今回私は、480px 以下は統一して作ってしまいました。(最初はふたつ作ったけど、やっぱり統一しました … その事情は後述します。)その場合、Media Queries は以下のように指定します!もうここまで読んでくれた人なら簡単ですよね!

CSS
@media screen and (max-width: 480px){
     /* style */
}

でも iPhone を縦にした場合、横幅は 320px です。なので 480px で作りますが、実際は320pxの時にどう見えるか … という感じで作っていきます。(単位は基本 % 指定で!)

口では分かりにくいので下の画像を見てください。iPhone を横にした時 – 480px で見た場合は、以下のようになります。普通のブラウザ – 例えば Chrome で見た時と比べてみてください。

スクリーンサイズ 480px での比較

iPhoneとChrome スクリーンサイズ 480px での比較

同じ 480px のサイズなのに、見え方が全然違う … X(

ロゴや検索窓、I Love Web Design の大きさが違って見えますよね。というよりも、ページ全体の比率が違ってます!

この場合の iPhone の 480px というのは、320px 幅のコンテンツを、480pxに拡大しているだけなんです。なので 480px 以下は統一する場合では、320px の時にどう見えるか … を意識して作ります。

この場合、meta タグでの Vewport の指定は以下のようにしています。

HTML
<meta name="viewport" content="width=device-width; " />

上記のように meta タグを書くと、コンテンツの幅を、ページを読み込んだ時のスクリーンサイズにフィットして表示してくれます。iPhone 縦の時は普通に表示されて、横にした時には、少し拡大されて(320px → 480px)表示されます!なので上記の画像のような表示になるんですね!

5.2. 480px と 320px でレイアウトを変える場合

冒頭で紹介した Web Desiner Wall は、ポートレート表示とランドスケープ表示のときに、レイアウトを若干変えています。Media Queries でレイアウトを変更するのは、前述と同じなので特に問題ないですね!max-width: 320px を追加するだけです。

CSS
@media screen and (max-width: 480px){
     /* style */
}
@media screen and (max-width: 320px){
     /* style */
}

この場合の Vewport はさっきと違って、以下のように倍率も一緒に指定してあげます。

HTML
<meta name="viewport" content="width=device-width; initial-scale=1.0" />

initial-scale=1.0 の部分ですね!コンテンツの幅は、デバイスの幅に合わせて、倍率は 1.0、という意味です。倍率 1.0を指定しないと、縦から横に切り替えたときに、Media Queries で指定した 480px のスタイルが適応されないで、320px のスタイルが倍率 1.5(480 / 320)で表示されてしまいます。

それからもうひとつ。縦で読み込んだ時は、320pxで指定したスタイルが 1.0倍(等倍で)表示されますが、そのまま横にするとちょっとアレ?って感じになってしまいます。というのは、横 480px にしたときには、480px で指定したレイアウトで画面にフィットさせたいのですが、これが上手く行きません。

1. iPhoneで横にした時、画面にフィットしない

iPhoneで横にした時、画面にフィットしない

画像大きくて邪魔だし、言ってることが上手く伝わってるかどうか不安 …

上記のように、横向きにした時点で、拡大表示されてしまうんですねー …。

前述した Viewport の指定、initial-scale=1.0 では、ページを読み込んだ時点の倍率 1.0を維持しているので、横にしても、320px x 1.0 のままです。なので横向きにすると、レイアウトはパッと変わるのですが画面にはフィットしません … 。480px x 1.0 ではなくて、320px x 1.0 なので …

もちろん一度画面を指でぐりぐりして縮小させるとフィットしますが、ちょっと面倒かもしれませんね …。

私も試しに一番最初はコレで作ったんですけど、友達に聞いたら、デフォルトで横向き = 拡大っていうイメージがあるから、別にレイアウトかえなくてもいいんじゃない?という的確なアドバイスをいただいたので … 結局やめました XD

2. 強制的に拡大を禁止する

強制的に、横向きでも画面にフィットさせたい場合は、Vewport を以下のように書くと、一応フィットします。

HTML
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />

maximum-scale=1.0 … これは実質拡大機能禁止 … なので等倍以上は拡大されません。その結果 480px x 1.0 にフィットするのですが … 見てる人が拡大表示したくて、指でズームしようとしてもできなくなっちゃいます … X(

中にはそれでも強気(?)にレイアウト、画面フィットを優先している Webサイトもありました。リンク貼ってみるけど、iPhone とかで見ないと分からないですよね …

いろいろと見てきましたけど … これで何とか Media Queries を使ったスマートフォン対応ができるようになりました!これより以下は、スマートフォンサイズにしたとき、ちょっと覚えておきたい Tips などです。

6. Media Queries と一緒に覚えておきたい Tips

初めて Media Queries を使ってみると、分からないこともいろいろありました。自分でも疑問に思ったことをまとめてみました。

6.1. 背景画像をスクリーンサイズごとに用意する必要があるの?

Media Queries を使うことで、スクリーンサイズに応じてスタイルを指定できるようになりました。でも背景に指定してある画像はどうしましょう … スクリーンサイズごとに背景画像のサイズを変更して用意するのも面倒です。

もちろん画像を別に用意してもいいのですが、スマートフォンは CSS3 が使えるので、積極的に使っていけます。こんな時は、背景画像のサイズを変更できる background-size プロパティーが便利です。

パソコンのブラウザで表示しているときは通常のサイズの画像でも、スマートフォンサイズのときには、background-size プロパティで縮小したサイズを指定してあげればいいかもですね!

CSS
@media screen and (max-width: 480px){
  #sidebar{
    -webkit-background-size:100px 100px; /* webkit系 */
    background-size: 100px 100px;
  }
}

こうすれば実際の画像サイズが 400px x 400px の背景画像でも、100px x 100px で表示されますね!

6.2. iPhone 4 で見ると、背景画像がぼやけて見える

キチンと Photoshop などで作った画像 … iPhone4 で見ると、少しぼやけて見えます…。iPhone4 は従来の iPhone3G と比べると、解像度が 2倍になっているそうなので、同じスクリーンサイズでも、ピクセル数で言うと倍になっているんですね。

なので Photoshop などでサイズを合わせて作った画像は、実際のサイズの倍に引き延ばされてる感じで、ぼやけて見えてしまいます。特にポートレート表示(320px)で見ていて、ランドスケープ表示に(480px)で拡大表示したときなど、とってもぼんやりしてる感じが目立ってしまいます …。

そこでさっきの background-size と Media Queries を組み合わせて、解像度が倍の画像を縮小して表示することで、くっきり表示させることができます!

CSS
@media only screen and (-webkit-min-device-pixel-ratio : 2),only screen and (min-device-pixel-ratio : 2){
     #logo{
          background: url(images/logo-2.png) no-repeat 0 0;
          -webkit-background-size:100px 75px;
          background-size: 100px 75px;
     }
}

@media 以下の 1行目で、devicePixelRatio という見慣れないプロパティが出てきます。devicePixelRatioは、デバイスの解像度の倍率 … といった感じ。iPhone 4 は 2倍、Androidでは 1.5 倍の機種が多いみたいです。

上記の場合、logo-2.png の実際のサイズは 200px x 150px です。それを 1/2 のサイズに縮小して表示してあげるので、くっきり表示させることができます!

6.3. テキストが自動で拡大されるのを防ぐ

iPhone の場合、テキストのサイズを自動で拡大したりする機能がついています。ランドスケープ表示時など、フォントサイズを小さくしているのに、大きく表示されてたりすることがあります … それがイヤな場合は、下記を CSS に書き加えます。

CSS
body{
  -webkit-text-size-adjust : none;
}

Attention

コメント欄でご指摘いただきました!-webkit-text-size-adjust: none; を設定すると、PC 版 Webkit で文字の拡大/縮小機能ができなくなるという重大な副作用があります。-webkit-text-size-adjust: 100%; とするべきです。 … なるほど、確かにそうですね!

また、下記のリンクも参考になるということで教えて頂きました ;D

6.4. リンクタップ時のハイライトカラーを変更する

基本的にスマートフォンの場合、リンクをクリック … というかタップすると、灰色の半透明な部分が表示されます。あんまり気にしなくていいかもしれませんが、灰色がイヤだなーという場合は、-webkit-tap-highlight-color プロパティ で指定できます。

CSS
body a{
  -webkit-tap-highlight-color:rgba(245,78,150,0.3);
}

カラーは RGBa でアルファチャンネル(半透明度)も指定できます!

6.5. Media Queries でデザインするときに便利なツール

Media Queries を使って複数のレイアウトを作るときに、ちょっと便利だったツールを紹介します!

1. 複数の画面サイズのレイアウトを一気に確認したい

複数のスクリーンサイズのレイアウトを確認するときに便利なのが、Simple Media Queries Tester。使い方は簡単!URL を入れるだけです。

何が便利かっていうと、ローカル環境で作ってるときでも利用できるんです。サーバーにあげてなくてもできるんですねー … すごく便利です!かちびと.net さんの、最近よく使ってる、Web制作に役立つWebサービス的なやつで教えてもらいました。

どんな風に表示されるか、以下のリンクで分かってもらえると思います!

2. クロームの拡張機能 Resolution Test

私は普段、Google Chrome を使っているので、この拡張機能も重宝しました。好きなスクリーンサイズに、ブラウザサイズを変更してくれる拡張機能です。定番なのかな?最初からいくつかのサイズが用意されてますが、オプションで自分の好きなサイズも指定できます。

… あれ? 便利なツール … ふたつしかなかった X(

6.6. Media Queries を使ったWebデザインいろいろ

下記のリンク先には、Media Queries を使ってスマートフォンに対応させている Webサイトがたくさんまとめられています!

7. Media Queries でスマートフォンに対応させることを前提にしたデザイン

ここからは、今回自分のブログを Media Query を使ってリデザインしたときに感じたことなど … 覚え書きです。

まず、Media Queries を使うと、当然のことながらその分 CSS のコードは長くなります。また、もともとの HTML の記述や、CSS の記述が無駄に長いと、余計に長くなってしまいます。

今回このブログのデザインを、スマートフォンサイズにまで対応させましたが、Media Queries を使うことを考えてたら、こういうデザイン、またはコーディングにはしなかったかなーと思いました。

Media Queries を意識して、デザインの幅を狭くするというわけじゃなくて、もうちょっとハイブリッドなデザインというか、そんな感じで …。

例えば … トップページ以下で表示している手書きフォントの背景画像 …

小さなサイズの画像のテキスト

手書き風フォントの部分(画像)は、縮小されれば潰れて読めません … なので別画像を用意しなければならなくなりました …。

例えば … スクリーンサイズを細くしていったときの、日付やツイッターボタンの部分。カラム幅いっぱいに背景を指定しているために、画像の端が欠けてしまうとか …

画像の端が欠けてしまうデザイン

また、カラム幅いっぱいに合わせたアイキャッチ画像も、シングルカラム(iPadなどで表示する時)にしたときには、カラム幅が大きくなるので合わなくなります …。

そういったハイブリッド(上手く言えませんが …)なデザインというか、その点ひとつ見ても、冒頭で紹介した Web Designer Wall のデザインは、本当に素晴らしいなーと改めて思いました。レシピのデザイン、時間あるときに、HTML から作り直したい …. X(

それから … 私は iPad 持ってないので、iPad でキチンと表示されてるかすごく不安です … 変なところあったら教えていただけるとうれしいです!

8. Media Queries でのスマートフォン対応はいいことばかりじゃないのかな

Media Queries は、もともとある HTML はそのままで、CSS のみでスタイルを変更していく手法です。HTML はそのままなので、必要ない部分を display:none で非表示にしたり、画像はもともとのサイズを縮小して表示しているに過ぎません。なのでスマートフォン用に最適化する … という言葉は使えない感じですね。

見た目を変更しているだけなので、その為の余計なコードの記述が増えます。その分表示速度などは遅くなるのかなーと思ったりしました。

また、以前こんな記事を読みました。

以下はその中の一節です。

All you need to do to transform your desktop web design into something optimized for devices with smaller screens, less powerful CPUs, and slower network connections is to add more code.

Cloud Four Blog

(Media Queries を使った場合)あなたの PC 向けの Webデザインを、より小さいスクリーン、よりパワフルでない CPU、低速度回線のデバイス向けに変換するために必要なのは、より多くのコードを追加することなんです。

この記事は、Unformed Building さんでも和訳されています。

Media Queries を使えば、かなりお手軽にスマートフォンサイズまで対応できます。でもパソコンよりも通信速度や CPU のパワーの劣るスマートフォンに対しては、決して優しくないのかなーと …。なのでユーザーエージェントでの振り分けとか、少しでも負荷のかからないように工夫してあげることも必要かなーと思いました。

今回は Media Queries を使ってみましたが、このブログは WordPress で書いているので、もっと選択肢はあります。これも友達に教えてもらったんですけど、WordPress のプラグイン Mobile Theme Switcherなどで、HTMLCSS ごと切り替えるのもいいなーと思いました。今度試してみようかな …。

9. 最後に…

最後に、今回の記事を書くにあたって、株式会社エムディエヌコーポレーションさんにいただいた、web creators 特別号 HTML5+CSS3の中の、スマートフォン向けサイトの記事がとても参考になりました。もちろん CSS3 の Media Queries 以外のこともたくさん載っています。MdN の K.Gさん、ありがとうございました!

web creators 特別号

web creators 特別号 HTML5+CSS3 次世代Webコーディングの超・最新動向 (インプレスムック エムディエヌ・ムック)

スマートフォン向けサイトの記事がとても参考になりました!もちろん CSS3 の Media Queries 以外のこともたくさん載っています。

Comments

Thank you for the comment.