Welcome to GoGetterz!
コースご購入のまえに

コースご購入のまえに、まずはGoGetterz メンバーにご登録ください(登録無料)。
メンバー登録後に「お支払い」ページにてコース購入の手続きをしていただくと
当コースをご視聴いただけます。
メンバーになると1100以上ある動画コースのご購入・視聴が可能になり
ポイント制度をはじめとするメンバー限定のサービスをご利用いただけます。
あなたを変える学びをご体験ください!

*すでにメンバー登録をされている方は、こちらからログインしてください。

メンバー登録(無料)はこちらから
LET’S START

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

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

~70以上のレッスン、7時間以上のレッスンでCSSをマスターするコースです。最新のCSS3に関する内容も充実しています。~

  • 0 (税込) 通常販売 / 無制限
  • エキスパートに質問OK
    8日間返金保証

  • 全71レッスン 71本の動画(約6時間29分21秒)
  • nestonline
    日本 / 法人 6コースのエキスパート

    name

COURSE SUMMARY

コースの概要

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

 

ABOUT EXPERT

エキスパートについて

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

卒業生は1000名以上です。

 

★提供しているサービス

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

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

 

Webデザインキャンプ

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

 

Railsキャンプ

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

 

など

TARGET AUDIENCE

こんな方向け

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

COURSE REQUIREMENTS

受講にあたって必要なもの

・PC
・Sublime Text (テキストエディター)

COURSE CURRICULUM

全71レッスン 71本の動画(約6時間29分21秒)

CHAPTER 1

CSS入門 第一回

LESSON . 1 無料 スタイルシート、CSSとは?00:04:41
LESSON . 2 ゼロから学ぶCSSの基本文法00:04:45
LESSON . 3 CSSを書いてみよう:背景と文字の色を変更する00:04:04
LESSON . 4 インラインCSSを書いてみよう00:05:41
LESSON . 5 フォントのサイズと太さを変更してみよう00:04:05
LESSON . 6 外部CSSファイルの作成と読み込み方法00:07:24
LESSON . 7 importタグを使ってCSSを読み込む方法00:04:22
LESSON . 8 リセットCSSを使う方法00:02:34

CHAPTER 2

CSS入門 第二回

LESSON . 9 すべての要素を対象にするセレクタの書き方00:02:28
LESSON . 10 タグ名を指定してCSSをかける方法00:05:59
LESSON . 11 スタイルの継承について00:06:48
LESSON . 12 複数の同じタグに異なるCSSを適応させる:id名の記述00:06:06
LESSON . 13 複数の同じタグに異なるCSSを適応させる:class名の記述00:05:25
LESSON . 14 CSSコメントアウトを書く方法00:02:22
LESSON . 15 ナビゲーションにCSSをかけてみよう(1)00:05:30
LESSON . 16 【続き】ナビゲーションにCSSをかけてみよう(2)00:04:07

CHAPTER 3

テキストのスタイル

LESSON . 17 フォントの種類を指定するfont-familyの書き方00:06:56
LESSON . 18 特殊なフォント、Google Web Fontを指定しよう00:05:55
LESSON . 19 フォントの大きさを指定するfont-sizeの書き方00:01:39
LESSON . 20 CSSでの大きさを指定する単位について00:04:07
LESSON . 21 font-sizeを使って、頭文字のみ文字の大きさを大きくしてみよう00:06:30
LESSON . 22 文字の太さを変更するfont-weightの書き方00:04:22
LESSON . 23 下線や打ち消し線をtext-decorationで書こう00:04:49
LESSON . 24 文章の行間を指定するline-heightの書き方00:05:19
LESSON . 25 フォントの設定を一括で行うCSSの書き方00:03:05
LESSON . 26 font系CSSを利用して、お知らせページを作ってみよう00:09:49

CHAPTER 4

ボックスのスタイル

