ホームページをスマホ対応する４つの方法
tasanホームページ（ウェブサイト）をスマホ対応する４つの手法についてメモ。
メディアクエリ
現在最もスタンダードな実装方法で、ブラウザの画面幅を検知してCSS側でスタイルを変更する方法です。
HTMLを1ソースでコーディングできるため管理しやすいのがメリットですが、PCとスマートフォンで極端にレイアウトを変えることは困難です。
ユーザーエージェント判定
PHPやJavascript等のプログラム言語でアクセスしてきた端末情報（ユーザーエージェント）を取得して表示を切り替える方法です。
PCとスマートフォンをまったく別のデザインにできるのがメリットですが、HTMLを別に用意するため管理が煩雑になりがちです。
ワードプレスではデフォルトでPCとスマートフォンを判定するタグが用意されています。
メディアクエリ＆HTML
PC表示用、スマートフォン表示用にクラス分けされたHTMLを用意し、CSSのメディアクエリで表示・非表示をコントロールする方法です。
HTMLは複雑になりますがユーザーエージェントを使わずに、PCとスマートフォンページを全く異なるレイアウトにすることができます。
自動変換ツール
JavaScript等を使って既存のホームページを自動的にスマートフォン表示に最適化する方法です。
制作者にとっては手軽ですが表示の度に変換処理が走るため重くなるのと、導入後にはこの変換ツールを念頭にページを編集する必要があるので管理がしづらくなります。
またこのツールに不具合があると一気にサイトのデザインが崩れることも懸念点です。
長期的に運用するサイトでは安易に使わない方が無難です。
基本的にはCSSのメディアクエリのみで表示を切り替え、HTMLを1ソースとするのが昨今ではスマートな作り方になるかと思います。
ただこの作り方で制作を依頼した場合には、可変な画面幅にコンテンツが影響を受けるため、テキストの折り返し箇所や、画像の上に乗ったテキストの配置・・・などの細かい調整は難しくなることは理解しておく必要があります。
基本的には「見せるコンテンツ」と「読ませるコンテンツ」を分けて考えて、「見せるコンテンツ」は画像などで作り、「読ませるコンテンツ」はテキストで実装して細かい見栄えにはこだわらないのがよいと思います。
Follow me!
