CSS3基礎

角丸「border-radius」

sample1
sample2
sample3
sample4
sample5

角丸「border-radius: 50%;」

sample6
sample7

背景透過「background-color: rgba(0,0,0,0.5);」 / 要素全体「opacity: 0.3;」

sample8
sample9

ボックス影「box-shadow」

sample10
sample11
sample12
sample13
sample14
sample15

テキスト影「text-shadow」

sample16
sample17
sample18

背景色グラデーション（線形）「linear-gradient」

sample19
sample20
sample21
sample22
sample23
sample24
sample25
sample26

背景色グラデーション（円形）「radial-gradient」

sample27
sample28
sample29
sample30
sample31
sample32
sample33
sample34
sample35

要素を変形させてみる(1)

sample36
sample37
sample38
sample39
sample40

要素を変形させてみる(2)

sample41
sample42
sample43
sample44
sample45

簡単なアニメーションをつける

sample46

キーフレームでアニメーションをつける

sample47
sample48

属性セレクタを使う

リスト

n番目の要素に対して指定する

▼2番目の要素を赤文字色にする。

▼奇数番目の要素を青文字色にする。

▼偶数番目の要素を緑文字色にする。

▼3の倍数番目の要素をオレンジ文字色にする。

▼3n+1(1,4,7...)番目の要素をteal文字色にする。

▼はじめの要素をpurple文字色にする。

▼最後の要素をmaroon文字色にする。

▼要素がひとつだけの場合olive文字色にする。

ある要素のうち、n番目の要素に対して指定する

▼li要素のうち、2番目のli要素を赤文字色にする。

▼li要素のうち、はじめのli要素を青文字色にする。

▼li要素のうち、最後のli要素を緑文字色にする。

▼li要素のうち、li要素がひとつのみの場合オレンジ文字色にする。

要素の状態で指定するセレクタ

ユーザー情報

あなたのID名:

Email: