Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS3 by Mind Map: CSS3

1. Selectors

1.1. idやclassを使わなくても要素をつかむことができる

1.2. 無駄なidやclassを使わなくてもよくなる

1.2.1. htmlがきれいになる

1.2.2. 例

1.2.2.1. trタグの奇数だけ背景を

1.2.2.1.1. tr.nth-child(odd) { background-color:#006666; }

1.2.2.2. trタグの3の倍数だけ

1.2.2.2.1. nth-child(3n)

1.2.2.3. trタグの4番目だけ

1.2.2.3.1. nth-child(4)

2. MediaQuery

2.1. javascriptを使わずに幅の指定の条件などで、CSSを切り替えられる

2.1.1. 例

2.1.1.1. 画面の幅が50px以下だと切り替わる

2.1.1.1.1. media=”screen"

2.1.1.1.2. media=”screen and (max-width:50px)"

3. Effect

3.1. CSS Transitions

3.1.1. 無駄にJSを使わなくてもよくなる

3.2. Fonts

3.2.1. 書体情報は、書体情報で持たすことが可能

3.2.1.1. @font-face

3.2.1.1.1. 例

3.2.2. 画像での表現でなくてもいけるようになった

4. Selection

4.1. 選択した箇所に関する要素

4.1.1. 例

4.1.1.1. 選択した状態にすると背景色

4.1.1.1.1. *::selection { background-color:"#F00" }