新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 CSS3とは何か？ (02:43) 無料公開中
- 主な特徴
- 必要な知識
- 必要なツール
- レッスンの範囲について
-
#02 ベンダープレフィックスとは何か？ (02:54) 無料公開中
- CSS3の対応状況
- ベンダープレフィックスの説明
- ベンダープレフィックスの種類
- caniuse.comの使い方
-
#03 角丸をつけてみよう (02:36) 無料公開中
- border-radius
-
#04 角丸を使ったテクニック (01:03) 無料公開中
- 円形の作り方
- 画像の切り抜き方
-
#05 色の指定と透明化 (02:12)
- rgba
- opacity
-
#06 ボックス要素に影をつけてみよう (02:37)
- box-shadow
-
#07 テキストに影をつけてみよう (02:11)
- text-shadow
-
#08 線形グラデーションをつけてみよう (02:51)
- linear-gradient
-
#09 円形グラデーションをつけてみよう (02:57)
- radial-gradient
-
#10 要素を変形させてみよう (1) (02:59)
- transform:scale
- transform-origin
-
#11 要素を変形させてみよう (2) (01:56)
- transform:translate
- transform:rotate
- transform:skew
-
#12 簡単なアニメーションをつけてみよう (02:56)
- transition
-
#13 キーフレームでアニメーション (1) (02:14)
- animation
-
#14 キーフレームでアニメーション (2) (02:11)
- animation
- 動作確認
-
#15 属性セレクタを使ってみよう (02:30)
- a[href="foo"]
- a[href^="foo"]
- a[href$="foo"]
- a[href*="foo"]
-
#16 n番目に来る要素を指定する (02:52)
- nth-child
- first-child
- last-child
- only-child
-
#17 ある要素のうち、n番目に来る要素 (02:55)
- nth-of-type
- first-of-type
- last-of-type
- only-of-type
-
#18 要素の状態で指定するセレクタ (02:44)
- :disabled
- :enabled
- :checked
-
#19 CSS3のジェネレータを見てみよう (01:55)
- http://www.css3maker.com/
- http://border-radius.com/
- http://css3button.net/
- http://www.colorzilla.com/gradient-editor/
