WEB帳
RWD（レスポンシブWebデザイン）を使ってスマホ対応へ

少しブログが楽しくなってきたので、スマホにも対応するようにレスポンシブを取り入れ再構築しました。
再構築と行ってもCSSを少し書き直した程度です。なので、いつもの通りやっつけ作業です…
今回も忘れないように簡単に要点だけをまとめようと思います。

スマホ対応への手順

1. METAタグの「viewport」を指定
2. CSSで幅の指定やウインドウサイズ毎に記述
3. 念の為、IE8にも対応させる対応策

METAタグの「viewport」を指定

自分も久しぶりすぎて忘れてしまっていたのですが、viewportを設定しないと幅などをスマホに合せても文字が小さく表示されたりタップで拡大縮小など出来たりしてしまいます。
色々プロパティが用意されているようですが、実際にどの様な効果などがあるのか詳しく分からないので基本的に以下の記述した通り「width、minimum-scale、maximum-scale」しか設定してません。
とりあえずは、今はしたい事は出来てるので少しずつ学んでいこうと思っています。

viewport

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

▼ viewportの各プロパティ

CSSで幅の指定やウインドウサイズ毎に記述

基本的にな記述方法は、３パターンがあるようです。

• 外部ファイル読み込む時の記述方法
• @importでの方法
• インラインの記述法

自分は、同じファイルで見れた方が楽なので余程複雑じゃないかぎりはインラインの記述方法で行っています。
なので、ここではインラインの記述方法を用いたRWD（レスポンシブWebデザイン）を行います。
このブログは、最大幅1,000pxで構成されているので、幅の指定を1,000px以上と1,000px以下の２パターン用意しパソコンとスマートフォンに対応しています。

インラインによる記述方法

/* 1,000pxより大きい場合に適用されるCSS（PC用） */
@media only screen and (min-width:1000px){
	/* CSS記述 */
}
/* 999pxより小さい場合に適用されるCSS（スマホ用） */
@media only screen and (max-width:999px){
	/* CSS記述 */
}

▼使用するスタイルシートタグ

PC用とスマホ用では、画像のサイズが合わずにレイアウトからはみ出してしまう事もあります。
そう言う場合は、max-widthを使って調整すると縦横比もそのままで簡単に縮小できます。

スマホ用の画像調整

img { 
    max-width: 100%; 
    height:auto;
}

IE8にも対応させる対応策

もう、殆どの人がXPのOSを使っていないと思うので必要ないとは思いますが、念の為にIE8のブラウザにも対応させたい場合は、以下のコードを内に記述するだけ出来ます。

IE8対策用コード

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

注意点としては、media typeを省略せずに「@media screen and 」と正しく記述しないといけないみたいです。
詳しい事は、分かりませんが上記の記述でIE8での動作確認したところ問題なく表示されていました。

Googleが推奨しているらしい

レスポンシブWebデザインを使ったWebサイトの制作は、Googleも推奨しているらしいとの記事を見かけました。
恐らくRWD（レスポンシブWebデザイン）にすることにより色々な要素が合わさって評価していると思いますが、
これからもどんなデバイスでも見やすいWebサイトの制作を心がけていこうと思います。

【参考Webサイト】

• レスポンシブデザインにするための基本的な方法
• レスポンシブWebデザインをIE8に対応させる方法

コメント（0件）

RWD（レスポンシブWebデザイン）を使ってスマホ対応へに対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet