中学生のためのレスポンシブWebデザイン 

番外編「質疑応答と「中学生のためのデジタルアニメ入門 Adobe Animate CCを習得しよう!」のお知らせ」



今日は、番外編!

いくつか質問をもらっていたので、紹介したいと思います。

まず、ナビゲーションメニューについて。


質問:
スマートフォンで見たとき、ナビゲーションバーは消えていて、右上のアイコンをタップすると、メニューが出てくるような仕組みって、Dreamweaverで作成できますか?


回答:
はい、できます!
しかも、30秒で。



これから作成していくウェブページは、Dreamweaverの習得とレスポンシブWebデザインの理解が目的だから、とてもシンプルにしている。
だから、スマートフォンで見たときも、ボタンが縦方向に並んでいるだけ。

でも、挿入パネルの中のナビゲーションバーアイコンをクリックするだけで簡単に組み込めます。
Bootstrap(ブートストラップ)っていう部品集があって、それを活用するんだ。

CSSで色を変更したり、ボタンの文字の大きさを変更することも簡単。
見栄えを自由に変えることができますので、一から作るより効率的です。


例えば、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページは、Dreamweaverで作られているのだけど、ナビゲーションバーは、Bootstrapの部品を使っている。



スマートフォンで見ると、アイコンになってるよね。
タップすると、メニューが閉じて、リンク先の場所を表示するんだ。




レスポンシブWebデザインの学習の後に、Bootstrapも学びますので、そのときに詳しく説明しますので。



もう1つの質問!


質問:
ウェブページにアニメーションを入れたいです。クリックすると動いて、またクリックすると止まるようなアニメーションです。


回答:
はい、できます!
この「アニメーション」というのは、ビデオではなく、HTMLやCSS、スクリプトを使ったもの、という解釈でいいかな?


でも、ちょっと条件があるんだ。
Edge Animateというツールを使うこと。
※今月、Animate CCという新しいツールが出る予定なので、今後はこのツールを使うことになるけど、今はまだEdge Animateで。


この動画を見てください。
Dreamweaverで作成したページです。パソコンやタブレットなどでは、アニメーションが表示されるけど、スマートフォンのような小さなスクリーンになると「画像に変わる」仕組みになっている。




広いスクリーンで表示されるアニメーションは、ボタンをクリックして再生、もう一度クリックすると止まります。


作成手順はとてもシンプルなんだ。

(1)Edge Animateでアニメーションを作成
(2)OAMという形式のファイルで書き出す
(3)Dreamweaverでウェブページを表示する
(4)挿入パネルの「アニメーションコンポジション」をクリックして、OAMファイルを選択する


これだけなんです。
たった、これだけの操作で作成することができる。


OAMファイルというのは、HTMLやCSSなどのファイルを1つにまとめたもので、まるで画像を挿入するように扱えるんだ。
今月出る予定のAnimate CCという新しいツールも、このOAMファイルを書き出す機能があるので、同じ手順で作成できます。

Edge Animate、もしくはAnimate CCの基本操作を学習しないといけませんが、Dreamweaverでの作業はほんとにシンプルなんですよ。



ちなみに、「中学生のためのデジタルアニメ入門 Adobe Animate CCを習得しよう!」を予定しているので、楽しみにしていてね。


以上、
番外編でした!


それでは、第15回の投稿をお待ちください。


アニメーションページの完成データは、「Dreamweaver CC 2015 基礎編パート1( http://design-zero.tv/Dreamweaver/ )」の専用ページにアップロードしますので、参考にしてくださいね。



今回のテキストキャスティングは、こちらのオンライン講座の追加コンテンツです

Dreamweaver CC 2015 基礎編パート1



関連記事:
Dreamweaver/Museのカテゴリーページ:



関連コンテンツ:
Muse CC 2015 ビジネスガイドブック




シンクゼロマガジンとは?

筆者:
Creative Edge School Books