CSS3入門


## URL
[CSS3入門 (全19回) - プログラミングならドットインストール](http://dotinstall.com/lessons/basic_css3)

## 内容

### 01 CSS3とはなにか

- 特徴
 - 多彩な色の表現
 - W3Cが策定中なので、標準化されてない。
 - 各ブラウザが先走って対応しているので、ブラウザによって実装が異なる。

### 02 ベンダプレフィックス

```css
border-radius: 5px;
```
これは、chrome, safariでは

```css
-webkit-border-radius: 5px;
```

firefoxでは

```css
-moz-border-radius: 5px;
```

operaでは

```css
-o-border-radius: 5px;
```

ieでは

```css
-ms-border-radius: 5px;
```

- ↓を使うと、使用するオプションが、ベンダプレフィックスを使わなくても使えるかどうか分かる。

[Can I use... Support tables for HTML5, CSS3, etc](http://caniuse.com/)


### 03 角丸をつけてみよう 

```css
border-radius: 10px;
```

```css
border-top-right: 10px;
```


### 04 角丸を使ったテクニック 
```css
border-radius: 50%;
```

とすると、円になります。

```css
border-radius: 50%;
background-iamge: url(~~~~);
```

とかすると、画像の切り抜きができるわっしょい

### 05 色の指定と透明化

いままでは
```css
background-color: #ff0000
```
とかって指定できたけど、css3では

```css3
rgba(0,0,0,0.7);
```

aは透明度

```css3
opacity: 0.4;
```
とかすると、要素の透明度を指定できる


### 06 ボックス要素に影をつけてみよう 

```css3
box-shadow: x座標px y座標px ぼかしの大きさpx rgba(0,1,2,0.3) inset(内側に影);
```
また , 区切りで複数影の指定できる


### 07 テキストに影をつけてみよう 
```css3
text-shadow: 5px 5px 3px 3px
```

### 08 線形グラデーションをつけてみよう 
```css3
backgournd: linear-gradient(開始色 10%, 中間色20%, 最終色)
backgournd: linear-gradient(開始位置(right, 45degなど)開始色 10%, 最終色)

```

**※IE非対応、ベンダプレフィックス必須**



### 09 円形グラデーションをつけてみよう 

```css3
radial-gradient(座標(top right, 10px 10pxなど), circle, 開始色, 終了色)
```

### 10 要素を変形させてみよう(1)
```css3
transform: scale(横方向, 縦方向)// 拡大縮小
transform: scaleZ(横方向)// Z方向に拡大
transform: scale3d(x,y,z)// Z方向に拡大
transform-origin:0 0 // 拡大縮小起点
```

### 11 要素を変形させてみよう (2) 
```css3
transform: transrate(x, y); //移動
transform: rotate(45deg); //回転
transform: skew(34deg); //傾斜
```


### 12 簡単なアニメーションをつけてみよう 
```css3
transition-propaty: all //アニメーションの対象になるもの(heightとか普通はall)
transition-duration: 1s // アニメーションにかかる時間
transition-timing-function: ease /*linear, ease-in, ease-out,ease-in-out*/
transition-delay: 2s; // 何秒後に実行するか
```

これらはtransitionでまとめて実行できるよ

時間が2つ出てきたら最初にdurationとみなす

### 13, 14 キーフレームでアニメーション (1) 
```css3
animation-name: animationの名前
animation-duration: アニメーションにかかる時間
animation-timing-function: アニメーションの種類
animation-delay: アニメーション開始の時間
animation-iteration-count: アニメーションの繰り返し指定
animation-direction: normal(フツーにアニメーション), alternate(アニメーションのあと逆に戻る)
```

@-webkit-keyframes animationTest {
	0%  {width 50px;}
	50% {widht: 100px;}
	100% {width: 200px;}
}

### 15 属性セレクタを使ってみよう

```css3
a[href="http://google.com"]
```

これは

```css3
a[href^="http"]  //先頭一致
a[href$="com"]   //末尾一致
a[href*="google.com"] // 文中一致
```
というように、ワイルドカードで書けたりする。


### 16 n番目に来る要素を指定する 

```css3
/* nth-child */

div p:nth-child(2) {
}
```

div要素内の2番目の要素がp要素だった場合、適応される。

odd, evenで偶数、奇数が指定できる。

また、(3n)とか(3n+1)なんてこともできる。

最初と最後を指定する場合は

```css3
div p:first-child {
}
div p:last-child {
}

```
一つだけの要素に適用したい場合は
```css3
div p:only-child {
}
```

とする。


### 17 ある要素のうち、n番目に来る要素 
nth-of-type: 要素を指定して何番目、という指定が可能

```css3
div p:nth-of-type(2)
```

これは、p要素のみをカウントして指定できる。

```css3
div p:first-of-type
```
最初のp要素に対して指定

```css3
div p:last-of-type
```

最期のp要素に対して指定

```css3
div p:only-of-type
```

p要素が一つだけの場合適応


### 18 要素の状態で指定するセレクタ 
* disabledに対して

```css3
input[type="text"]:disabled {

}
```

* enabled
```
input[type="text"]:enabled {

}
```

* checked
```
input[type="text"]:checked + label {
}
```

+ は同列の要素を指定
この場合、ラジオボタンのチェックの入った同列のlabel要素に対して指定する


### 19 CSS3のジェネレータを見てみよう 
* css3 3.0 Maker
* border-radius.com
* CSS Button Generator
* colorzilla/gradient-editor