CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター
4.5 (38 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.
461 students enrolled
Wishlisted Wishlist

Please confirm that you want to add CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター to your Wishlist.

Add to Wishlist

CSS / CSS3 マスターコース |70以上のレッスン、7時間以上のレッスンでCSSを基礎からマスター

70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。最新のCSS3に関する内容も充実しています。
4.5 (38 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.
461 students enrolled
Created by NEST online
Last updated 10/2015
Japanese
Current price: $10 Original price: $80 Discount: 88% off
1 day left at this price!
30-Day Money-Back Guarantee
Includes:
  • 6.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます
View Curriculum
Requirements
  • HTMLの基礎を知っておく必要があります
Description

CSS / CSS3を70位上のレッスン、7時間かけてしっかり学びます。
CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます。

1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


★こんな人におすすめ★

  • HTMLはわかるがCSSがまだできなくて始めたい人
  • 最新のCSSを学び直したい人


★特徴★

  • CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につく
  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が70レッスン以上 充実した内容ですが、無理せず学べる



★内容★

(1)CSS入門 第一回

初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。 一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか?その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます

(2)CSS入門 第二回

簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。 「CSS入門 第1回」の続きの章になりますので、初めてこの章をご覧になる方はまずこの前の章から始めてください。


(3)テキストのスタイル

テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。 シンプルなサイトのデザインを行いながら学んでいくので、楽しみながら学習していただけます。 初心者向けの章なので、複雑な機能やショートカットキー等は使用せず、気軽に取り組んでいただけます。


(4)ボックスのスタイル

Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。 これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、1つずつ着実にマスターしていきましょう。


(5)背景・シャドウ・リスト

背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。 これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。 この機会にぜひ、習得してください。


(6)レイアウト

Webサイトのレイアウトを組むためのCSSの記述方法について学びます。 また、ボックスを2つ左右に並べる「2カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。 ボックスモデルを理解していないと、習得が難しい章になっていますので、「ボックスモデル」の章をご覧になってからこの章に挑んでください。


(7)セレクタ

CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。 CSSのセレクタには様々な書き方がありますが、中には覚えておくと便利なセレクタがたくさんあります。 この章では、とくによく利用するセレクタをピックアップしてご紹介します。


(8)セレクタ応用

CSSの命令先を宣言する、「セレクタ」について初心者向けに解説しています。 ここでは、一歩進んだ上級者向けの便利なセレクタの書き方についてご紹介していきます。 上級者・プロは必ず利用するセレクタの記述になりますので、この機会にぜひ覚えてみんなと差をつけよう! 初めてこの章をご覧になる方は、まずはじめに、「セレクタ」の章から初めて頂くとより理解が深まるはずです。



Who is the target audience?
  • HTMLはわかるがCSSがまだできなくて始めたい人
  • 最新のCSSを学び直したい人
Students Who Viewed This Course Also Viewed
Curriculum For This Course
71 Lectures
06:29:21
+
CSS入門 第一回
8 Lectures 37:36
HTMLに対してデコレーションを加える事が出来る、CSSについて、初心者向けに解説しています。
Preview 04:41

CSSの基本的な考え方と、その書き方について、初心者向けに解説しています。

Preview 04:45

CSSの基本的な書き方について学んだ方を対象にしている動画です。実際に、ウェブサイトの文字と背景の色を、CSSを使って変更してみます。
Preview 04:04

インラインCSSを利用したCSSの書き方について、初心者向けに解説しています。
インラインCSSを書いてみよう
05:41

インラインCSSを利用して、フォントのサイズと太さを変更する方法を初心者向けに解説しています。
フォントのサイズと太さを変更してみよう
04:05

外部CSSファイルを作成し、HTMLに読み込ませる方法を初心者向けに解説しています。
外部CSSファイルの作成と読み込み方法
07:24

importタグを使って、外部CSSファイルを読み込む方法について、初心者向けに解説しています。
importタグを使ってCSSを読み込む方法
04:22

ブラウザが初期で読みこむ無駄なCSSを解除する、リセットCSSについて、またその導入方法について、初心者向けに解説しています。
リセットCSSを使う方法
02:34
+
CSS入門 第二回
8 Lectures 38:45

全ての要素を対象に、CSSをかけるための「全称セレクタ」のかけ方について、初心者向けに解説しています。

すべての要素を対象にするセレクタの書き方
02:28

タグ名を指定してCSSをかけるための、「タイプセレクタ」について、初心者向けに解説しています。
タグ名を指定してCSSをかける方法
05:59

スタイルの継承について、初心者向けに解説しています。継承されるものや、されないものもあるので、注意が必要です。
スタイルの継承について
06:48

HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。 ここでは、id名を利用して、複数の同じタグに対して、それぞれ異なるCSSをかける方法について、解説します。
複数の同じタグに異なるCSSを適応させる:id名の記述
06:06

HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。 ここでは、class名を利用して、複数の同じタグに対して、それぞれ異なるCSSをかける方法について、解説します。また、class名とid名をどのように使い分ければ良いかについても触れていきます。
複数の同じタグに異なるCSSを適応させる:class名の記述
05:25

CSSの中に、自分のメモを残しておくことが出来る、コメントアウトの書き方について、初心者向けに解説しています。

CSSコメントアウトを書く方法
02:22

簡単なCSSを活用して、ウェブサイトのナビゲーションを完成させる方法を、初心者向けに解説しています。 ここでは、文字の大きさや色、下線などのCSSをかけていきます。

ナビゲーションにCSSをかけてみよう(1)
05:30

簡単なCSSを活用して、ウェブサイトのナビゲーションを完成させる方法を、初心者向けに解説しています。 ここでは、id名を利用して、同じタグにそれぞれ異なるCSSをかけ、現在のページがわかるようにCSSをかけていきます。

【続き】ナビゲーションにCSSをかけてみよう(2)
04:07
+
テキストのスタイル
10 Lectures 52:31

font-familyを利用して、フォントの種類を変更するCSSの書き方について、初心者向けに解説しています。

フォントの種類を指定するfont-familyの書き方
06:56

google web fontを利用して、フォントの種類を変更するCSSの書き方について、初心者向けに解説しています。

特殊なフォント、Google Web Fontを指定しよう
05:55

font-sizeプロパティを利用して、フォントの大きさを変更するCSSの書き方について、初心者向けに解説しています。
フォントの大きさを指定するfont-sizeの書き方
01:39

CSSで利用できる大きさの単位、pxやem、remの考え方と適用方法について、初心者向けに解説しています。

CSSでの大きさを指定する単位について
04:07

font-sizeプロパティを利用して、文字の頭文字だけ大きくするCSSをかける方法について、初心者向けに解説しています。
font-sizeを使って、頭文字のみ大きくしてみよう
06:30

font-weightプロパティを利用して、文字の太さを変更するCSSをかける方法について、初心者向けに解説しています。
文字の太さを変更するfont-weightの書き方
04:22

text-decorationプロパティを利用して、文字の下線・上線・打ち消し線をコントロールするCSSについて初心者向けに解説しています。
下線や打ち消し線をtext-decorationで書こう
04:49

line-heightプロパティを利用して、2行以上の文章の行間を調整するCSSについて、初心者向けに解説しています。
文章の行間を指定するline-heightの書き方
05:19

フォント系のCSSを、一括で指定することができるfontプロパティの書き方について、解説しています。 font系のCSSを多数利用しますので、fontに関するCSSを知っている方を対象に解説しています。
フォントの設定を一括で行うCSSの書き方
03:05

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!

[チャレンジ]font系CSSを利用して、お知らせページを作ってみよう
09:49
+
ボックスのスタイル
10 Lectures 01:01:56

ブロックタイプとインラインタイプの特徴と違いについて、初心者向けに解説しています。font系のCSSを活用して、見やすいお知らせページを作ってみましょう。 ここでは、文字の大きさ、種類、色、太さ、位置調整等、様々なCSSを利用します。

ブロックタイプレベルとインラインレベルについて
04:58

横幅や縦幅、内側の余白、外側の余白、境界線の考え方を理解するために、初心者向けにボックスモデルを解説しています。
ボックスモデルを理解する
03:16

横幅と縦幅を指定するwidthとheightプロパティについて、初心者向けに解説しています。

横幅と縦幅の指定するCSSのかけ方
10:18

外側の余白を調整するmarginプロパティについて、初心者向けに解説しています。

外側の余白を調整するmarginプロパティの書き方
06:45

内側の余白を調整するpaddingプロパティについて、初心者向けに解説しています。
内側の余白を調整するpaddingプロパティの書き方
07:26

境界線を一括で指定するborderプロパティを使って、ボックスに境界線をはる方法について、初心者向けに解説しています。
境界線を付けるborderプロパティの書き方
08:05

ボックスモデルを理解した上で、borderプロパティやpaddingプロパティを利用して、おしゃれな見出しを作成する方法について解説しています。
borderプロパティを利用した、見出しを作ってみよう
05:20

インライン要素にボックス系のCSSはかけれませんが、ブロック要素に変えるdisplayプロパティを使えば、それらのCSSが利用出来るようになります。ここでは、表示形式を変えるdisplayプロパティについて、解説します。

インライン要素をブロック要素に変えるプロパティの使い方
04:43

ボックスの角を丸くするborder-radiusプロパティを利用して、角の丸いボタンを作成する方法を解説しています。

ボックスの角を丸くするborder-radiusの書き方
04:02

ボックスの角を丸くするborder-radiusプロパティを利用して、角の丸いボタンを作成する方法を解説しています。
[チャレンジ]ボックス系CSSを利用して、カフェのメニューページを作ろう
07:03
+
背景・シャドウ・リスト
9 Lectures 49:09
背景の色を設定するための、background-colorプロパティについて、初心者向けに解説しています。
背景の色を変更する方法
05:22

背景に画像を設定するための、background-url、background-size、background-positionの書き方について、初心者向けに解説しています。

背景に画像を設定する方法
07:51

スクロールしてもついてくる、背景画像を設定するプロパティの書き方について、初心者向けに解説しています。

スクロール固定の背景画像を設定する方法
04:42

テキストに影をつけるtext-shadowプロパティについて、初心者向けに解説しています。
テキストに影をつける方法
05:30

ボックスに影をつけるtext-shadowプロパティについて、初心者向けに解説しています。

ボックスに影をつける方法
04:45

背景にグラデーションを設定するためのプロパティについて、初心者向けに解説しています。
グラデーションの背景を設定する方法
08:23

リストのアイコンのスタイルを変更する、list-styleプロパティの書き方を、初心者向けに解説しています。
リストのアイコンスタイルを変更する方法
05:06

リストのアイコンを画像に変更するlist-style-imageプロパティの書き方を、初心者向けに解説しています。
リストのアイコンを画像に変更する方法
03:34

list-style-imageは、アイコンの位置が調整できず、文字とずれて見えてしまう場合があります。 ここでは、背景画像としてリストアイコンを表示させ、綺麗なリストを作成する方法を解説します。

背景画像を利用したリストアイコンの表示方法
03:56
+
レイアウト
9 Lectures 53:22

Webサイトのレイアウトを組むためには、まず横幅と縦幅の指定方法を学ぶ必要があります。 ここでは、タグに背景色を加えて可視化させたあと、CSSのwidthとheightプロパティを使って、タグの横幅と縦幅を任意に変更してみます。

タグの横幅と縦幅の指定方法
06:19

Webサイトは、全体が中央に寄っているものが最近ではほとんどです。しかし、レイアウト全体を真ん中に寄せるためには、少し難しいmarginというプロパティを利用する必要があります。 ここでは、marginプロパティとwidthプロパティを使って、実際にウェブサイトをセンタリングしてみます。
サイト全体を中央寄せ、センタリングする方法
03:31

ボックスは、何も指定しないと縦に並んでいきます。横並び(2カラム)にしたい場合は、floatというcssプロパティを利用しなければいけません。 ここでは、floatプロパティの基本的な使い方と書き方を、初心者向けに解説しています。

Webサイトを2カラムレイアウトにする方法
09:32

floatプロパティの概念と書き方を学んだ上で、実際のWebサイトを作って練習してみましょう。 ここでは、横並びのナビゲーションを作成する方法を解説しています。

floatを利用した横並びのナビゲーションを作ってみよう
08:02

位置を指定して配置することの出来る、positionプロパティの考え方と、書き方を初心者向けに解説しています。

位置を指定して配置するpositionプロパティの書き方
07:46

navタグにpositionプロパティを記述し、スクロールしてもついてくるナビゲーションを作成する方法を、初心者向けに解説しています。

スクロール追従ナビゲーションを作成する方法
04:28

指定したボックスの範囲内からはみ出た文字をコントロールするために、overflowプロパティを利用します。 ここでは、スクロールできる「お知らせ一覧」を作成する方法を初心者向けに解説しています。

指定範囲からはみ出た文字をスクロールさせる方法
05:48

指定したボックスの範囲内からはみ出た部分を非表示にすることができる、overflowプロパティを使って、 画像に直接編集を加えない形で、画像のサイズを変更する方法を初心者向けに解説しています。

overflowを使って、画像のサイズを変更してみよう
02:40

チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
[チャレンジ]Webサイト2カラムレイアウトを作ってみよう
05:16
+
セレクタ
8 Lectures 44:21

CSSのセレクタの基礎の部分を、初心者向けに解説しています。 ここでは、超基本のセレクタ「タイプセレクタ」と、「全称セレクタ」について学びます。

セレクタについて
07:46

CSSのidセレクタの考え方と、書き方を初心者向けに解説しています。 ここでは、複数の「h2」タグにそれぞれ異なるCSSをかけていきます。
idセレクタの使い方
05:03

CSSのclassセレクタの考え方と、書き方を初心者向けに解説しています。 ここでは、複数の「li」タグにそれぞれ異なるCSSをかけていきます。

classセレクタの使い方
04:37

idセレクタとclassセレクタを組み合わせる方法を解説しています。 idセレクタとclassセレクタのそれぞれの特徴を理解して、よりドライなCSSが書けるようになるよう、レクチャーします。
idセレクタとclassセレクタを組み合わせる方法
04:27

タイプセレクタ、idセレクタ、classセレクタを使いこなして、デザインを完成させましょう。 ここでは、同じタグ「div」に異なる境界線のCSSを適応させていきます。

セレクタを使いこなしてみよう
08:59

擬似クラス:hoverを利用して、オンマウスで色の変わるリンクを作成する方法について、初心者向けに解説しています。
オンマウスでリンクの文字色を変える方法
05:18

特定の親要素の子要素にだけ、スタイルを適応させる「子孫コンビネータ」の書き方について、初心者向けに解説しています。
特定の親要素の子要素にだけ、スタイルを適応させる方法
04:47

複数のタグに対して、同じCSSをかける方法について、初心者向けに解説しています。
複数のタグに同じCSSをかける方法
03:24
+
セレクタ応用
9 Lectures 51:41
擬似クラス「first-child」と「last-child」の使い方について、初心者向けに解説しています。 ここでは、複数のliタグの最初と最後にだけ、文字の色を変更するCSSをかけて練習してみます。
擬似クラスfirst-childとlast-child
04:07

擬似クラスを使った、横並びのナビゲーションを作ってみましょう。 ここでは、リストの間にある境界線を、最後のリストだけつけて、文字の左右に境界線がある状態のデザインを作成します。
擬似クラスを使った、横並びのナビゲーションを作ってみよう
06:34

順番を指定してスタイルをかけるnth-childの使い方について、初心者向けに解説しています。 ここでは、複数のタグに対して、n番目のpタグにだけ文字の色を変えるCSSを適応させています。

順番を指定してスタイルをかけるnth-childの使い方
06:13

「nth-child」と「nth-of-type」の使い方と違いについて、初心者向けに解説しています。 違いをしっかりと理解して、今後のWebサイト制作に役立てていきましょう。

nth-childとnth-of-typeの違いと使い方
05:57

nth-child擬似クラスを使って、見やすいテーブルを作ってみましょう。 ここでは、奇数行目のテーブルに背景の色を設定し、見やすいテーブルへと改善していきます。

nth-child擬似クラスを使って見やすいテーブルを作ろう
09:52

最初の文字・行にスタイルを適応させる::first-lineと::last-lineについて、初心者向けに解説しています。 ここでは、文章に実際に適応させて雑誌のようなデザインに仕上げていきます。
最初の文字・行にスタイルを適応させる方法
05:39

空要素のみにスタイルを適応させる方法について、初心者向けに解説しています。 ここでは、仮想のフォーム内容の確認ページに、入力されていない項目の部分を赤く目立たせます。
空要素のみにスタイルを適応させる方法
03:53

直後に隣接している要素にスタイルを適応させる方法について解説しています。 上級者向けのセレクタになりますので、セレクタの基礎がわかっている方が対象の動画です。

直後に隣接している要素にスタイルを適応させる方法
04:50

チェックボックスにチェックが入った時にスタイルを適応させる方法について、解説します。 ここでは、チェックが入った項目のラベルを太く目立たせます。

チェックボックスにチェックを入れた時にスタイルを適応させよう
04:36
About the Instructor
NEST online
4.5 Average rating
1,074 Reviews
8,023 Students
8 Courses
ウェブデザイン / プログラミング

テクノロジーとクリエイティブのプロを目指す人のためのスクールを運営しています。

卒業生は1000名以上です。


★提供しているサービス

2ヶ月のWebデザインコース

2ヶ月未経験からWebデザイナーへ。
未経験からWEBデザイナーとして働けるレベルになることをゴールとした大学生や若手社会人向けのコースです


Webデザインキャンプ

【2日間で全てを学ぶ!】Webデザイン集中講座


Railsキャンプ

RailsCamp -2日間集中プログラミング入門講座-


など