[CSS]スマホ対応のホームページの作り方

ホームページをスマホ対応させました。
http://magicberry.nobody.jp/

考えなければいけないのは、
・画面サイズ
・ＰＣサイトとの関係
でしょうか。

１．画面サイズ
ウチのページ＆ブログの４ヶ月間の解析結果を見ると。

320×568px	iPhone5	56回
375×667px	iPhone6	29回
360×592px	android系	18回
320×480px	iPhone4など	11回
360×640px	android系	11回
414×736px	iPhone6Plus	2回

と、見事にバラバラですが、横幅は、320pxを最低値と考えれば問題なさそうです。
これより大きい場合も考慮して、サイズを固定せず

width:100%;

のように指定することにします。


２．ＰＣサイトとの関係
一昔前はＰＣサイトとケータイサイトを別にするのが主流でしたが。
はっきりいって、両方修正するの面倒くさい。
なので、ＰＣサイトとケータイサイトを、共通のひとつのコードで表示できるようにします。
いろいろ模索した結果、単純に幅が一定値以下だったら、動的にレイアウトが変わるようにしました。

ここで使えるのが@media。
ブラウザのサイズなどの条件で、場合分けして書くことができます。
後は、displayでレイアウトを変えたり、表示・非表示を切り替えたらうまくいきました。
cssのコードはこんな感じ。



/* スマホ・PC共通の記述 */
div.main
{
    width:100%;
}

div.menu
{
    display: block;            /* ブロック表示でメニューを上に表示 */
    width:100%;               /* 横幅めいっぱい表示 */
}

/* 右列 */
div.right
{
    display: none;    /* 非表示 */
}

/* PC用ページ */
@media all and (min-width: 960px) {
    /* 横幅が960px以上だったら */
    div.main
    {
        width:950;
    }

    div.menu
    {
        display:inline-block;        /* インラインブロックでメニューを左に表示 */
        width:130px;
    }

    /* 右列 */
    div.right
    {
        display:inline-block;        /* インラインブロックで表示 */
    }
}

メリットは、PC上で動作確認ができること。
ブラウザの横幅小さくするだけで、スマホ向けの表示に切り替わります。
デメリットは古いブラウザが対応してないこと。
未確認ですが、おそらく、古いブラウザだと@media内の記述が無視されて、ＰＣでもスマホ向けのサイトだけが表示されるかと。