レスポンシブウェブデザインに対応しました

前からやろうやろうと思いながら、なかなか重い腰を上げれずにいましたが、このブログをレスポンシブウェブデザインにしました。

HTMLのheadに*viewport*を追加

1 <meta name="viewport" content="width=device-width, initial-scale=1.0">

CSSに画像を引き延ばしたり縮めたりする機能と、ブラウザの横サイズにより振り分けの処理を追加

 1 img {
 2 	max-width: 100%;
 3 	height: auto;
 4 	width: auto\9; /* ie8 */
 5 }
 6 
 7 @media screen and (max-width: 1238px) {
 8 }
 9 
10 @media screen and (max-width: 980px) {
11 }
12 
13 @media screen and (max-width: 650px) {
14 }
15 
16 @media screen and (max-width: 480px) {
17 }

こだわれば色々複雑な事が出来るのでしょうが、手っ取り早く済ませたかったので、2時間使って出来る範囲で追加しました。

アスタデザインではスマートフォンサイトの制作も承っています。
Flashで作られたようなスマートフォンで表示出来ないコンテンツを含むサイトは検索順位が下がってくるという事です。
これを良い機会にして、既存サイトをスマートフォンに対応させてみませんか?

Comments

blog comments powered by Disqus