WebサイトをiPhone/Androidに最適化するには、PCサイトとは別にスマートフォン専用サイトを用意するのがベストですが、コストや時間などの理由で難しい場合があります。そこで今回は、PC向けのWebサイト(HTML)はそのまま利用し、CSSとJavaScriptだけでレイアウトやデザインを変更する「クロスデバイスサイト」の作り方を説明します。題材は、筆者が制作した「iPhone/Android Webサイト制作出張セミナー」のWebサイトです。 このサイトは1ページ完結の告知サイトで、左右2段組みで構成されています。左カラムにはナビゲーションメニューを、右カラムにはメインコンテンツを配置し、ナビゲーションメニューをクリックするとページ内リンクで表示する部分を変えられます。iPhone/Androidからアクセスしたとき、このページを以下のように表示するようにします。 PCサイトのマ
![CSS+jQueryでクロスデバイスサイトを作ろう (1/4)](https://cdn-ak-scissors.b.st-hatena.com/image/square/42164488facfb510301ab671308efefd576e6cba/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2010%2F07%2F28%2F272192%2Fl%2Fb8963325a414ef08.jpg)