Fields』のブログです。ないブログに表示されています。新しい記事を書く事で広告が消えます。(Wed)[CSS]スマホ対応のホームページの作り方ホームページをスマホ対応させました。・画面サイズ・PCサイトとの関係でしょうか。1.画面サイズウチのページ&ブログの4ヶ月間の解析結果を見ると。2回と、見事にバラバラですが、横幅は、320pxを最低値と考えれば問題なさそうです。これより大きい場合も考慮して、サイズを固定せずwidth:100%;のように指定することにします。一昔前はPCサイトとケータイサイトを別にするのが主流でしたが。いって、両方修正するの面倒くさい。PCサイトとケータイサイトを、共通のひとつのコードで表示できるようにします。模索した結果、単純に幅が一定値以下だったら、動的にレイアウトが変わるようにしました。ここで使えるのが@media。ブラウザのサイズなどの条件で、場合分けして書くことができます。後は、displayでレイアウトを変えたり、表示・非表示を切り替えたらうまくいきました。cssのコードはこんな感じ。*/}}メリットは、PC上で動作確認ができること。ブラウザの横幅小さくするだけで、スマホ向けの表示に切り替わります。デメリットは古いブラウザが対応してないこと。未確認ですが、おそらく、古いブラウザだと@media内の記述が無視されて、PCでもスマホ向けのサイトだけが表示されるかと。