簡単なレスポンシブデザインのやり方

Web

昨今のSEO対策にはPC向けではなくスマホ向けにサイトを最適化する必要があります。
そういったデザインをレスポンシブ・ウェブデザインと言います。

WordPressやMovable TypeなどのCMSを使っている場合の方法は非常に簡単で、レスポンシブ・ウェブデザインに対応したテーマを設定することで簡単に設定可能です。細かな調整はそれぞれのデザインに対応したCSSを書き換える事で修正出来ます。

WordPress等のCMSを使用していない場合は、自身で対応するCSSを切り替える事で対応出来ます。
デバイスの解像度による切り替えの場合は、CSSファイルへのlinkタグに条件を加えることで切り替え可能ですが、端末を調べる場合には、JavaScriptやPHPなどの言語によるプログラミングが必要になります。

プログラムの内容としてはアクセスしてきたブラウザのユーザーエージェントから端末情報を取得し、ユーザが何の端末からアクセスしてきたかを判断することで、CSSの切り替えを行ってやります。
ユーザーエージェントからはiPhone、Androidといった文字列が取れるのでその文字列を元に条件文を定義することで切り替えが可能になります。定義するコード量は多くても20行といったところなので、それほど難しくはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA