HTML5

１．HTML5の新しいタグ

<!DOCTYPE html>  文書型宣言
<meta charset="UTF-8"> 文字コード指定

セクショニング

<header> ヘッダ
<footer>  フッタ
<nav>   ナビゲーション
<article> 記事
<section>   章
<aside>   補足

フォーム

<input type="email" > メールアドレス入力
<input type="url" > URL入力
<input type="number" > 数字入力
<input type="search" > 検索入力
<input type="date" > 日付入力
<input type="range" > 範囲入力
<input type="color" > 色入力

属性：

required 必須
max,mix 最大値、最小値（数字や範囲で）
placeholder 初期文字列
autofocus 最初にカーソル

２．CSS3

ウェブフォント

Google Web Fonts
http://www.google.com/webfonts

角が丸いボックス

border-radius: 10px;

テキストに影を作る

text-shadow: 水平 垂直 ぼかし 色;
例：text-shadow: 1px 1px 2px gray;

ボックスに影を作る

box-shadow: 1px 1px 2px black;

透過色

opacity:透明度（0～1.0）
例：opacity: 0.7;

または色を指定するとき：rgba(R,G,B,透明度)
例：background-color: rgba(255,255,255,0.7);

グラデーション

background-imageまたはbackgroundを指定するとき：
linear-gradient(開始位置,開始色,終了色);

注：現在はベンダープリフィックスを付ける必要がある。
chrome/safariの場合　-webkit-linear-gradient
FireFoxの場合 -moz-linear-gradient

例：
css background:-webkit-linear-gradient(top,yellow,white);

移動・変形

例：移動　横30px、縦20px
css -webkit-transform: translate(30px,20px);
例：拡大・縮小　1.2
css -webkit-transform: scale(1.2);
例：回転　45度
css -webkit-transform: rotate(45deg);
例：傾き　45度
css -webkit-transform: skewX(-45deg);

時間経過

例：背景色変更時　1秒で
css -webkit-transition: background-color 1s linear;
注：変更される前に指定しておく。

例：画像の上にマウスを載せると45度回転

img {
　　-webkit-transition: -webkit-transform 1s linear;
}
img:hover {
　　-webkit-transform: rotate(45deg);
}

HTML5の新機能メモ