Webの新しいデザイン「CSS3」入門

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。それに伴いCSS3も大きくバージョンアップしました。このコースでは、CSS3の特徴的なデザインについて一緒に学んでいきましょう。
3.8 (5 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
63 students enrolled
Instructed by 中島 俊治 Design / Web Design
$19
$25
24% off
Take This Course
  • Lectures 15
  • Length 2.5 hours
  • Skill Level Beginner Level
  • Languages Japanese
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2015 Japanese

Course Description

2014年10月にHTMLは5回目の大幅な改定が行われ、HTML5となりました。HTML5は従来のホームページを作るものからWebアプリケーションへと進化し、ゲームやユーティリティが簡単に作成できるようになりました。

HTML5には、マークアップのタグはもちろん、デザインのCSS3、プログラムのJavaScript、さらにはいろいろな機能を提供してくれるAPIなど様々な仕様の集合体です。

このコースでは、その中のCSS3に焦点を当て、「CSS3でどのようなことができるか」を実際のコーディングを交えてご紹介します。

この授業をきっかけに更に深くHTML5やCSS3に興味を持っていただき、今後に開設するコースにも参加していただくことで、将来的に、プロモーションビデオでご紹介したようなWebアプリケーションを皆さんが自由に作れるようになっていただければ幸いです。

What are the requirements?

  • Webページを作るために「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。

What am I going to get from this course?

  • 新しい Webアプリケーションを作るためのHTML5のデザインを担当するCSS3について深く知ることができます。
  • CSSの設置方法から、CSS3で実現できるリッチなデザインから、変形、アニメーション、三次元のデザインまでを、順を追ってご紹介します。

What is the target audience?

  • HTML5、そしてCSS3になにかしら興味をお持ちのかたを対象としています。
  • プログラムの深い知識は不要です。
  • 私のもうひとつのコース「HTML5入門」を受講した後に、このコースを受けると知識が深まります。
  • 現役のWebデザイナ、Webコーダ、エンジニアの方々、マーケティング、ヘルプデスク、営業、経営まで、Webに関わる方々にご覧いただけると幸いです。
  • 趣味でWebに興味がある方も大歓迎です。

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: CSS3を学ぶ前に
11:54

CSS3 は従来のCSSと比べるととてもデザインの幅が広がっています。CSSで何ができるか、このコースの目的などを、わかりやすく説明します。

この中で使用しているCSS3のリッチなデザインを説明するサンプルについては、このカリキュラムの最後のボーナスセクションで、リンクをご紹介していますので申し添えます。

08:28

この授業では、説明を聴くだけでなく、みなさんと一緒にCSS3を学べるよう、コーディングを中心にして授業を行っています。そのため、このレクチャでは、勉強を始める前に準備してほしいことについて説明します。

Section 2: CSS3の基本。
13:44

CSSはHTMLファイルの中に記述します。そのCSSの設置の方法として大きく3つの方法があります。

13:11

CSSは、HTMLタグのデザインを定義します。そのHTMLタグを指定するのがセレクタです。セレクタには、いくつかの指定方法があり、それらをまとめて説明します。

Section 3: リッチなデザインとメディアクエリ
08:38

それでは、今までのWebページでもとても多用されている、コンテンツを囲む枠をCSSで作ってみましょう。

09:07

それでは、いよいよCSS3でのリッチなデザインのひとつめ「角丸」です。角を自由に丸くして、コンテンツや画像の表現をより豊かにしましょう。

10:52

次に、CSS3で影をデザインしてみましょう!上下左右想いのままに影をつけると、コンテンツが立体的になってさらにリッチなデザインが可能になります。

10:58

リッチなデザインの最後はグラデーションです。グラデーションには、線形のグラデーションと円形のグラデーションがあります。従来は、画像処理ソフトで画像を作り、背景指定するなどしてグラデーションをデザインしていましたが、CSS3では、簡単なコードだけで、グラデーションを作ることができます。そうすることで、サイトも軽くなり、デザインのコントロールもしやすくなります。

12:41

「レスポンシブWebデザイン」というデザイン手法があります。ひとつのHTMLファイルで、スマホ画面からPC画面までのあらゆる端末に最適に表示できるようにしようというものです。このデザインの中でもっとも重要な手法がメディアクエリです。メディアクエリは各端末のCSSをCSS内で切り替えて適用させるものです。リッチなデザインとは異なりますが、とても有用なCSS3の仕様ですので、ここで一緒にご紹介します。

Section 4: 変形とトランジション
14:17

CSS3では、コンテンツを、回転させたり、伸縮させたり、移動させたり、さらに歪ませることまでできるようになりました。しかもコードは簡単です。一緒に試してみましょう。

10:48

トランジションは、時間をかけてCSS3を変化させるデザインです。たとえば「シングル・ページ・Web・アプリケーション」という最近のページのデザインでは、ユーザのスクロールや時間軸にそってコンテンツを変化させることができます。その基礎としてこのトランジションの仕組みもを学んでください。なお、トランジションは、前のレクチャの変形CSS3だけではなく、みなさんが知っているほとんどすべてのCSSプロパティを時間をかけて変化させることが可能です。

Section 5: CSS3でアニメーションを
12:14

CSS3のアニメーションプロパティは、アニメーションのシナリオ(=キーフレーム)を立ててCSSを変化させて、変形したり色が変わったり、消えたり表示させることができるようになりました。

10:48

CSS3では、リッチなデザインや変形、そしてアニメーションができることを学んできましたが、最後に三次元でのデザインを学びましょう。三次元の変形もできますから、みなさんは今までにないコンテンツを作ることができるようになります。

Section 6: CSSを動的にコントロールしましょう
13:07

通常は、HTMLファイルを作るときにCSSを設定するのであとで変更することはできません。しかしHTML5はインタラクティブ(双方向)な技術です。私達のコントロールによってCSSを変化させることができます。このレクチャではCSSをJavaScriptで変化させる方法を学びましょう。

Section 7: ボーナスセクション
参考リンクのご紹介
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

97年ソフトバンク入社、GeoCities Japan 立ち上げ従事。その後、Yahoo! JAPAN、Vector、SBIなどのベンチャ企業の後独立。現在は放送大学等の大学・専門学校、デジハリ・オンラインスクールschoo などでHTML5の講師をつとめる。

Microsoft MVP アワード(2014,2015)受賞。HTML5プロフェッショナル試験レベル2合格、「HTML5プロフェッショナル試験攻略テキスト(レベル1、レベル2:秀和システム)」執筆。

東京アプリ・ワークショップ主催、HTML5の楽しさを伝道中。

Ready to start learning?
Take This Course