Webの新しいデザイン「CSS3」入門
4.2 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
173 students enrolled

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

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。それに伴いCSS3も大きくバージョンアップしました。このコースでは、CSS3の特徴的なデザインについて一緒に学んでいきましょう。
4.2 (21 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
173 students enrolled
Created by 俊治 中島
Last updated 2/2016
Japanese
Current price: $16.99 Original price: $24.99 Discount: 32% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 新しい Webアプリケーションを作るためのHTML5のデザインを担当するCSS3について深く知ることができます。
  • CSSの設置方法から、CSS3で実現できるリッチなデザインから、変形、アニメーション、三次元のデザインまでを、順を追ってご紹介します。
Requirements
  • Webページを作るために「テキストエディタ」というものをみなさんのPCにインストールしておいてください。
  • みなさんが作ったWebページを確認するためのブラウザが必要です。このコースでは「google chrome」を使ってご説明しますので、みなさんもインストールしておいてください。他のブラウザでも可能ですが、ブラウザによってHTML5への対応度が異なりますので、授業で説明したものと同じような動作にならない可能性がありますからご注意ください。
Description

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

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

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

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

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

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

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

Preview 11:54

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

Preview 08:28
+ CSS3の基本。
2 lectures 26:55

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

CSSを設置しよう
13:44

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

セレクタで、デザインする要素を指定しましょう
13:11
+ リッチなデザインとメディアクエリ
5 lectures 52:16

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

コンテンツに枠線を付けてみよう。
08:38

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

角を丸くしてみよう
09:07

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

影をデザインしてみよう
10:52

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

グラデーションのデザインで表現力アップ
10:58

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

メディアクエリですべての端末に最適なCSSを
12:41
+ 変形とトランジション
2 lectures 25:05

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

コンテンツを変形させよう!
14:17

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

トランジションでCSSを時間をかけて変化させよう
10:48
+ CSS3でアニメーションを
2 lectures 23:02

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

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

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

3次元までできるCSS3
10:48
+ CSSを動的にコントロールしましょう
1 lecture 13:07

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

JavaScriptでCSSをコントロール
13:07