ここがすごい！CSS3入門講座

概要

ここがすごい！CSS3入門講座は、CSS3の現状やバージョンアップによる新たな表現方法など、「これからCSS3を学ぶ」方にオススメの入門講座です。

『話題にはなっているけど、どこから手を付けていいのかわからない』『iPhoneなどのスマートフォン対応サイトをCSS3で作成したい』 そんな方はこの講座からスタート！

この講座で、できること

• CSS3で追加されたプロパティを把握できます。
• ホームページをCSS3でレイアウトするときの、手順や注意事項を確認できます。
• 各種ブラウザーのCSS3の対応状況や、未対応ブラウザーの扱いを習得できます。
• HTML5を使ってWebページを作成する基本的な文法を習得できます。
• iPhoneサイトの作り方の基礎を学習します。

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

• CSS3にチャレンジしたいと思っている、Web制作者や企業のホームページ担当者さま。

Webサイト制作のトレンド“CSS3”をご紹介

CSS（カスケーディングスタイルシート）の最新バージョンとなるCSS3は、前バージョンのCSS2（CSS2.1）から大幅に進化し、JavaScriptなどを使わなくても表現力豊かなデザインレイアウトを作成できるようになりました。

CSS3を利用できるブラウザーは、2011年現在ではまだ対応状況にばらつきがありますが、特にメリットが大きいとされる

• 新しいデザイン表現
• 飾り画像を使わない「軽い表現」による表示の高速化

などを導入し始めるWebサイトも増えてきています。

実習を通して、CSS3を学ぶ

ここがすごい！CSS3入門講座では、導入事例が増えるCSS3の現状や、新たに可能となった表現方法など、「これからCSS3を学ぶ」方がおさえておきたいポイントを中心にご紹介します。

またCSS3と並んで話題になっている、iPhoneなどのスマートフォン対応のページ作成やHTML5の現状についてもご紹介します。

実際にWebページを制作しながら、実習を通してその進化を実感してみましょう！

スマートフォンに最適化されたサイトの制作手法

Apple iPhoneやAndroid（アンドロイド）などのスマートフォンの普及率は年々増加しています。現在の伸び率による予想では、国内モバイルシェアは2012年で20%になる見込みです。

iPhone標準ブラウザー（Mobile Safari）もAndroid標準ブラウザー（Chrome Lite）も、パソコンでも使用されているWebKit（ウェブキット）系ブラウザーですので、一般のホームページをそのまま閲覧できます。

ですが、

• 画面解像度が小さい
• マウスカーソルのロールオーバーがない
• 画面の表示倍率が自動的に調整される
• 低速な3G回線の利用

など、スマートフォンブラウザーの特徴をふまえたサイト最適化を行うことがベストです。

本講座では、普及率が多いiPhoneに合わせたサイト制作の手法を学習します。

WebKit…オープンソースで公開されている、HTMLレンダリングエンジン（HTMLやCSSのコードを実際の画面に表示するプログラム）です。

コースカリキュラム

CSS3の具体的なテクニックをご紹介

講座の目次

PDF／48KB

ここがすごい！CSS3入門講座では、CSS3の現状や新たに可能となった表現方法など、これからCSS3を学ぶために「おさえておきたいポイント」を中心にご紹介します。

• CSS3とは？
• レイアウト枠を角丸に（border-radius）
• レイアウト枠やテキストに影を指定（box-shadow／text-shadow）
• テキストにWeb Fontsを指定（@font-face）
• レイアウト枠のボーダーに画像を指定（border-image）
• グラデーションボタン（background-image:linear-gradient）
• 透過指定（background:rgba／opacity）
• 背景画像の複数指定やサイズ指定（background-size／Multiple Background）
• 回転させる（transform:rotate）
• ボックスレイアウト（display:box／box-ordinal-group／box-flex）
• アニメーション指定（transition）
• Internet Explorerへの対応
• HTML5について
• スマートフォン向けサイトでの利用：iPhoneサイト作成の基礎

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

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

制作実習の完成イメージ

ここがすごい！CSS3入門講座の制作実習で完成を目指す、ホームページのイメージ画像です。

画面をクリックすると拡大します。

講師

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

お客さまの声

講座を受講いただいた、お客さまの声をご紹介します。

