一括購入

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

コース料金:¥4,800(税込)またはチャプターごとの購入

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

コースの言語: Japanese

コース概要

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



 


必要条件

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

Course Curriculum

Lesson 1

時間: 04:41

スタイルシート、CSSとは?

Lesson 2

時間: 04:46

ゼロから学ぶCSSの基本文法

Lesson 3

時間: 04:05

CSSを書いてみよう:背景と文字の色を変更する

Lesson 4

時間: 05:41

インラインCSSを書いてみよう

Lesson 5

時間: 04:05

フォントのサイズと太さを変更してみよう

Lesson 6

時間: 07:25

外部CSSファイルの作成と読み込み方法

Lesson 7

時間: 04:22

importタグを使ってCSSを読み込む方法

Lesson 8

時間: 02:35

リセットCSSを使う方法

Lesson 1

時間: 02:29

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

Lesson 2

時間: 05:59

タグ名を指定してCSSをかける方法

Lesson 3

時間: 06:48

スタイルの継承について

Lesson 4

時間: 06:06

複数の同じタグに異なるCSSを適応させる:id名の記述

Lesson 5

時間: 05:25

複数の同じタグに異なるCSSを適応させる:class名の記...

Lesson 6

時間: 02:22

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

Lesson 7

時間: 05:31

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

Lesson 8

時間: 04:07

【続き】ナビゲーションにCSSをかけてみよう(2)

Lesson 1

時間: 06:57

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

Lesson 2

時間: 05:56

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

Lesson 3

時間: 01:39

フォントの大きさを指定するfont-sizeの書き方

Lesson 4

時間: 04:08

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

Lesson 5

時間: 06:30

font-sizeを使って、頭文字のみ文字の大きさを大きく...

Lesson 6

時間: 04:22

文字の太さを変更するfont-weightの書き方

Lesson 7

時間: 04:49

下線や打ち消し線をtext-decorationで書こう

Lesson 8

時間: 05:19

文章の行間を指定するline-heightの書き方

Lesson 9

時間: 03:05

フォントの設定を一括で行うCSSの書き方

Lesson 10

時間: 09:50

font系CSSを利用して、お知らせページを作ってみよう

Lesson 1

時間: 04:58

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

Lesson 2

時間: 03:16

ボックスモデルを理解する

Lesson 3

時間: 10:19

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

Lesson 4

時間: 06:45

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

Lesson 5

時間: 07:27

内側の余白を調整するpaddingプロパティの書き方

Lesson 6

時間: 08:05

境界線を付けるborderプロパティの書き方

Lesson 7

時間: 05:21

borderプロパティを利用した、見出しを作ってみよう

Lesson 8

時間: 04:43

インライン要素をブロック要素に変えるdisplayプロパ...

Lesson 9

時間: 04:03

ボックスの角を丸くするborder-radiusプロパティの書...

Lesson 10

時間: 07:03

ボックス系CSSを利用して、カフェのメニューページを...

Lesson 1

時間: 05:23

背景の色を変更する方法

Lesson 2

時間: 07:52

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

Lesson 3

時間: 04:43

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

Lesson 4

時間: 05:31

テキストに影をつける方法

Lesson 5

時間: 04:45

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

Lesson 6

時間: 08:24

グラデーションの背景を設定する方法

Lesson 7

時間: 05:07

リストのアイコンスタイルを変更する方法

Lesson 8

時間: 03:34

リストのアイコンを画像に変更する方法

Lesson 9

時間: 03:57

背景画像を利用したリストアイコンの表示方法

Lesson 1

時間: 06:19

タグの横幅と縦幅の指定方法

Lesson 2

時間: 03:32

サイト全体を中央寄せ、センタリングする方法

Lesson 3

時間: 09:32

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

Lesson 4

時間: 08:02

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

Lesson 5

時間: 07:46

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

Lesson 6

時間: 04:29

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

Lesson 7

時間: 05:48

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

Lesson 8

時間: 02:41

overflowプロパティを使って、画像のサイズを変更して...

Lesson 9

時間: 05:17

Webサイト2カラムレイアウトを作ってみよう

Lesson 1

時間: 07:46

セレクタについて

Lesson 2

時間: 05:03

idセレクタの使い方

Lesson 3

時間: 04:38

classセレクタの使い方

Lesson 4

時間: 04:27

idセレクタとclassセレクタを組み合わせる方法

Lesson 5

時間: 08:59

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

Lesson 6

時間: 05:18

オンマウスでリンクの文字色を変える方法

Lesson 7

時間: 04:48

特定の親要素の子要素にだけ、スタイルを適応させる方...

Lesson 8

時間: 03:25

複数のタグに同じCSSをかける方法

Lesson 1

時間: 04:08

擬似クラスfirst-childとlast-child

Lesson 2

時間: 06:35

擬似クラスを使った、横並びのナビゲーションを作って...

Lesson 3

時間: 06:14

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

Lesson 4

時間: 05:57

nth-childとnth-of-typeの使い方と違い

Lesson 5

時間: 09:52

nth-child擬似クラスを使って、見やすいテーブルを作...

Lesson 6

時間: 05:40

最初の文字・行にスタイルを適応させる方法

Lesson 7

時間: 03:54

空要素のみにスタイルを適応させる方法

Lesson 8

時間: 04:50

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

Lesson 9

時間: 04:36

チェックボックスにチェックが入った時にスタイルを適...

About the Expert - nestonline-53

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

卒業生は1000名以上です。

 

★提供しているサービス

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

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

 

Webデザインキャンプ

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

 

Railsキャンプ

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

 

など

nestonline-53 によるその他のコース

Reviews Reviewを書く

[[ review.learner_username ]]

[[ review.comments ]]

レビューはありません