impress.jsでド派手なスライドをつくろうぜ！：HTML5アプリ作ろうぜ！（1）（3/3 ページ）

CSS3を活用したオープンソースのプレゼンテーション作成のためのJavaScriptライブラリ「impress.js」でド派手なスライドを作ってみよう

[山崎大助，魚津システム] PC用表示関連情報

LINE

Hatena

前のページへ | 　　　　　　

スライド属性を変更してみよう

　以下のコードはindex.htmlの、divタグid="bored"の次のdiv（スライド）です。

<divclass="step slide"data-x="0"data-y="-1500">
<q>Don'tyouthinkthatpresentationsgiven<strong>inmodernbrowsers</strong>shouldn't<strong>copythelimits</strong>of'classic'slidedecks?</q>
</div>

　class="step slide"の次に「data-rotate-y="90"」を追加すると、スライドは90度反転します。

　<divclass="step slide"data-x="0"data-y="-1500">

　を

　<divclass="step slide"data-x="0"data-y="-1500"data-rotate-y="90">

　に変更して確認してください。いかがですか？実際に確認できたら、今度は、他のプロパティも変更してどのように変わるのか確認してください。何よりも自分の手と目で実際に変更した結果を見ることが大事です。

スライド位置の確認方法

　URLの最後のパラメータ（ファイル名#/以降）を「overview」とすることで全体のスライドの位置を確認できます。位置だけではなく、傾きも確認できますので、スライドの位置を変更する際はパラメータを「overview」にして確認することをオススメいたします。

※（例）：/index.html#/overview

DEMO

　上記内容をベースに修正したDEMOをご確認してください。

DEMO（上記の属性：プロパティを変更しただけ）

　動きがより立体的になっていませんか？

終わりに

　impress.jsは、スライドを動作させる属性（プロパティ）を理解すれば難しいことは何1つありません。慣れないうちはサンプルをベースとして属性（プロパティ）値を少しずつ変更しながら作成する方法がベストです（一度に複数カ所変更した場合どこが間違っているのか判断できなくなるからです）。

　慣れるには、サンプルを触って、変更して、ブラウザで確認を繰り返せばOKです。筆者は1日かかりましたが、スライド作りに慣れている人だったら、もっと早くマスターできるはずです。

　ぜひ、イケてるスライドを作ってカッコイイプレゼンをしてください。

【参考】impress.jsを簡単に作成するGUIアプリ

　筆者のサイトで「impress.js design」というHTML5で作成されたWebアプリを公開してます(ChromeWebストアにもアップしてます)。

　用途は「 impress.js 」をGUIで簡単作成できるツールです。簡単にスライドの位置・プロパティを設定できます。文章変更やDrag&Dropでの画像挿入も簡単になっていますので、是非一度使ってみてください（Drag＆Dropでの画像の挿入は、Chromeのみ対応です）。HTML5・JavaScript・CSS3でここまでのアプリが作成できます。参考にしていただければ幸いです。

著者紹介

山崎　大助（魚津システム　所属）

現在はデジタルハリウッド講師を務める他、SoftwareDesign、日経ソフトウエア、ITPro、WebCreatorsなどのWeb業界誌での執筆。日経PC21「名作フリーソフトを訪ねて」では自ら開発した「AIRNote！」が選ばれ掲載。最近ではHTML5やPHP関連のセミナー・勉強会を開催。＠IT「HTML5アプリ作ろうぜ！」の連載記事を執筆。

「次回」へ

「HTML5アプリ作ろうぜ！」バックナンバー