スマートフォン対応しました

本サイトも、ついにスマートフォン対応しました。まだ、調整中のところもありますが、少しずつ良くします。

スマートフォン対応前

スマートフォン対応のサイトを作成しないと、以下のように縮小表示されてしまいます。横幅、950px相当のサイトを、縮小して表示します。

スマートフォン対応後

スマートフォンに対応したサイトだと、iPhoneの場合320px。Galaxy S3の場合360pxとして表示します。

最新型のスマートフォンの場合は、iPhoneの場合640px。Galaxy S3の場合720pxですが、ブラウザ上の扱いは、その半分です。理由としては、旧機種との互換性と、本来の解像度で表示しても、字が小さすぎて読みにくいためです。

横で表示するとパソコン版と同じ見た目に

横で表示するとパソコン版と同じ見た目になります。

スマートフォン対応は、とっても単純
専用のCSSを準備して、2行を追加するだけ

スマートフォン対応と言うと難しいと、思われるかもしれませんが、とても単純です。

その1

スマートフォン本来の解像度として認識させる。iPhone 4だと320px。Galaxy S3だと360pxとして認識される。

その2

480ピクセル以下だと「smartphone.css」を適用させる。スマホは、このスタイルシートが適用されます。

ただ、Galaxy S3を横に向けると、640pxです。(実解像度、1280px)。よって横にするとスマートフォン用の見た目は、適用されないことになります。

運営しながら対応できる

「その２」から対応し、「その１」は、一番最後に行います。

「その２」のみを実施すれば、パソコンで、横幅を480以下にするだけで、スマホの場合の画面をパソコンで確認できます。(IE8以下を除く)

完成したら、「その1」を実施します。「その１」を実施して初めて、スマートフォンで「smartphone.css」が適用されます。

興味のある方は、ぜひお試しください。

スマートフォンがなくても、スマホ用サイトが作成できます。

横幅を小さくしたときに見た目を変える技術を、レスポンシブWebデザインといいます。興味のある方は、ぜひGoogleで検索して調べてください。

スマートフォン対応が記載されている本

私が購入した本でスマホ対応について記載されているものを3冊紹介します。どの本も、とても良い本です。エディタ派の方は、「1」を。Wordpress派の方は、「2」を。Dreamweaver派の方は、「3」になるでしょう。

私は、「3」を使って、Wordpressサイトを変更しましたので、好みで選びましょう。

１．HTML5 & CSS3ステップアップブック

6章に、スマートフォンおよびタブレット対応方法について記載されています。私のやり方と同じレスポンシブWebデザインによる対応です。

２．WordPress 3.x　デザイン＆カスタマイズ

4章に、スマートフォンおよびタブレット最適化について記載されています。レスポンシブWebデザイン。プラグインによる専用サイトの作成方法の2種類の作り方が書いてあります。

３．Dreamweaver+HTML5&CSS3レッスンブック

7章に、レスポンシブWebデザイン。可変グリッドレイアウトによるスマホ対応。jQuery Mobileを使用したスマホ対応の３種類が記載されています。

スマートフォンが流行したのは、この１年間です。まだまだ、スマートフォンに対応したサイトが少ないのが現状です。

スマホの対応方法について記載されている本も少ないですが、これからより重要になることは、間違いないですね。

山崎信悟

マイクロソフト認定トレーナー。専業ブロガーになり1年経過(別名:ひきごもり)。ブロガーなのに誤字脱字王。滑舌が悪いのにYouTuber。『自己紹介』