LESSON . 27 ブロックタイプレベルとインラインレベルについて00:04:58
LESSON . 28 ボックスモデルを理解する00:03:16
LESSON . 29 横幅と縦幅の指定するCSSのかけ方00:10:18
LESSON . 30 外側の余白を調整するmarginプロパティの書き方00:06:45
LESSON . 31 内側の余白を調整するpaddingプロパティの書き方00:07:26
LESSON . 32 境界線を付けるborderプロパティの書き方00:08:05
LESSON . 33 borderプロパティを利用した、見出しを作ってみよう00:05:20
LESSON . 34 インライン要素をブロック要素に変えるdisplayプロパティの使い方00:04:43
LESSON . 35 ボックスの角を丸くするborder-radiusプロパティの書き方00:04:02
LESSON . 36 ボックス系CSSを利用して、カフェのメニューページを作ってみよう00:07:03

CHAPTER 5

背景・シャドウ・リスト

LESSON . 37 背景の色を変更する方法00:05:22
LESSON . 38 背景に画像を設定する方法00:07:51
LESSON . 39 スクロール固定の背景画像を設定する方法00:04:42
LESSON . 40 テキストに影をつける方法00:05:30
LESSON . 41 ボックスに影をつける方法00:04:45
LESSON . 42 グラデーションの背景を設定する方法00:08:23
LESSON . 43 リストのアイコンスタイルを変更する方法00:05:06
LESSON . 44 リストのアイコンを画像に変更する方法00:03:34
LESSON . 45 背景画像を利用したリストアイコンの表示方法00:03:56

CHAPTER 6

レイアウト

LESSON . 46 タグの横幅と縦幅の指定方法00:06:19
LESSON . 47 サイト全体を中央寄せ、センタリングする方法00:03:31
LESSON . 48 Webサイトを2カラムレイアウトにする方法00:09:32
LESSON . 49 floatを利用した横並びのナビゲーションを作ってみよう00:08:02
LESSON . 50 位置を指定して配置するpositionプロパティの書き方00:07:46
LESSON . 51 スクロール追従ナビゲーションを作成する方法00:04:28
LESSON . 52 指定範囲からはみ出た文字をスクロールさせる方法00:05:48
LESSON . 53 overflowプロパティを使って、画像のサイズを変更してみよう00:02:40
LESSON . 54 Webサイト2カラムレイアウトを作ってみよう00:05:16

CHAPTER 7

セレクタ

LESSON . 55 セレクタについて00:07:46
LESSON . 56 idセレクタの使い方00:05:03
LESSON . 57 classセレクタの使い方00:04:37
LESSON . 58 idセレクタとclassセレクタを組み合わせる方法00:04:27
LESSON . 59 セレクタを使いこなしてみよう00:08:59
LESSON . 60 オンマウスでリンクの文字色を変える方法00:05:18
LESSON . 61 特定の親要素の子要素にだけ、スタイルを適応させる方法00:04:47
LESSON . 62 複数のタグに同じCSSをかける方法00:03:24

CHAPTER 8

セレクタ応用

LESSON . 63 擬似クラスfirst-childとlast-child00:04:07
LESSON . 64 擬似クラスを使った、横並びのナビゲーションを作ってみよう00:06:34
LESSON . 65 順番を指定してスタイルをかけるnth-childの使い方00:06:13
LESSON . 66 nth-childとnth-of-typeの使い方と違い00:05:57
LESSON . 67 nth-child擬似クラスを使って、見やすいテーブルを作ってみよう00:09:52
LESSON . 68 最初の文字・行にスタイルを適応させる方法00:05:39
LESSON . 69 空要素のみにスタイルを適応させる方法00:03:53
LESSON . 70 直後に隣接している要素にスタイルを適応させる方法00:04:50
LESSON . 71 チェックボックスにチェックが入った時にスタイルを適応させる方法00:04:36

動画で見る
WATCH ON MOVIE

OTHER COURSES OF THIS EXPERT

