タイルデザインからモバイルデザインに変化するWebフレームを作ってみました~HTML5+CSS3 編~

    こんばんは。漢鷹です。

    さて、最近またHTML5系の熱が上がってきて、いろいろ作り始めたわけですが・・・。とあるWebサイトを教えてもらって、そのサイトのデザインがなかなか面白そうだし、レスポンシブデザインになっているなぁということで、参考にして作ってみました。

    なお、2時間ほどの突貫工事で作ったコードのため、あっちこっち至らない点がありますが、作りこめばきれいなサイトになります。

    教えてもらったサイトは以下のものです。
    チームラボ / teamLab

    このサイト、モダンデザインでかつ、フロントサイドのJavascriptが凝った作りをしていて面白かったです。
    サイトのコードを読んで、再現性を高めようとしましたが、どのソースを取っても情報量が多く、とても突貫工事では作れませんでした(笑)

    ということで、以下の観点に基づき必要最低限なデザインで作成をしました。

    1. レスポンシブデザインのブレークポイントは画面幅640px
    2. ブレークポイントの制御は「min-width:640px」のモバイルファースト方式
    3. 元のサイトのブレークポイントの制御は「max-width」のデスクトップファースト方式であるので、等価変換する
    4. 極力ブラウザの開発ツールで画面幅を変化させたときの挙動に気を付けながらCSSを肉付けしていく

    デザインを把握するためにはブラウザ開発ツールをどれだけ使いこなすかがポイントとなってきます。
    理由は単純で、

    1. CSSのプロパティの力関係や上書きの順番などをパッと見で判別できる
    2. 画面幅を変えたときにメディアクエリを使って画面のブレークポイント制御でCSSのプロパティを上書きしている
    3. モバイルサイトビューモードでモバイルOSごとのレスポンシブデザインの動作試験ができる
    4. コンソール出力やブレークポイント設置によるJavascriptデバッグができる
    5. 開発ツール上で一時的にCSSプロパティやJavascriptのコードを追加して動作試験することができる

    実際に見て触って結果を直接確認できるのがブラウザの開発ツールなのです。便利ですよね!?

    参考になるブラウザ開発ツール解説サイト
    Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能
    ※漢鷹はGoogleChromeの開発ツール利用がメインなので、このサイトとなっておりますが、Firefox、IE、Safari、Operaなど主要なブラウザの開発ツールも似たり寄ったりで、IE以外はほぼ使い勝手が変わりませんのでご安心を。

    作ったページを下記URLから確認することが可能です。
    http://kimswebinfo.html.xdomain.jp/webdevelop/tile_responsive/index_v0.1.html

    作ったソースは以下の通りです。

    似たカテゴリーの投稿