Cafi Netつながる情報技術
  1. トップ>
  2. Edge Animate の使い方>
  3. パーセント単位の設定

スライドショーのレスポンシブ Web デザイン

最終更新日 2013/12/20

作成したスライドショーを、レスポンシブ Web デザインに変更する方法です。

「公式サイト:レスポンシブレイアウトの作成 | Adobe TV

パーセント単位に変更

Adobe Edge Animate CC は、パーセント単位の設定にも対応しています。

ピクセル単位だけではなく、パーセント単位でデザインすることで、レスポンシブ Web デザインに対応することができます。

作成したスライドショーを、レスポンシブ Web デザインに変更します。

上の画像のように、Stage の幅(W)を 1200px から 100% に変更します。

最大幅を 1200px(写真の横幅と同じ)に設定します。

写真の幅と高さを設定

タイムラインパネルかエレメントパネルで、写真を選択します。

上の画像のように、div から img に変更します。

幅(W)を 1200px から 100% に変更します。

高さ(H)を auto に変更します。

Alt(代替テキスト)も設定しておくと良いかと思います。

残り3枚の写真にも、同じ設定を行います。

ファイル/パブリッシュ設定から、オプションを選択してパブリッシュします。

publish/web フォルダに作成されたファイルを、Adobe Dreamweaver でリモートサーバーにアップロードします。

今回の解説で変更したスライドショーはこちらです。(ブラウザの幅を狭めると、スライドショーの写真が小さくなります)(Stage の高さは 800px のままです)

レスポンシブレイアウトのプリセット

上の画像のように、レスポンシブレイアウトのプリセットを使用して設定することもできます。

テキストツールと長方形ツール

写真以外のエレメントも、パーセント単位でデザインできます。

上の画像は、長方形ツールで描いた長方形と、テキストツールで入力したテキストです。どちらも幅(W)1200px です。

幅(W)1200px に設定したままでブラウザの幅を狭めると、スライドショーの写真は小さくなりますが、テキストの位置は固定されたままです。

ブラウザの幅に関係なくテキストを中央に配置するには、ピクセル単位からパーセント単位に変更します。

テキストを中央に配置する設定

上の画像のように、テキストの幅(W)を 1200px から 100% に変更します。テキストは、中央揃えに設定します。

長方形も、幅(W)1200px から 100% に変更します。

ファイル/ブラウザでプレビューをクリックします。

ブラウザの幅を狭めると、テキストが中央に配置されていることを確認できます。