PCとスマートフォンで違うページを閲覧させたい場合は、ユーザーエージェントを判別して切り替えることができます。メディアクエリなどを使用したレスポンシブWEBサイトの場合は1ソースでそれぞれのデバイスに振り分けますが、PCサイトとスマホサイトで内容なども変更させる場合は、それぞれサイトを作って振り分ける必要があります。

ユーザーエージェントを判別するには、PHP・JavaScript・.htaccessなど様々な方法がありますが、今回はJavaScriptを用いた方法をご紹介させて頂きます。

スマートフォンサイトとPCサイトの振り分けを考える上で、ひとつの選択肢となる「レスポンシブWebデザイン」。

今回はゼロからはじめるレスポンシブサイトを作るための勉強として、CSS3のメディアクエリを使用したデモソースとチュートリアルをつくりました。まずはXHTMLで作成しますのでHTML5の新要素が不安な方もわかりやすいと思います。

スマートフォンサイトでは可変を前提とした画像の表示方法から、背景画像にサイズを指定する方法まで、PCサイトよりも幅広い画像の表示方法があります。

今回は、スマートフォンサイトを制作する上で、知っておいた方がよい画像の表示方法と、その使用方法をまとめました。

スマートフォンサイトを制作する上で便利なCSS3は、それぞれのコードの使い道を知れば必要最低限の画像でスマートフォンサイトのデザインをコーディングすることができます。

今回はスマートフォンサイトを制作する上で便利なCSS3の記述を、サイトデザインでよく使われるPhotshopのレイヤースタイルを再現する方法として一通り紹介します。

できるだけスマートフォンブラウザのデフォルトスタイルを有効に使い、reset.cssの記述は必要最低限に減らして、スタイルの読み込みスピードを上げることが、スマートフォンサイトとして最適化されたスタイルへとつながります。

そこで、スタイルシートの無駄な記述を省略するために、スマートフォンサイトに最低限必要なreset.cssの記述を紹介します。