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円+消費税 (教材費込) ※消費税法の改正に伴うお申し込み時の注意点 |
|
難易度 | ★★★☆☆初級 前提スキルをご確認ください。 | |
募集人数 | 5名 (最少開講人数:2名) | |
担当講師 | 野中 文雄(のなか ふみお) | |
テキスト | オリジナルテキスト | |
受講OS | Windows 10/Mac OS X (お申し込み時に選択) | |
使用ソフト | Adobe Dreamweaver CC(アドビ ドリームウィーバー CC):エディタ 持ち物 | ノート、筆記用具、A4サイズのテキストが入る袋 データ持ち帰り希望の方は、保存用メディア(USBメモリ推奨) |
その他 | お申込み前にご来場時のお願いをご確認ください。 |
CSS3アニメーションでつくるインターフェイス表現講座:開催日
2016年9月29日(木) | 次回開講未定 |
---|
*1:申し込みがまだ開講最少人数に達していません。最終開講確定日は、開催日の5営業日前です。
*2:満席に達しています。クリックするとキャンセル待ちフォームへ移動します。3席以上のキャンセル待ちで追加開講の調整をさせていただきます。
関連講座
ご来場時のお願い
- 開場は講義開始時間の20分前です。講義開始5分前までに受付をお済ませください。
- 遅刻する場合は、必ず事前にご連絡ください。
- 駐車場・駐輪場の用意はございません。公共の交通機関をご利用ください。
- 会場内は全面禁煙です。喫煙される方は、携帯灰皿の持参にご協力ください。
- 教室内の空調が寒く感じられる方へは膝かけをご用意しておりますが、数に限りがございます。冷房が苦手な方は、上着を持参くださるようお願い申し上げます。
- 受講者様へのお電話の取り次ぎは休憩時間のみとさせていただきます。