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

公開講座についてのお知らせ

2014年3月末をもちまして「公開講座」を、終了とさせていただくこととなりました。
サービス開始よりご愛顧いただき、誠にありがとうございました。

なお今後は、「公開講座」にて培ったノウハウを盛り込みながら、同ブランドの『法人研修』につきまして、一層充実したサービスを提供してまいります。
つきましては引き続きご愛顧賜りますよう、よろしくお願い申し上げます。

概要

ここがすごい!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 iPhoneAndroid(アンドロイド)などのスマートフォンの普及率は年々増加しています。現在の伸び率による予想では、国内モバイルシェアは2012年で20%になる見込みです。

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

iPhoneサイト

ですが、

  • 画面解像度が小さい
  • マウスカーソルのロールオーバーがない
  • 画面の表示倍率が自動的に調整される
  • 低速な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入門講座の制作実習で完成を目指す、ホームページのイメージ画像です。

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

講師

森 和恵 (もり かずえ)
フリーランス Web制作/IT系セミナー講師
Adobe認定インストラクター|Dreamweaver

r360studio.comで活動するWeb系セミナー講師。「難しいことでも、わかり易く伝える」をモットーに楽しく学べるセミナーを開催。今後は、eラーニングや電子出版の形式で、Web制作を学ぶための教育コンテンツにも注力していく。

今後、サイト制作の教科書 r360studyで何かいいことをしかける予定。

著書 (Amazon 著者ページ

  • よくわかるFireworksの教科書[共著](マイナビ)
  • iPhone&Android スマートフォンサイト 制作の仕事術[共著](マイナビ)
  • DreamweaverとMovableTypeで作る テンプレートカスタマイズレッスン(技術評論社)
  • ホームページを作ろう!パソコン教科書 Dreamweaver 8(日経BPソフトプレス)
  • 困ったときのブログ逆引きリファレンス(技術評論社)

イベント/セミナー

  • CSS Nite in KOBE (2012年10月6日)
  • CSS Nite in OSAKA, Vol.28 (2011年12月4日)
  • Untitled!!!!!!!! (2011年4月3日)
  • MTDDC TOKYO テーマ編 (2010年7月31日)
  • Dreamweaver Town Meeting in Tokyo 大喜利 (2010年5月29日)
  • CSS Nite in KANSAI, LP1 プレセッション (2010年6月26日)
  • CSS Nite in OSAKA, Vol.15 (2009年5月12日)
  • CSS Nite in FUKUI (2008年3月8日)
  • CSS Nite in Osaka, Vol.3 (2007年6月1日)
  • Adobe Max Japan 2009 Dreamweaver CS4 入門講座
  • Macromedia MAX 2004 Japan
    「検索エンジン攻略のための正しい SEO のススメ」

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

お客さまの声

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

少人数ということもありましたが、細部にわたり分かり易い講義でした。いろいろ質問させていただいたにもかかわらず、とても親切に教えていただき、ありがとうございました。

(T.Tさま)

FAQ

 

受講前

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

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

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

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

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

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

関連用語・キーワード

CSS3とは

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

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

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

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

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

CSS2(CSS 2.1)とのおもな違い

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

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

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

HTML5とは

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)と呼ばれる「利用できる標準機能」も大幅に増え、ビデオやオーディオの再生、データの保存などを、面倒な処理をすることなく実行できます。

詳細

ここがすごい!CSS3入門講座
講座情報 講座番号 DWAQ
講座名 ここがすごい!CSS3入門講座
講座種別 m-School 入門
実習 パソコンを使った実習があります
カテゴリー Web制作
講座日数 日数 1日
受講時間 13:00~18:00 (12:40より受付)
総時間 5時間(1日5時間×1日間)
開催場所 会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図
PC環境 Microsoft Windows 7またはVistaを使用します(日程により環境が異なります)。Apple Macintoshをご利用の方でも、ツールの基本操作やユーザーインターフェースはWindows版とほぼ同等ですので、安心してお申し込みください。
持参物
  • 受講証(お申し込み時にメールでお送りします)
  • 筆記用具
  • USBメモリー(講座で作成したファイルをお持ち帰りになる場合)

前提条件

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

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

おすすめ講座

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

受講前・受講後にオススメの講座
この講座を受講する前にオススメ HTMLやCSSの知識が不安な方は、まずはプロの使い方を学ぶ Adobe Dreamweaver CS6 入門講座で、基礎を習得してください。
この講座を受講した後は、これが最適 CSS3を利用したフォームやメニューなど、実践的な使い方を学ぶ実案件から学ぶCSS3使いどころ講座が最適です。
関連リンク

CSS3入門講座

 

講座一覧へ

法人研修プランをご提案します

本講座は法人研修として随時承り中です。お話を伺い、最適のコーディネートをさせていただきます。

ご希望、ご質問等ございましたら、お気軽にお問い合わせページよりご連絡ください。

ここがすごい!CSS3入門講座
講座種別 m-School 入門
実習 パソコンを使った実習があります
カテゴリー Web制作
日数 1日
受講時間 13:00~18:00 (12:40より受付)
会場
m-School (エムスクール)
〒101-0061 東京都千代田区三崎町1-3-12 水道橋ビル8階
m-Schoolへのアクセス・地図
講座の目次
講座の目次
PDF/48KB

RSSフィードで
最新情報を購読