スマホサイト向けスタイル★スマホ向けCSSファイル前回までに、パソコンで閲覧した場合とスマートフォンのような小さな画面で閲覧した場合とで、適用するスタイルを振り分けられるようになりました。今回は、スマートフォン向けのスタイルを指定しましょう。{background-color:red;}というスタイルが記述されています。このh1要素の背景を赤くするスタイルは表示テスト用なので削除します。base_sp.cssを以下の内容に書き換えてください。コピーしてimagesフォルダの中に追加してください。画像ファイル:icon_menu.pngbase_sp.cssの変更を保存したらブラウザで開いて確認してみましょう。ブラウザのウィンドウをリサイズして、横幅が800ピクセル以下になった場合にスタイルが切り替われば成功です。変更前を確認するスマートフォンでは以下のような表示となります。上記のCSSソースで使用されているスタイル指定のひとつひとつは、これまでに学んだものばかりです。スマートフォンではこのようなCSSソースが適しているのか、確認していきましょう。縦方向のスクロールのみで閲覧できるようにするパソコン向けサイトでは、広い画面を効率的に使えるように、floatプロパティで段組みレイアウトにしていました。スマートフォン向けサイトでは、この段組みに関するスタイルをリセットして、すべて縦方向にスクロールするだけで閲覧できるようにしています。横幅を100パーセントにして画面全体を使う横幅を100パーセントにして、スマートフォンの狭い画面を最大限に利用できるようにしています。画像については、スマートフォンを縦や横に回転させたときに表示サイズが変わると閲覧しづらいと考えて、横幅を300ピクセルで固定しています。一例に過ぎない上記のCSSソースは、あくまでもスマートフォン向けスタイリングの可能性のひとつに過ぎません。今後ウェブサイトを作成する際には、スマートフォンではどんな表示にすれば見やすくなるか検討して、よりよいスタイリングを目指してください。ここまでで、トップページ(index.html)のスマートフォン対応が完成しました。