コース概要
CSS / CSS3を７０位上のレッスン、７時間かけてしっかり学びます。
CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につきます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。
★こんな人におすすめ★
- HTMLはわかるがCSSがまだできなくて始めたい人
- 最新のCSSを学び直したい人
★特徴★
- CSSを使ったレイアウトの組み方や、フォームのスタイルなど、CSSの基礎を学びつつ、実践的なスキルが身につく
- 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
- ５分程度の動画が７０レッスン以上 充実した内容ですが、無理せず学べる
★内容★
（1）CSS入門 第一回
初めてCSSを学習する方向けに、CSSの基本的な記述方法をレクチャーします。 一つのサイトを作成する流れの中で、CSSで出来る事はどんな事なのか？その読み込み方法など、まずはじめに覚えるべき操作についてお話しします。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めます
（2）CSS入門 第二回
簡単でかつはじめに覚えるべき、セレクターの書き方や、コメントアウトの書き方を学びます。 初心者向けに構成しているので、複雑な機能やショートカットキーは極力使わずに進めて行きます。 「CSS入門 第１回」の続きの章になりますので、初めてこの章をご覧になる方はまずこの前の章から始めてください。
（3）テキストのスタイル
テキストの大きさや種類、太さといった、テキストのスタイルを設定するためのCSSについて学んでいきます。 シンプルなサイトのデザインを行いながら学んでいくので、楽しみながら学習していただけます。 初心者向けの章なので、複雑な機能やショートカットキー等は使用せず、気軽に取り組んでいただけます。
（4）ボックスのスタイル
Webサイトのレイアウト等を組む際に、エリアの横幅、縦幅や余白などを調整する方法を学びます。 これらをCSSを使ってコントロールするためには、「ボックスモデル」という概念を理解する必要がありますので、作品作りを通して、１つずつ着実にマスターしていきましょう。
（5）背景・シャドウ・リスト
背景に色・画像を適応させたり、影をつける、またリストのアイコンを画像にする方法を学びます。 これらのCSSをマスターすれば、より一歩進んだWebサイトマークアップが可能になります。 この機会にぜひ、習得してください。
（6）レイアウト
Webサイトのレイアウトを組むためのCSSの記述方法について学びます。 また、ボックスを２つ左右に並べる「２カラムのウェブサイトレイアウト」を組んだり、 全体を真ん中に寄せる「センタリング」させたりといった方法を学びます。 ボックスモデルを理解していないと、習得が難しい章になっていますので、「ボックスモデル」の章をご覧になってからこの章に挑んでください。
（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サイトを２カラムレイアウトにする方法
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サイト２カラムレイアウトを作ってみよう
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
チェックボックスにチェックが入った時にスタイルを適...
レビューを書く
[[ errors.rating[0] ]]
[[ errors.comments[0] ]]
[[ serverMessage ]]
[[ errors.course_id[0] ]]
プロモーション動画
プレーヤーを読み込んでいます...
プレーヤーを読み込んでいます...