Web講座

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

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

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

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

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

概要

講義時間 10:00~16:30(昼休憩60分) 5.5時間×1日間
受講料 24,000円+消費税 (教材費込) 優待制度もございます。
難易度 ★★★☆☆初級 前提スキルをご確認ください。

※2014年4月の消費税率変更と受講料について

詳しくは講座開催要項へ

カリキュラム

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

到達目標

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

作例・授業風景


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

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

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

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

担当講師のコメント

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

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

(野中文雄)

受講前提スキル

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

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

講座開催要項

※2014年4月の消費税率変更と受講料について

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

CSS3アニメーションでつくるインターフェイス表現講座:開催日

2016年9月29日(木) 次回開講未定

*1:申し込みがまだ開講最少人数に達していません。最終開講確定日は、開催日の5営業日前となります。

*2:満席に達しています。クリックするとキャンセル待ちフォームへ移動します。3席以上のキャンセル待ちで追加開講の調整をさせていただきます。

  • 3名様以上まとめてのお申し込みで、日程外講習を開催することも可能です
  • 全国対応の出張・訪問研修も可能です 詳しくは企業向け講習をご覧ください
  • 上記日程で都合がつかない、土日に開講してもらいたいという方のために、開講リクエストを承ります

お申込みはこちら

関連講座

ご来場時のお願い

  • 開場は講義開始時間の30分前となります。講義開始5分前までに受付をお済ませください。
  • 遅刻する場合は、必ず事前にご連絡ください。
  • 駐車場・駐輪場の用意はございません。公共の交通機関をご利用ください。
  • 会場内は全面禁煙です。喫煙される方は、携帯灰皿の持参にご協力ください。
  • 教室内の空調が寒く感じられる方へは膝かけをご用意しておりますが、数に限りがございます。冷房が苦手な方は、上着を持参くださるようお願い申し上げます。
  • 受講者様へのお電話の取り次ぎは休憩時間のみとさせていただきます。

開講日カレンダー

Web講座一覧

Web基礎
Web業務ベーシックトレーニング~必須基礎知識編
Web業務ベーシックトレーニング~HTMLマークアップ編
はじめてのGoogleアナリティクス講座
アクセスアップにつなげるSEO基礎講座
Jimdo
無料ではじめるビジネスサイト作成講座
Jimdoテクニカル講座
HTML+CSS
Web業務ベーシックトレーニング~CSS編
HTML+CSS実践トレーニング
HTML+CSSプロフェッショナルテクニック
CSS3
CSS3アニメーションでつくるインターフェイス表現
Adobe Fireworks
Fireworksで学ぶWebデザインの基礎
Adobe Dreamweaver
Dreamweaverベーシックトレーニング
Dreamweaverアドバンストレーニング
HTML5
HTML5 + CreateJSによるリッチコンテンツ作成講座
Javascript
jQueryではじめるJavaScript入門
WordPress
WordPressベーシックトレーニング
WordPressアドバンストレーニング
Adobe Flash
Flashベーシックトレーニング
Adobe Flash ActionScript
ActionScriptベーシックトレーニング(ActionScript 3.0対応)
基礎から学ぶActionScript 3.0