Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

レスポンシブWebデザインのモックアップを簡単に作成できる「Adobe Edge Reflow」の使い方

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/27 14:00
目次

Edge Web Fontsでロゴタイプを配置

 Edge Reflowでは、テキストオブジェクトのフォントパネルにAdobe Edge Web Fontsが統合されています。ヘッダのロゴタイプにWebフォントを指定してみましょう。テキストを配置したら、StylingパネルのTypefaceの欄にある「T+」というボタンをクリックすると、下図のように使用可能なWebフォントの一覧が現れます。

 Adobe Edge Web Fontsは、Adobeが提供するプレミアムWebフォントサービス「Typekit」によって提供されています。世界中の商用Webフォントライブラリにアクセスでき、Google Webフォントも提供されています。今回はGoogle Web FontにもあるOpen Sans Condensedというフォントを選択してみました。下図はCmd+Option+Sでブラウザプレビューした画面です。

タブレット以下のレイアウトを最適化

 上部の768に設定してあるブレークポイントのバーをクリックすると、グリッドエリアが768pxに動きます。この状態で各要素の配置やスタイルを切り替えていきましょう。サンプルではコンテンツの3ブロックが768px以下の場合は、横幅いっぱいになるようにしました。

 ブレークポイントごとに各要素のパネルのプロパティを切り替えるだけで、このようにモックが出来上がってしまいます。ブラウザのウィンドウを768px以上に広げると、元の3カラムの状態に切り替わることが確認できます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 又村 洋史(マタムラ ヒロフミ)

    株式会社イノーヴ WEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。個人ブログ「Deconcepter」ではWEBに関わる人が押さえておきたい情報の...

バックナンバー

連載:Adobe Developer Connection

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5