SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

次のページ
Edge Reflowで生成したCSSをサイトに反映する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

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

株式会社イノーヴWEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7012 2013/09/27 10:36

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング