◆HTML5について
html5とはhtmlの標準化団体であるw3cが2010年に策定したhtmlのバージョン5の事。
前回のバージョン4は1999年策定なので実に11年ぶりのメジャーアップになり、
html5は2008年に草案が発表され現在、各種ブラウザに取り入れられ始めている。
今すぐhtml5にしないといけないという訳ではありませんが、
将来の検索エンジン対策や周辺サイトがhtml5への変更が進む中、
覚える必要がある言語といえる。
まだ正式な施行前で仕様が固まっていないこともあり、今後も流動的に変わる事があります。
HTML5の最終的な標準化完了（勧告化）は、 2014年の第4四半期（Q4）を予定
◆HTML5の特徴
html5の特徴は多数ありますが、その中でも構造化タグと動画編集タグの追加が大きな特徴。
header,footer,articleなど、ヘッダー、フッター、記事部分がどこか区別されるようになった。
audio.video,canvasタグにより、動画編集が可能になった。
アップルがflashを採用しない事により、audio,videoタグ、また各種API機能が注目されていて、
近い将来大きく広まると推測されている。
◆HTML5の変更点
[その1]
<!DOCTYPE html>
ドキュタイプ宣言がシンプル。
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”ja-JP” lang=”ja-JP”>
htmlタグは、こんな書き方でOK
[その2]
スマートフォンを作る時のmetaタグ
<meta name=”viewport” content=”width=任意の設定” />
そのほかスマートフォンの設定の仕方はこちら>>
http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/
[その3]
タグの意味付けや新しいタグ
<nav> ナビゲーションを表すタグ ※中の横並びにするタグは、リストタグでそのままです。
<article> この中で情報が独立できるもの ※例えば新着情報など
<section> 章、仕切り、部分、節、項などのかたまり、まとまりのことを指します。を表す
<header> ヘッダーを表す
<footer> フッターを表す
<h1> XHTMLでは、1ページ対し、1回のみ使用だったのに対し、各段落（まとまり）に対して1つ使えるという考え方に変更。ただし、<h1>～<h6>の使う順番は変わらず。
<aside> バナーなどのエリアを作る時に使用
<figure> <img>タグを囲うタグ
<figcaption> 画像の説明タイトルを入れるタグ
<audio> 音声を再生する際に使用するタグ。
・src属性 音声ファイルを指定する
・preload属性 音声をあらかじめ読み込む（auto、metadata、none）
・autoplay属性 音声を自動再生する
・loop属性 ループ再生を指定する
・controls属性 インターフェースを表示する
<video> 動画を再生する際に使用するタグ
※webm、mp4 などファイル形式がある。ブラウザによって対応できるファイル形式がある。
ファイル形式を変換したい場合フリーソフト（Miro Video Converter）などでファイル形式を変換出来る。
・src属性 動画ファイルを指定する
・poster属性 動画のヒントとなる画像を表示する
・preload属性 動画をあらかじめ読み込む（auto、metadata、none）
・autoplay属性 動画を自動再生する
・loop属性 ループ再生を指定する
・controls属性 インターフェースを表示する
・width属性 幅を指定する
・height属性 高さを指定する
■参考サイト
・もう悩まない！HTML5の「section要素」と「article要素」の違いについて
>>http://www.hp-stylelink.com/news/2013/07/20130703.php
・『aside要素』 / HTML5新要素一覧
>>http://www.html5-memo.com/new-element/aside/
・ゼロからHTML5サイト制作(第1回〜12回)
>>http://www.html5-memo.com/mdn/>http://www.html5-memo.com/mdn/”>http://www.html5-memo.com/mdn/
・audio 要素
>>https://developer.mozilla.org/ja/docs/Web/HTML/Element/audio
・video 要素
>>https://developer.mozilla.org/ja/docs/Web/HTML/Element/video
・HTML5 の audio 要素と video 要素でサポートされているメディアフォーマット
>>https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats
◆画像形式の扱い .svg
パスの形式をもった画像形式。jpgなどは拡大すると荒れてしまうのに対し、
svgはパスデータ所有しているので画像が荒れず、容量が小さい。
※写真などは扱えません。(Illustratorと同じです）
ちなみに、HTML5と記述するのが正式な書き方。
html5ではありません。
◆CSS3について
CSS3とは現在使われているCSS2.1から、色々な機能が追加されたCSSレベル3のこと。
勧告はされているが、まだ仕様が固まっていないので、今後も流動的に変わる事がある。
◆CSS3で出来ること
1.classやidに頼らないセレクタ作りが出来る
2.CSS3だけで表現できるデザインの幅が格段に広がる
3.floatやpositionに頼らず、簡単に柔軟な多段組を実現できるようになる
4.CSSだけで動的なページを作れる
5.ウェブフォントがサポートされる
6.多様化する画面サイズに応じて柔軟にCSSの切り替えが可能となる
◆transition効果
教科書（HTML & CSS標準デザイン講座）P266～
（時間的変化）をまとめて指定するプロパティ
・transition-property:all;
transition を適用するCSSプロパティ（background-color など）を設定する。
ここでのallは全ての
・diration-duration:2s;
transition の変化をどれくらいで表現するかを設定する。単位は s(秒)又はms(ミリ秒)
・transition-timing-function
transition の変化の具合を設定する。指定できる値は以下。
default
linear（一定のスピード）
ease-in
ease-out
ease-in-out
cubic-bezier() 4つの数字をカンマ区切りで指定
◆border-radius
角丸をつけるプロパティ。このプロパティにより今まで画像でしか円は作れなかったが、
円も表現できるようになった。
>>詳しくは、教科書（HTML & CSS標準デザイン講座）P292
◆text-shadowプロパティ
テキストにドロップシャドウが付けられるプロパティ。
色の指定方法は16進数でも出来るが、rgbaの方が、透明度指定が出来るのでrgba指定の方が便利。
>>詳しい指定方法はこちら
http://coliss.com/articles/build-websites/operation/css/css-text-shadow-comilation-by-boltaway.html
◆box-shadowプロパティ
ボックスに1つまたは複数の影をつける際に使用。
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;
スペース区切りで、
水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 inset
を指定する。
ぼかし距離、広がり距離、影の色、insetキーワードは省略可
・inset＝内側にシャドウをつける
◆transformプロパティ
transformプロパティの
translate ()、translateX()、translateY()、translateZ()、translate3d()は、
要素の表示位置を移動させる際に使用。
transform:translate(10px,20px);
・translate(X方向の距離, Y方向の距離)
translate()関数ではX方向とY方向の距離で2D移動を指定。
Y方向の距離は省略することが可能。この場合のY方向の距離は0となる。
・translateX(X方向の距離)
translateX()関数では、X方向の距離で移動を指定します。
・translateY(Y方向の距離)
translateY()関数では、Y方向の距離で移動を指定します。
・translateZ(Z方向の距離)
translateZ()関数では、Z方向の距離で移動を指定します。
※translateZ()関数は％値を指定することができないので注意。
もし％で値を指定しても0と同じになる。
・translate3d(X方向の距離, Y方向の距離, Z方向の距離)
translate3d()関数では、X方向とY方向とZ方向の距離で3D移動を指定する。
Y方向とZ方向の距離は省略可能。この場合のY方向とZ方向の距離は0とる。
※まだz方向はかかりません。
・scale(数値, 数値)
transformプロパティのscale()、scaleX()、scaleY()、scaleZ()、scale3d()は、
要素を拡大、または、縮小表示する際に使用します。
scale()関数では、2つの数値で2D縮尺比率を指定する。
1つ目の数値はX方向、2つ目の数値はY方向の比率です。
2つ目の数値は省略することができますが、この場合には最初の値と同じになる。
・scaleX(数値)
scaleX()関数では、X方向の縮尺比率を指定。Y方向とZ方向の比率は1となる。
・scaleY(数値)
scaleY()関数では、Y方向の縮尺比率を指定。X方向とZ方向の比率は1となる。
・scaleZ(数値)
scaleZ()関数では、Z方向の縮尺比率を指定。X方向とY方向の比率は1となる。
・scale3d(数値, 数値, 数値)
scale3d()関数では、3つの数値で3D縮尺比率を指定。
1つ目の数値はX方向、2つ目の数値はY方向、3つ目の数値はZ方向の比率。
・origin
2D変形、または、3D変形の原点を指定する。
・skew(xy[x,y])
transformプロパティのscale()、scaleX()、scaleY()、scaleZ()、scale3d()は、
要素を拡大、または、縮小表示する際に使用。
・rotate(deg)
回転（deg で指定。10deg や -10deg など）
・:perspective(数値)
3D変形の奥行きの深さを指定する。遠近効果をCSSで作る事ができる。
◆opacityプロパティ
要素の透明度を指定する際に使用。
透明度は、0.0（完全に透明）～1.0（完全に不透明）の数値で指定する。
IE用のopacity効果の方法
>>詳しくはこちら
http://kojika17.com/2011/02/css3-for-ie.html