【旧版】CSS3入門 (全19回)
最新版のレッスンはこちらから »
【最新版】CSS基礎文法入門 (全37回)
多彩な表現力でWebサイトの見た目を制御することができるCSS3について学びます。
このレッスンでは CSS3 を使用しています。
-
#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/
#02 ベンダープレフィックスとは何か？
#03 角丸をつけてみよう
2012年7月25日
補足情報 「角丸」の読み方について
プログラミングとは直接関係ないですが、「角丸」は「かくまる」ではなくて「かどまる」と読みますので間違えないようにしましょう...。
#05 色の指定と透明化
2012年7月25日
補足情報 rgbaとはなにか？
rgbaはそれぞれ「(r)ed、(g)reen、(b)lue、(a)lpha」の略です。最後のalphaは透明度を表します。
#07 テキストに影をつけてみよう
2012年7月25日
補足情報 すごい「text-shadow」について
text-shadowは奥が深くて、うまく使えばネオンやエンボスといった効果を実現することができます。以下のサイトを参考にいろいろ試してみてください。
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://kachibito.net/web-design/css3-text-shadow-sample.html
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
http://kachibito.net/web-design/css3-text-shadow-sample.html
http://designshack.net/articles/css/12-fun-css-text-shadows-you-can-copy-and-paste/
#16 n番目に来る要素を指定する
2012年9月12日
補足情報 evenとoddの覚え方
直接プログラミングに関係ありませんが、even（偶数）とodd（奇数）がごっちゃになってしまう方は以下のように覚えておくとよいでしょう。
even = 4文字 = ぐうすう（4文字）
odd = 3文字 = きすう（3文字）
ちょっとしたコツですが、これなら間違えないですね。
even = 4文字 = ぐうすう（4文字）
odd = 3文字 = きすう（3文字）
ちょっとしたコツですが、これなら間違えないですね。
2013年9月9日
補足情報 「nth-last-child(n)」とは？
nth-child(n)と似たもので、nth-last-child(n)というものがあります。これは先頭からでなく、最後から数えてn番目の要素を選択するときに使います。
#17 ある要素のうち、n番目に来る要素
2012年7月27日
補足情報 「nth-last-of-type(n)」とは？
nth-of-type(n)と似たもので、nth-last-of-type(n)というものがあります。これは先頭からでなく、最後から数えてn番目の要素を選択するときに使います。
補足情報 caniuse.comについて
http://caniuse.com/