CSS3と未来のWebデザイン実践講座

概要

CSS3と未来のWebデザイン実践講座は、CSS3やHTML5を使ったホームページを実習で作成して身につける、実践型講座です。

配布資料のプレーンなHTMLからスタートして、CSSのコーディングによりデザインを完成させます。

この講座で、できること

CSS3を中心とした、今主流のテイストのデザインを学べます。
HTMLやCSS2.1の基本はもとより、CSS3やHTML5の機能を使ったサイトを作成できます。
トレンドだけでなく、どんなテイストでも質の高いデザインができることを目指します。

こんな方におすすめします

CSS2.1でコーディングしてきたので、最新のCSS3にチャレンジしたい。
CSS3の基本スキルがあり、さらにステップアップしたい。
CSS3も含めた「将来のWebデザイン」を勉強したい。
CSSの書き方だけではなく、自身のデザインセンスも今より向上させたい。

こんなデザインが作れます！

流行の技術CSS3で、質の高いデザインを作ろう！

: 講座のサンプル
（上記画像のPDF版）; PDF／693KB

色使いやレイアウトに自信のない方は、この講座で“今、主流のデザイン”を習得！

CSS3と未来のWebデザイン実践講座は、CSS3になり便利になった「半透明」や「グラデーション」「ボックスレイアウト」を学習し、今より少しでもセンスのある“デザイン力”を身につけていただくことが目的の、実習で学ぶ制作講座です。

近い将来主流となるであろう「HTML5 API」も、デモ感覚で体験していただけます。

おもにCSSを使ったWebデザインの講座ですが、コーディングやテクニックだけを学習する講座ではありません。読みやすい・わかりやすい配色や影の付け方など、デザインセンスを身につけていただくことも目的としています。

CSS3やHTML5を使ったサイトをデザイン

CSS3（カスケーディングスタイルシートレベル3）が登場するまでは、JavaScriptやなどを駆使してデザインを組み立てていました。

しかしCSS3を利用すれば、不要なコードやスクリプトを使うことなく、表現力の高いデザインやインターフェースを作成できます。

実習では、下記を中心にCSS3を学びます。

角丸／影／グラデーション表現を使い、画像を使わないナビゲーション
JavaScriptを使わないで作るインターフェース
- CSS3 ナビゲーションサブメニュー
- CSS3 タブ切り替えウインドウ
- CSS3 折りたたみメニュー
フォームのデザイン
テーブルデザイン

実際に作成しながら習得しますので、CSS2に比べ「いかにスマートかつエレガントに作成できるか」をご自身の手で・目で実感できる講座です。

本講座はCSS実践講座となります。CSSを使用したWebサイトの制作を未経験の方は、まずはレイアウト自由自在！Dreamweaver CS5 CSSデザイン手法講座などでスタイルシートを習得のうえ受講ください。

コースカリキュラム

CSS3のプロパティを使ってWebページを作成

CSS3と未来のWebデザイン実践講座では、以下のCSS3プロパティなどを実践的に使用して、Webページを完成させます。

: 講座の目次; PDF／56KB

デザインとは？
CSS3を使ったインターフェイスデザイン
光と影を観察したうえでボタンを作成する実習（border-radius、box-shadow、text-shadow、gradient）
グラデーションに対応していないIE9、Operaへの対応
ブラウザごとの表示結果の差異
新しくなったセレクタ
擬似クラスと擬似要素（nth-child、nth-of-type、last-child、target、属性セレクタ）
transitionを使ったアニメーションの基礎（transition、opacity）
変形（transform、translate、scale、rotate、skew、matrix）
新しくなったボックスレイアウト（display: box、box-align、box-pack）
簡単なJavaScriptでHTML5新要素を操作（canvas、video）
ロゴにSVGを使用する
サンプルによるデザイン実践、サイト制作

CSS3の仕様やブラウザーの対応状況などにより、内容が一部変更される場合があります。

講座では操作するソフト（テキスト編集ソフト）としてAdobe Dreamweaver CS5を使用しますが、基本的な機能のみ使用しますので、他ソフトでも同等の操作は可能です。

CSS3やHTML5は策定中の仕様のため、将来使用できない可能性のある機能も講座に含まれます。あらかじめご了承ください。

講師

秋葉秀樹（あきばひでき）

デザイナー

広告業界で20年間主にデザイナーとして従事し、グラフィックデザインから3DCGや映像制作など様々な表現手段を持つ。

現在はデザイナー向けの講演活動に加え、デジタルハリウッドやAdobe認定校にてグラフィックデザインのトレーナー活動、またWeb Designing誌や日刊デジタルクリエイターズ等への寄稿など執筆活動も行っている。

現在、マイナビ発行の「Web Designing」誌では、CSS Labにて毎月連載執筆中。

著書

CSS3デザインプロフェッショナルガイド（マイナビ）
Facebookページプロフェッショナルガイド（マイナビ）
10倍ラクするIllustrator仕事術（技術評論社）

公演／スピーチ

2011年2月 CSS Nite in OSAKA with マイクロソフトセミナー（大阪）
2011年4月 UNTITLED!!!!!!!!（大阪）
2011年5月 DTP Booster（東京）
2011年6月 CSS3デザインプロフェッショナルガイド出版記念セミナー（東京）
2011年11月 CSS Nite in OSAKA（大阪）
2012年2月まにまにカレッジ（大阪）
2012年2月 CSS Nite in FUKUI（福井）

