忍者ブログ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

HTML5 Makerを使って楽しくスライドをつくる

HTML5 Maker.com それはとっても素敵な私のお気に入りサイト。
HTML5を勉強するのにはここが一番カンタン。 アーティスティックなアニメーションがすぐに創れる♡
作ったらファイルをダウンロードが出来て、自分のサーバーにアップしたりする事ができて 楽しいです。
フリープランでは、Download / Share / Embedを使うと楽しいです。 ダウンロードできるファイルの種類が選べて、また便利!
javascriptかhtml(5)か、はたまたflashか・・・。 Editor画面も英語ですが、本当に2,3度操作したら使い方が解ってくると思います。
文字に影をつけたりするのも、イラレで画像作成してコーディングしていたら一日かかるんです、 その手間を思うと、html5 Makerは本当にすごいんです !
サンプルページ


オリジナルチュートリアルはこちら

今日はこの間の続きで、Responsive Websiteのコーディング方法までの動画を創ってみました☆


・・・見えにくくってごめんなさい

ポイントはEmbedでResponsiveにチェックするっていう所です。

HTML5はスマホに対応するレスポンシブなので、なぜにわざわざ?という疑問が湧かないとは言い切れません。そして、見逃してしまいがちなんです。(少なくとも私は)

で、Responsiveにチェックすると、JavaScriptらしきコードが追加されたものが提示されます。

で、それをファイルに追加して、終わりです

それとは別で、ダウンロードしたフォルダは単なる数字の羅列です。
しかもhtmlファイルが3個もあり、どれを開いても同じ物が表示される。。

これは不思議。じっくり観察して階層を理解する必要があるでしょうのでしょう、きっと

でも、1ページしか使わないんだから、1ページの階層さえ解っていれば何とかなるはず。という理屈でこのビデオは進んでいっています

あと、もう一つ気をつけるとしたら、Sign Inです

Sign Inする時にHTML5マジックにかかると、前に創ったファイルをいくら残しておいても
たどり着けない場合があります。

その場合でも、あきらめないで欲しいんです! Create Animationをクリックしてみてもらうと、すぐにEditor画面に入れるんです。

一から創り直さないといけないのは面倒ですが、慣れるまではこのやり方を頭の片隅にいれておくと、使いこなせる様になります☆

Anonymousアカウントで入ると、HTML5 Makerのロゴが入ってしまうんですがフリープランなので、仕方がありませんね。。

ちなみに自分のメールアドレスやソーシャルアカウントを利用して、創った場合にはサンプルの様にロゴが入りません。
ビデオで作ったWebページの Sample Page

引用元

PR