[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内の記述が無視されて、ＰＣでもスマホ向けのサイトだけが表示されるかと。

[プログラム]ニコ動デビューへの道・その１

今週は、動画の投稿方法をあれこれ模索していきます。



■ステップ１　一枚絵＋BGMの動画を作る

とりあえず、イラストと、曲はできているので。
イラストをずーっと表示させっぱなしにして。
BGMとして曲を流す、そんなカンタンな動画を作ってみます。

使用ソフトは、Windows ムービーメーカー。
画像とmp3読み込んだら、普通にすんなりできたので割愛します。


■ステップ２　歌詞を表示する

こんなカンタンにできるなら、歌詞くらいは表示させたいです。
ってわけで、ムービーメーカーで文字が表示できないか試してみましたが。
うーん、微妙。
改行が勝手に入るのと、フォントサイズを指定できないのが致命的。
これじゃ文字が入りきらないし。

ってわけで、画像にあらかじめ文字を入れておくことにします。
画像を３０枚コピーして。
１枚１枚文字を貼り付けていく。
……そんなメンドい作業やってられるか！

プログラマたる者、メンドいことはプログラムでやれ。
ってわけで、Microsoft Visual C# 2008 Express Editionをダウンロードして。
カンタンなツールを作ることにしました。

以下、サンプル。

            //画像の読み込み
            Image rImage = Image.FromFile( "C:\\img\\pink.jpg" );

            //描画用クラス
            Graphics rGraphics = Graphics.FromImage(rImage);

            //アンチエイリアス
            rGraphics.SmoothingMode = SmoothingMode.AntiAlias;

            //フォント
            Font rFont = new Font("ＭＳ Ｐ ゴシック", 30F);
            //色／ピンク
            Color rColor = Color.FromArgb( 255, 192, 192 );
            //ブラシ
            SolidBrush rBrush = new SolidBrush( rColor );

            // 文字列を描画する
            rGraphics.DrawString( "桜音", rFont, rBrush, 50, 300 );
           
            //画像の保存
            rImage.Save( "C:\\img\\pink2.bmp", System.Drawing.Imaging.ImageFormat.Bmp );

８行で書けたよオイ。C#メチャクチャカンタンだなー。
あとは、歌詞をstringの配列に格納して、for文あたりで回せばＯＫ。
センタリング処理は、先に幅を計算しないといけないんで、若干メンドイかも。