title-backcolor

素人の作るHTML&Wordpress

Coder and BiginnerCoder and Biginner

getElementById(

スマートフォン対応にしてみた!

2012-07-19

このブログを以前から、スマートフォン対応にしたいと思っていたのですが、ようやく!!
やってみた(^^)

方法は、Media Queriesを使った方法。
とりあえず、幅480pxで作りました。
CSSに @media screen and ( max-width : 480px )と記入して変更していきます。
あ、HTMLの方にメタタグが必要ですよね。忘れてました。実際に・・・。

作るのは、結構、大変!
何が大変かって、

どの画像をどう使ったのか、もうすっかり忘れ・・・

Chromeには、大変お世話になりました。
少し前なら、ファイアーバグでやってたと思いますが、最近はもっぱらChromeでやってます。
そして思ったこと!
このデザインで組んだ時にやっておくべきだった!

・・・・・と、痛切に思いました。。。。。。。
こんなことになるなら・・・ですね(*^。^*)
複雑に組んであるサイトでは決してないんですけどね・・・

そうそう、floatをリセットするのは、float:none;ですけど、じゃあ、backgroundに指定している画像は?と思って、background:none;を入れたら画像が消えたので、自分でも驚きました。
こんな使い方してもいいのかなぁ????
結局使わなかったですが。

全体的に、リセットの方法がうまくいっているのか良く分かりませんが、一応出来上がりました。

—Comments—

何かあれば、メッセージをどうぞ

Up