タグ
iphoneサイト制作

ソースコピーですぐ使えてスマホ専用サイト作成に便利!PC・スマートフォンサイトの振り分けJavaScript作りました。

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

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

iPhoneサイト(スマートフォンサイト)制作時の画像の表示方法と使用方法についてまとめました

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

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

iPhoneサイト(スマートフォンサイト)制作のためにCSS3でPhotoshopのレイヤースタイルを再現する方法

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

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

iPhoneサイト制作(スマートフォンサイト制作)最適化のために最低限必要なreset.cssをつくってみよう

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

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

画像を使わないでCSS3のグラデーションでスマートフォンサイトの背景パターンをつくろう

スマートフォンサイトを制作する際に、使用する画像の容量を減らすことで最適化につながります。今まで使われていた背景パターンの繰り返し画像も、CSS3のグラデーション表現を使えば、画像を使わずに再現することができます。

今回はスマートフォンサイトで使用できる、CSS3での様々な背景パターンの作り方を紹介します。

12