スライドショーのレスポンシブ 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（代替テキスト）も設定しておくと良いかと思います。

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

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

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

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

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

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

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

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

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

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

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

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

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