スケジュールにより講師が変更になる場合があります。あらかじめご了承ください。

FAQ

受講前

HTMLのことを知りませんが、受講できますか。: いいえ、CSSの基礎知識が必要ですので、申し訳ありませんがHTMLの知識がない場合は厳しいと思われます。まずはプロの使い方を学ぶ Adobe Dreamweaver CS5 入門講座で、HTMLやCSSの基礎を習得してください。
CSS3でレイアウトをしたことありませんが、受講できますか。: はい、前バージョンとなるCSS2（CSS2.1）での制作経験があれば大丈夫です。
Dreamweaverのスタイル機能を使って、コードを入力しますか。: いいえ、本講座ではコード入力画面で直接CSSを編集します。Dreamweaverはテキスト編集ソフト（エディター）の役割として使用します。

講座全般や受講環境については受講FAQ（よくあるご質問）にてご説明しています。合わせてご確認ください。

フォローアップ

m-Schoolとは？

m-School（エムスクール）は、Adobe製品を中心とした最新のIT技術を習得できる、プロフェッショナルのための研修トレーニングセンターです。

詳細ははじめての方へ m-Schoolのご案内にてご紹介中です。

短期集中で受講

講座ごとにお申し込みいただく短期集中システムのため、入学金は必要ありません。

「あなたが今、必要とする講座」に、すぐに受講できます。

アドビ認定トレーニングセンター

インストラクターの資格やトレーニングコース、設備のすべてにおいて高い水準を維持していることが認められ、アドビ認定トレーニングセンター（AATC：Adobe Authorized Training Center）として認可を受けています。

駿台予備学校でおなじみ、駿河台学園が運営

駿河台学園グループのIT教育専門会社であるSATTが運営しています。教育専門機関ならではの、質の高い「教育サービス」を提供する「安心」と「信頼」をご提供します。

日程・お申し込み

CSS3と未来のWebデザイン実践講座
講座情報	講座番号	DWAR
	講座名	CSS3と未来のWebデザイン実践講座
	講座種別	m-School 実践
	実習	パソコンを使った実習があります
	カテゴリー	Web制作
	企業研修	出張講座、貸切講座ともに可能です m-Schoolの企業研修
講座日数	日数	1日
	受講時間	13:00～18:00 （12:40より受付）
	総時間	5時間（1日5時間×1日間）
	再トレ	対応講座です再トレとは
開催場所	会場	m-School （エムスクール）〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階 m-Schoolへのアクセス・地図
	PC環境	Microsoft Windows XPまたはVistaを使用します（日程により環境が異なります）。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。
	持参物	受講証（お申し込み時にメールでお送りします）筆記用具 USBメモリー（講座で作成したファイルをお持ち帰りになる場合）
価格	受講料	36,750円（税込）
	セット割	対応していませんセット割とは
	早割	対応講座です早割とは
	お支払い	お振り込み
	特典	講座テキスト教材データ CD-ROM

前提条件

講座を受講するうえで、下記の知識・経験が必要になります。

前提条件
基本操作	下記のようなWindowsの一般的な操作ができる。マウス操作（クリック、ダブルクリック、ドラッグ）フォルダ操作（作成、名前の変更、コピー）テキスト操作（入力、フォント変更、フォントサイズ変更）
プログラミングの経験	必要ありません。
デザイン制作の経験	Adobe Photoshop、Fireworks、Illustratorなどのデザインツールを、少しだけでも触ったことがある程度でOKです。
ネットワークの知識	必要ありません。
Webページ制作の経験	HTMLとCSS2のソースコードをある程度理解できている。 XHTMLとCSSを使用したウェブサイト制作の経験がある。 CSSでpositionプロパティのrelative／absoluteの使い方を理解している。 CSSでfloatプロパティを使った横並びレイアウトが確実にできる。
	実習はキーボードからの文字入力が多くなります。
	講座では操作するソフト（テキスト編集ソフト）としてAdobe Dreamweaver CS5を使用しますが、基本的な機能のみ使用しますので、他ソフト（Codaなど）の経験があれば問題ありません。

受講前・受講後にオススメの講座
この講座を受講する前にオススメ	HTMLやCSSの知識が不安な方は、まずはプロの使い方を学ぶ Adobe Dreamweaver CS5 入門講座で、基礎を習得してください。
CSSを使用したWebサイトの制作を未経験の方は、レイアウト自由自在！Dreamweaver CS5 CSSデザイン手法講座でスタイルシートを習得のうえ受講ください。
CSS3の基礎情報や、iPhoneサイトの作り方などを学んでおきたい方は、ここがすごい！CSS3入門講座がオススメです。

開催スケジュール

開催スケジュールページにて、すべての講座のカレンダーが確認できます。

お申し込みの前に受講規約（PDF：116KB）をご一読いただき、ご了承のうえ受講ください。よろしくお願いいたします。

講座お申し込みフォームへ

関連リンク

CSS3と未来のWebデザイン実践講座
講座種別	m-School 実践
実習	パソコンを使った実習があります
カテゴリー	Web制作
日数	1日
受講時間	13:00～18:00 （12:40より受付）
会場	m-School （エムスクール）〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階 m-Schoolへのアクセス・地図
受講料	36,750円（税込）
企業研修	対応講座です
再トレ	対応講座です
セット割	対応していません
早割	対応講座です