FAQ

 

受講前

HTMLのことを知りませんが、受講できますか。

いいえ、CSSの基礎知識が必要ですので、申し訳ありませんがHTMLの知識がない場合は厳しいと思われます。まずはプロの使い方を学ぶ Adobe Dreamweaver CS5 入門講座で、HTMLやCSSの基礎を習得してください。

CSS3でレイアウトをしたことありませんが、受講できますか。

はい、前バージョンとなるCSS2（CSS2.1）での制作経験があれば大丈夫です。

Dreamweaverのスタイル機能を使って、コードを入力しますか。

いいえ、本講座ではコード入力画面で直接CSSを編集します。Dreamweaverはテキスト編集ソフト（エディター）の役割として使用します。

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

関連用語・キーワード

CSS3とは

CSS3とは、Cascading Style Sheet level 3（カスケーディングスタイルシート レベル3）の略で、ページの見た目やどのように表示するかを定めた仕様（規格）の最新バージョンです。

過去のWebページ制作では、フォントや色などの見た目もHTMLで指定していましたが、レイアウトやデザインをCSSで行うことにより文書構造（HTML、XHTML）とデザインを切り離せるため、さまざまなメリットが得られます。

講座では「より多くのブラウザーがサポートしている機能」を中心に、角丸やグラデーション、透明（透過）などの表現を実践します。

また、サポートされていないブラウザーの対応についても学びます。

CSS2（CSS 2.1）とのおもな違い

ホームページデザインで利用頻度の高い、「角丸にする」「グラデーション」「ドロップシャドウ」などが追加されました。いままでは画像を用意するかJavaScriptを駆使してどうにか実現していた「デザインクオリティの高いボタン」などが、CSSだけで簡単に作成できます。

また「セレクタ」と呼ばれる、「どの個所にそのスタイルを適用させるか」の方法が大幅に増え、自由度の高いデザインを実現できます。

2011年3月現在、CSS3は正式には勧告されていませんので、今後に仕様変更される可能性があります。

HTML5とは

HTML5とは、ホームページのドキュメントを記述するマークアップ言語であるHTML（Hyper Text Markup Language）の最新バージョンです。

長きにわたりバージョン4となるHTML 4.0が利用されてきましたが、大幅に新規要素・機能が実装され、HTML5としてW3C（World Wide Web Consortium：世界的なWeb標準化団体）より勧告されました。

これにより、今後のホームページ制作の主流はHTML5へ移行すると予想されます。各種ブラウザーも対応を開始し、海外サイトを中心にサイトへの導入もはじまっています。

HTML 4.0とのおもな違い

マークアップの要素が大幅に追加されました。HTML 4.0の場合、ページ制作を行ううえで適切な要素（タグ）が少なく、<div>要素で代用するケースが多く見られました。

しかしHTML5では、レイアウトする際に<header>、<footer>、<nav>などの新要素を利用できるため、適切かつ理論的なマークアップを行えます。

また<canvas>、<video>、<audio>などのメディアに対する要素が新しく追加されたのも大きな特長です。

API（Application Programming Interface）と呼ばれる「利用できる標準機能」も大幅に増え、ビデオやオーディオの再生、データの保存などを、面倒な処理をすることなく実行できます。

フォローアップ

m-Schoolとは？

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

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

短期集中で受講

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

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

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

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

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

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

日程・お申し込み

ここがすごい！CSS3入門講座

講座情報	講座番号	DWAQ
	講座名	ここがすごい！CSS3入門講座
	講座種別	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円 （税込）
	セット割	対応していません セット割とは
	早割	対応講座です 早割とは
	お支払い	お振り込み
	特典	講座テキスト

前提条件

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

前提条件

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

おすすめ講座

受講する前・受講した後にオススメしている講座です。

受講前・受講後にオススメの講座

この講座を受講する前にオススメ	HTMLやCSSの知識が不安な方は、まずはプロの使い方を学ぶ Adobe Dreamweaver CS5 入門講座で、基礎を習得してください。
この講座を受講した後は、これが最適	CSS3を利用したフォームやメニューなど、実践的な使い方を学ぶCSS3と未来のWebデザイン実践講座が最適です。

開催スケジュール

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

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

CSS3入門講座

講座一覧へ