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カラムの状態に切り替わることが確認できます。
