CSS3入門

参考：http://dotinstall.com/lessons/basic_css3

# CSS3とは

多彩な表現ができる（影をつけたり角丸をつけたりアニメーションをつけたり）
W3C.orgが策定中→各ブラウザによって実装がまちまち

##ベンダープレフィックスとは何か？
### 例
border-radius: 5px;
-webkit-border-radius: 5px;
先行的に実装している実験的な機能だと示すもの

### 種類
* -webkit- : chrome / safari
* -moz- : firefox
* -o- : opera
* -ms- : ie

### 対応状況
- caniuse.com
　ex) border-radiusで検索すると…

#実際の装飾

##角丸をつける

半径10pxの角丸
`border-radius: 10px;`

時計周りに
`border-radius: 10px 20px 30px  40px;`
* 3つ→左上、右上と左下、右下
* 2つ→左上と右下、右上と左下

右上だけ
`border-top-right-radius: 30px;`

```lang:html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>CSS3の勉強</title>
    <style>
       div {
         width: 100px;
         height: 100px;
         padding: 10px;
         margin: 30px;
         background-color: orange;
         border: 2px solid orangered;
         border-radius: 10px;
       }
     </style>
</head>
<body>
   <div id="test1">test1</div>
   <div id="test2">test2</div>
</body>
</html>
```

##角丸を使ったテクニック

正円をつくる
`border-radius: 50%;`

絵を切り抜く
`background-image:url('baby.jpg')`;

## 色の指定と透明化

色
CSS3ではrgbaが使える（aは透明度）
`background-color: rgba(0,0,0,0.7);`

要素の透明化（背景を透けさせることができる）
`opacity: 0.3;`

## ボックス要素に影をつける

`box-shadow: 10px 20px 5px 6px  rgba(0,0,0,0.3} inset,
　　　　　　　5px 5px 5px red;`

* 3つ目：ぼかし
* 4つ目：影の大きさ
* inset→内側
* ,で続けて複数指定可能

## テキストに影をつける

右下に影
`text-shadow: 5px 5px 3px red,
  10px 10px 3px blue;`

立体的に見せる
`text-shadow: 1px 1px 0 white, 2px 2px 0 black;`

左上に影
`text-shadow: -2px -2px 0 black;`

## 線形グラデーション

`background: -webkit-linear-gradient(red 10%,yellow 90%,blue);`
※IEでは実装されておらず、その他でもベンダープレフィックスが必要

`background: -webkit-linear-gradient(right top,red,blue);`
※right top→角度でも可能（45deg）

## 円形グラデーション

3色で
`background: -webkit-radial-gradient(red 10%, yellow 90%, blue);`

右上から
`background:-webkit-radial-gradient(top right, red, blue);`

左上からの距離で（右、下）
`background:-webkit-radial-gradient(10px 10px, red, blue);`

グラデーションの形状とサイズを指定
`background: -webkit-radial-gradient(10px 10px, circle, red, blue);`

* circle：楕円形を円に変える
* contain：円を含ませる
* cover：いっぱいに広げる
* ellipse：楕円形にする

## 要素を変形させる

横に1.2倍、縦に1.5倍
`#test2 {
-webkit-transform:scale(1.2, 1.5);`

変形の起点
`-webkit-transform-origin:top left;`
`-webkit-transform-origin:10px 10px;`

一方向にだけ拡大（X,Y,Z(立体空間),3d）
`-webkit-transform:scaleX(1.2);`

## 要素を変形させる

移動させる
`-webkit-transform:translateX(10px);`
`-webkit-transform:translate(10px 10px);`

回転させる
`-webkit-transform:rotate(45deg);`

傾ける
`-webkit-transform:skewY(45deg);`
`-webkit-transform:skew(45deg, 20deg);`

## アニメーションをつける

`div:hover {
  height: 200px;
  background-color:red;
}`

`div {
   -webkit-transition-property:all;
   -webkit-transition-duration:1s;
   -webkit-transition-timing-function:ease;
   -webkit-transition-delay:2s;
}`

* property：対象（height.width）
* duration:かかる時間
* timing-function：
ease（開始と終了がなめらか）
linear（一定の時間で）
ease-in（開始がゆっくり）
ease-out（終了がゆっくり）
ease-in-out：（開始と終了がゆっくり）
* delay：遅れて開始

一気に指定可能
`-webkit-transition: all 1s ease 2s;`

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

アニメーションの設定
`div {
  -webkit-animation: animationTest 5s ease 1s infinite normal;
}`

右から順番に
* animation-name:
* animation-duration:
* animation-timing-function:
* animation-delay:
* animation-iteration-count:
* animation-direction: normal, alternate（逆に戻る）

キーフレームの設定
`@-webkit-keyframes animationTest {
   0% { width: 50px; background: orange; } 
   50% { width: 100px; background: blue; } 
   100% { width: 150px; background: purple; }` 


## 属性セレクタを使う

ある特定のものだけにスタイルをつけたいというとき

`a[href="http://dotinstall.com"] {
      color: yellow;
}`

部分一致（先頭）
`a[href^="http"] {
      color: yellow;
}`

部分一致（後方）
`a[href$=".jp"] {
      color: yellow;
}`

～が含まれているもの
`a[href*="dotinstall"] {
      color: yellow;
}` 


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

子要素のうち、n番目にくる要素にスタイルをあてる方法


```lang:html
<div>
   <h1>大見出し</h1>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <h2>中見出し</h2>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <h2>中見出し</h2>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
   <p>こんにちは。</p>
</div>
```

2番目にくるp要素を赤に
`div p:nth-child(2) {
      color: red;
}`
※5にするとh2なので無効

5番目にくる要素を赤に
`div *:nth-child(5) {
      color: red;
}`

奇数番目の要素を赤に
`div *:nth-child(odd) {
      color: red;
}`

* 偶数(even)
* 3の倍数(3n)
* 3n+1

* first-child
* last-child
* only-child (子要素が一つだけの場合に適用）　


##ある要素のうち、n番目に来る要素を指定する

`div p:nth-of-type(2) {
   color: red;
}`

一番初めのp
`div p:first-of-type {
   color: red;
   }`

* last-of-type
* only-of-type


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

※フォームなどで使える

```lang:html
<div>
<h1>大見出し</h1>
<p>Username: <input type="text" name="user_name" value="taguchi" disabled></p>
<p>E-mail:<input type="text" name="email"></p>
<p><input type="radio" name="opt1" value="1"> <label>iPhone</label>
<input type="radio" name="opt1" value="2"> <label>Android</label>
</p>
</div>
```

書き込めなくしてあるもの
`input[type="text"]:disabled {
  font-weight: bold;
}`

書き込めるもの
`input[type="text"]:enable {
  border: 1px solid red;
}`

ラジオボタンの横の文字をスタイリングする
`input[type="radio"]:checked + label {
     font-weight: bold;
}`　　　

##CSS3のジェネレータ

サイトを使ってCSS3が書ける
* http://www.css3maker.com/
* http://border-radius.com/
* http://css3button.net/
* http://www.colorzilla.com/gradient-editor/