モバイルサイトデザインをレスポンシブWebデザインで構築してみました

    こんばんは漢鷹です。
    久々に時間ができたので、なにかコードを書こうと思い、
    前からやっていたモバイルサイトのフレームワークデザイン
    (Javascriptで動的に固定幅デザインを作り出すデザイン)を
    今度はレスポンシブデザイン(どんなデバイスの画面サイズでもページの内容を均一に表示するデザイン)で実現しようと思い書いてみました。

    構築にあたり以前に勉強した際に参考したサイトをご紹介します。
    ゼロから始めるレスポンシブWebデザイン入門 – ASCII.jp –
    こちらのサイトに掲載されている内容は書籍化されているものです。
    じっくりと学習されたい方、オフラインで実践したい方はそちらの購入をするのもよいかもしれません。

    構築したコードは以下の通りです。
    実際に表示させたときの確認は下記リンクから行えます。
    http://kimswebinfo.html.xdomain.jp/webdevelop/responsive_framework/index.html
    ↑PCでご覧になっている方はマウスでブラウザのウィンドウをドラッグし、画面幅を変化させてみてください。
    レスポンシブデザインとなっていることがわかると思います。(背景色や文字の大きさが画面幅に合わせて変わります。)

    今回作成したレスポンシブWebデザインフレームワークはあくまで大枠だけです。
    一般的な内部コンテンツは一切入っておりません。(※)
    ※画面サイズを表示するコンテンツ、画面幅のブレークポイントを示すコンテンツはあります。

    さて、このレスポンシブWebデザインの今後の展開ですが、GoogleMapAPIなどを組み込んで、
    ブラウザでGoogleMapを画面いっぱいに表示し、気に入った場所をブラウザの一時メモリに緯度経度の情報で
    記録して、また開いたときにその場所を呼び出せるようなアプリを作ろうなんて考えています(^^)

    似たカテゴリーの投稿