タグ

2014年2月25日のブックマーク (1件)

  • Adobe Edge Reflowで作るレスポンシブデザイン向けプロトタイプ入門

    Adobe Edge Reflowの基的な使い方 それではさっそくAdobe Edge Reflowを使って、下記リストのような簡単なプロトタイプを作ってみましょう。 PCブラウザを基としたデスクトップファーストでデザイン ブレークポイント(CSSを切り替える条件となる幅)は、520pxと960pxの2つ フォームの送信ボタンをクリックすると、送信完了ページにへジャンプする Adobe Edge Reflowでは、カンバスの右側中央にあるハンドルをドラッグして、カンバス幅を調整し、いろいろな画面サイズでどのように表示するかを確認しながらデザイン作業することができます。 今回は、図2~4のように画面サイズが960px以上の場合はコンテナの幅を960pxに固定、959px以下の場合は可変で動くデザインでプロトタイプを作成します。デフォルトの設定では、コンテナの幅は常に画面サイズに対して10