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

70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。最新のCSS3に関する内容も充実しています。
4.3 (20 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.
321 students enrolled
Instructed by NEST online Design / Web Design
$19
$80
76% off
Take This Course
  • Lectures 71
  • Length 6.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 10/2015 Japanese

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



What are the requirements?

  • HTMLの基礎を知っておく必要があります

What am I going to get from this course?

  • CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます

What is the target audience?

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

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: CSS入門 第一回
04:41
HTMLに対してデコレーションを加える事が出来る、CSSについて、初心者向けに解説しています。
04:45

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

04:04
CSSの基本的な書き方について学んだ方を対象にしている動画です。実際に、ウェブサイトの文字と背景の色を、CSSを使って変更してみます。
05:41
インラインCSSを利用したCSSの書き方について、初心者向けに解説しています。
04:05
インラインCSSを利用して、フォントのサイズと太さを変更する方法を初心者向けに解説しています。
07:24
外部CSSファイルを作成し、HTMLに読み込ませる方法を初心者向けに解説しています。
04:22
importタグを使って、外部CSSファイルを読み込む方法について、初心者向けに解説しています。
02:34
ブラウザが初期で読みこむ無駄なCSSを解除する、リセットCSSについて、またその導入方法について、初心者向けに解説しています。
Section 2: CSS入門 第二回
02:28

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

05:59
タグ名を指定してCSSをかけるための、「タイプセレクタ」について、初心者向けに解説しています。
06:48
スタイルの継承について、初心者向けに解説しています。継承されるものや、されないものもあるので、注意が必要です。
06:06
HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。 ここでは、id名を利用して、複数の同じタグに対して、それぞれ異なるCSSをかける方法について、解説します。
05:25
HTMLでは、複数にわたり同じタグを利用しなければならない場合がほとんどです。 ここでは、class名を利用して、複数の同じタグに対して、それぞれ異なるCSSをかける方法について、解説します。また、class名とid名をどのように使い分ければ良いかについても触れていきます。
02:22

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

05:30

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

04:07

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

Section 3: テキストのスタイル
06:56

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

05:55

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

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

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

06:30
font-sizeプロパティを利用して、文字の頭文字だけ大きくするCSSをかける方法について、初心者向けに解説しています。
04:22
font-weightプロパティを利用して、文字の太さを変更するCSSをかける方法について、初心者向けに解説しています。
04:49
text-decorationプロパティを利用して、文字の下線・上線・打ち消し線をコントロールするCSSについて初心者向けに解説しています。
05:19
line-heightプロパティを利用して、2行以上の文章の行間を調整するCSSについて、初心者向けに解説しています。
03:05
フォント系のCSSを、一括で指定することができるfontプロパティの書き方について、解説しています。 font系のCSSを多数利用しますので、fontに関するCSSを知っている方を対象に解説しています。
09:49

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

Section 4: ボックスのスタイル
04:58

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

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

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

06:45

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

07:26
内側の余白を調整するpaddingプロパティについて、初心者向けに解説しています。
08:05
境界線を一括で指定するborderプロパティを使って、ボックスに境界線をはる方法について、初心者向けに解説しています。
05:20
ボックスモデルを理解した上で、borderプロパティやpaddingプロパティを利用して、おしゃれな見出しを作成する方法について解説しています。
04:43

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

04:02

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

07:03
ボックスの角を丸くするborder-radiusプロパティを利用して、角の丸いボタンを作成する方法を解説しています。
Section 5: 背景・シャドウ・リスト
05:22
背景の色を設定するための、background-colorプロパティについて、初心者向けに解説しています。
07:51

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

04:42

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

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

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

08:23
背景にグラデーションを設定するためのプロパティについて、初心者向けに解説しています。
05:06
リストのアイコンのスタイルを変更する、list-styleプロパティの書き方を、初心者向けに解説しています。
03:34
リストのアイコンを画像に変更するlist-style-imageプロパティの書き方を、初心者向けに解説しています。
03:56

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

Section 6: レイアウト
06:19

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

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

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

08:02

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

07:46

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

04:28

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

05:48

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

02:40

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

05:16
チャレンジ課題です。理解度をチェックするために挑戦してみましょう!
Section 7: セレクタ
07:46

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

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

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

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

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

05:18
擬似クラス:hoverを利用して、オンマウスで色の変わるリンクを作成する方法について、初心者向けに解説しています。
04:47
特定の親要素の子要素にだけ、スタイルを適応させる「子孫コンビネータ」の書き方について、初心者向けに解説しています。
03:24
複数のタグに対して、同じCSSをかける方法について、初心者向けに解説しています。
Section 8: セレクタ応用
04:07
擬似クラス「first-child」と「last-child」の使い方について、初心者向けに解説しています。 ここでは、複数のliタグの最初と最後にだけ、文字の色を変更するCSSをかけて練習してみます。
06:34
擬似クラスを使った、横並びのナビゲーションを作ってみましょう。 ここでは、リストの間にある境界線を、最後のリストだけつけて、文字の左右に境界線がある状態のデザインを作成します。
06:13

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

05:57

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

09:52

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

05:39
最初の文字・行にスタイルを適応させる::first-lineと::last-lineについて、初心者向けに解説しています。 ここでは、文章に実際に適応させて雑誌のようなデザインに仕上げていきます。
03:53
空要素のみにスタイルを適応させる方法について、初心者向けに解説しています。 ここでは、仮想のフォーム内容の確認ページに、入力されていない項目の部分を赤く目立たせます。
04:50

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

04:36

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

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

NEST online, ウェブデザイン / プログラミング

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

卒業生は1000名以上です。


★提供しているサービス

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

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


Webデザインキャンプ

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


Railsキャンプ

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


など


Ready to start learning?
Take This Course