Web講座

CSS3アニメーションでつくるインターフェイス表現

CSS3を使ってJavaScriptなしに動きのあるインターフェイスをつくる

新しいブラウザでCSS3の実装が進み、静的なデザインだけでなく、JavaScriptを使わなくても、ダイナミックでインタラクティブな表現ができるようになってきました。

この講座では、これまでの静的なCSSの基礎を学んだ方に、動きのあるインターフェイスを題材として、CSSの書き方・考え方を解説します。JavaScriptコードは書きません。

CSS3でつくったインターフェイスの作例をもとに、一歩一歩段階的につくり進めながら、視覚的な効果やアニメーションのテクニックについて解説します。要素に影をつけたり、変形したり、3Dの動きを加えるなど、アニメーションが引立つ表現の工夫も織り交ぜました。CSS3の構文はもちろん、その調べ方、注意すべきことがらにも触れます。

概要

講義時間	10:00～16:30（昼休憩60分） 5.5時間×1日間
受講料	24,000円＋消費税　（教材費込）
難易度	★★★☆☆初級　前提スキルをご確認ください。

カリキュラム

プッシュボタンのアニメーション: ボタンの角に丸みを加える／影でボタンを立体的に見せる／マウスポインタを重ねたときのボタンの表現／ボタンに滑らかなアニメーションを定める
アコーディオンメニューのアニメーション: メニューに角の丸みと影を加える／メニューの開け閉じの動きを加える／メニュー項目の間に区切り線を入れる／サブメニュー項目にポインタを重ねたときハイライトさせる
3次元で垂直に回る立方体のメニュー: 要素にポインタを重ねたら水平軸で回す／それぞれの項目に底面を加える
画像にポインタを重ねるとキャプションが表れる: 画像にポインタが重なったらキャプションを示す／画像に色をかぶせる／画像に変形のアニメーションを加える／リンクボタンをアニメーションで加える

到達目標

基本的なCSS3のプロパティや関数を使う
CSS3の構文の基礎を理解する
CSS3で簡単なアニメーションがつくれる
CSS3を使った表現の工夫について知る

作例・授業風景

プッシュボタン（Playボタンを押して再生してください）

アコーディオンメニュー（Playボタンを押して再生してください）

3次元で垂直に回る立方体のメニュー（Playボタンを押して再生してください）

画像にポインタを重ねるとキャプションが表れる（Playボタンを押して再生してください）

担当講師のコメント

CSS3を使うと、ダイナミックでインタラクティブなアニメーションが、JavaScriptコードをまったく書かずにつくれます。また、影をつけたり、2次元や3次元で回転・伸縮・移動などの視覚効果も与えられます。これらをうまく組合わせて使えば、魅力的なインターフェイスの表現が可能です。

この講座は、インターフェイスの作例にもとづいて、ひとつひとつCSSの書き方や組立て方を解説します。構文の基礎だけでなく、表現をつくる考え方も、実習をとおして学ぶことができるでしょう。CSS3アニメーションの豊かな表現力を実感してください。

（野中文雄）

受講前提スキル

下記すべてのPC操作が行える方を対象とした講座です。ご確認ください。
※スキル不足の方は、Web業務ベーシックトレーニング～CSS編からの受講をお勧めします

会社もしくは個人でホームページを作成・更新したことがある
HTMLのソースを読むことができる
CSSを使ってテキストの表示形式を変えられる
セレクタとプロパティおよび設定値がわかる
クラスセレクタの設定ができる

講座開催要項

講義時間	10:00～16:30　5.5時間×1日間
受講料	24,000円＋消費税　（教材費込）
難易度	★★★☆☆初級　前提スキルをご確認ください。
募集人数	10名　（最少開講人数：3名）
担当講師	野中　文雄（のなか　ふみお）
テキスト	オリジナルテキスト
受講OS	Windows 10／Mac OS X　（お申し込み時に選択）
使用ソフト	Adobe Dreamweaver CC（アドビドリームウィーバー CC）：エディタ Firefox（ファイアーフォックス）：Webブラウザ ※その他類似製品、旧バージョンをご利用の方も受講いただけます。
持ち物	ノート、筆記用具データ持ち帰り希望の方は、保存用メディア（USBメモリ推奨）
その他	お申込み前にご来場時のお願いをご確認ください。