このエキスパートの他のコース

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
41:40:39 / 2K VIEWS
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
nestonline
6,000(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png
実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
08:57:59 / 2K VIEWS
実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース
06:45:45 / 2K VIEWS
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png
未経験からプロを目指す!実践PhotoshopCC講座
08:29:39 / 1K VIEWS
未経験からプロを目指す!実践PhotoshopCC講座
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png
WebデザインのためのPhotoshop実践講座
11:07:19 / 1K VIEWS
WebデザインのためのPhotoshop実践講座
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png

SIMILAR COURSE CURRICULUM

同じ分野のコース

SE・理系必見! 英語レッスン:IT用語
00:18:28 / 1K VIEWS
SE・理系必見! 英語レッスン:IT用語
Ecom
FREE
15561-2d97e05aa789ea408bf78e234dfb48bab2489f7e-04551030.gif
誰でもわかるAdobe After Effects CC
02:03:14 / 922 VIEWS
誰でもわかるAdobe After Effects CC
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif
Scratchをうちの子のためにうちのPCに準備しよう
02:07:59 / 363 VIEWS
Scratchをうちの子のためにうちのPCに準備しよう
IT企画研究所 西村由加利
2,400(税込)
1892990-5579aa4f4bb452faf0e70cf40c43b92536066faf-35032318.JPG
Adobe Dreamweaver CC(上中下3巻セット)
03:09:08 / 560 VIEWS
Adobe Dreamweaver CC(上中下3巻セット)
アテイン株式会社
3,600(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif
HTML5講座(基礎・実践)
03:16:53 / 818 VIEWS
HTML5講座(基礎・実践)
アテイン株式会社
4,800(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif
Adobe Photoshop CS6使い方講座
03:26:40 / 1K VIEWS
Adobe Photoshop CS6使い方講座
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif

はじめてのAfterEffects・Premiere⑤ 企業イメージビデオを作る(Premiere基礎)(3)
00:43:49 / 526 VIEWS
はじめてのAfterEffects・Premiere⑤ 企業イメージビデオを作る(Premiere基礎)(3)
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
誰でもわかる Adobe Dreamweaver CS5
02:18:13 / 838 VIEWS
誰でもわかる Adobe Dreamweaver CS5
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif

はじめてのHTML5② HTML5概要と書式(2)
00:45:20 / 526 VIEWS
はじめてのHTML5② HTML5概要と書式(2)
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png

はじめてのJavaScript JavaScript基礎①
00:47:33 / 853 VIEWS
はじめてのJavaScript JavaScript基礎①
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
WebデザインのためのPhotoshop実践講座
11:07:19 / 1K VIEWS
WebデザインのためのPhotoshop実践講座
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png

はじめてのJavaScript JavaScript基礎⑥
00:31:42 / 524 VIEWS
はじめてのJavaScript JavaScript基礎⑥
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
41:40:39 / 2K VIEWS
未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
nestonline
6,000(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png

Scratchで学ぶ科学的思考プログラミング 中編
02:15:48 / 1K VIEWS
Scratchで学ぶ科学的思考プログラミング 中編
平山雄三
3,000(税込)
3061-7a33550eb11a9ea765a3d5eb2109518236952cf8-38511506.jpg
UXデザイン 最初の一歩〜ユーザビリティテスト観察体験
05:04:30 / 323 VIEWS
UXデザイン 最初の一歩〜ユーザビリティテスト観察体験
Shin Hagimoto
3,000(税込)
1892805-4cab8b955c0bbf0b716eca3a83a329d02d830103-51372002.JPG
誰でもわかる Java基礎 & Javaオブジェクト指向
07:41:12 / 1K VIEWS
誰でもわかる Java基礎 & Javaオブジェクト指向
IT研究所 荒川栄一郎
12,000(税込)
3361-d0b57c43c900558d2ca6e7a76ebce94036019233-50051725.png
誰でもわかるAdobe Flash Professional CC
01:55:28 / 774 VIEWS
誰でもわかるAdobe Flash Professional CC
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif
誰でもわかる 映像・音声コーデック【動画制作の為の基礎知識】
00:52:32 / 902 VIEWS
誰でもわかる 映像・音声コーデック【動画制作の為の基礎知識】
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif

はじめてのAfterEffects・Premiere③ 企業イメージビデオを作る(Premiere基礎)(1)
00:41:53 / 673 VIEWS
はじめてのAfterEffects・Premiere③ 企業イメージビデオを作る(Premiere基礎)(1)
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
Adobe Dreamweaver CS6使い方講座
02:22:09 / 1K VIEWS
Adobe Dreamweaver CS6使い方講座
アテイン株式会社
2,400(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif

はじめてのAfterEffects・Premiere⑧ ロゴアニメ制作(AE基礎)(3)
00:34:29 / 495 VIEWS
はじめてのAfterEffects・Premiere⑧ ロゴアニメ制作(AE基礎)(3)
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png

はじめてのHTML5⑤ HTML5の新しい要素と属性(3)
00:51:58 / 535 VIEWS
はじめてのHTML5⑤ HTML5の新しい要素と属性(3)
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png

プログラミングで科学を学ぼう! Vol. 1 後編
01:34:12 / 1K VIEWS
プログラミングで科学を学ぼう! Vol. 1 後編
平山雄三
3,000(税込)
3061-7a33550eb11a9ea765a3d5eb2109518236952cf8-38511506.jpg

はじめてのJavaScript JavaScript基礎④
00:42:49 / 528 VIEWS
はじめてのJavaScript JavaScript基礎④
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース
06:45:45 / 2K VIEWS
70以上のレッスンで、基礎からしっかり学べる! HTML5完全マスターコース
nestonline
4,200(税込)
3121-819cb4237ddfceaa3e4dfdc66898f56f65f8a81c-17421115.png
プログラミングで科学を学ぼう! Vol. 9
02:00:06 / 965 VIEWS
プログラミングで科学を学ぼう! Vol. 9
平山雄三
3,000(税込)
3061-7a33550eb11a9ea765a3d5eb2109518236952cf8-38511506.jpg
【情報セキュリティ基礎】ハッカーの視点から見るセキュリティ対策の必要性
01:01:17 / 276 VIEWS
【情報セキュリティ基礎】ハッカーの視点から見るセキュリティ対策の必要性
阿部ひろき
2,400(税込)
1892902-070f7cd97fbf37e07f2a4ca1dab00af67f7a7db1-04571609.png
ビスケットファシリテータ講習
01:34:29 / 1K VIEWS
ビスケットファシリテータ講習
デジタルポケット
8,000(税込)
商品写真撮影(物撮り) 実践テクニック
03:13:22 / 1K VIEWS
商品写真撮影(物撮り) 実践テクニック
アテイン株式会社
3,600(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif
VBA実践基礎コース
04:36:39 / 299 VIEWS
VBA実践基礎コース
ryochan
10,800(税込)

はじめてのAfterEffects・Premiere① はじめに
00:17:59 / 561 VIEWS
はじめてのAfterEffects・Premiere① はじめに
デジハリ・オンラインスクール
プレミアムメンバー限定 1892771-9b204496465ccd75b0a274286e33a801e2df4643-05211823.png
FileMaker Pro 14 基礎編
01:54:12 / 1K VIEWS
FileMaker Pro 14 基礎編
アテイン株式会社
3,000(税込)
2441-6905986ead77749db02ba6fa2b603b1b59404539-32501111.gif

▲ページトップへ

フォルダ選択

選択したコースを
に追加してもよろしいですか?

新規フォルダ作成

タイトルを入力(255字まで)

フォルダーのカラー設定

新規フォルダ作成

本当にこの を削除しますか?

▲ページトップへ