■■ HTML5
▽背景
～HTML4.０１の時代は、htmlの仕様がとてもゆるく、WEB上の情報が整理されていない混沌とした状態になっていた～
↓
～HTMLをXMLで定義しなおしたXHTMLというものを策定し、htmlタグをもっと厳格なものにし、文章の構造化を進めた～
↓
～本来のHTMLの目的、つまり文書の構造化をより詳細にするため、今のhtmlでは足りない要素を新たなタグとして定義した～
▽主な特徴・仕様
HTML4.01/XHTML1では文章のかたまりやセクションのかたまりをdivタグで組むしかなかったり、
それぞれの要素（ヘッダ、フッタ、コンテンツ、サイドナビ）も、クラスやID名で意味づけるしかありませんでした。
しかし、HTML5では、htmlがもつタグでのみよりWEBの文書を構造化できるよう、タグが増やされています。
▽主なタグは以下に記述していきます。
－header,footer
・サイトのヘッダー、フッターを組むためのタグ
－section
・一つの章、のような意味合いで使用されるようです
・正直、下のarticleとの関係性が微妙です
・正直、下のarticleとの関係性が微妙です
－article
・ブログの記事のようなもの
・読み物コンテンツ
・意味がsectionよりも多少強い（判断が微妙なものは、sectionが無難）
－nav（ナビゲーション）
・サイト内にある、ありとあらゆるナビゲーションで使用
・サイト内にある、ありとあらゆるナビゲーションで使用
・SEO上有効なのではないか
・これを元に、googleのsitemap等を自動作成出来たりするのではないかとも言われている
▽DOCTYPE
<!DOCTYPE html>
▽ブラウザ対応状況
－IE
－IE
・ver7,8は対応してきているが、IE6はまったくだめなため、実務レベルでの使用は厳しい
・解決方法として、コンディショナルコメントでhtml5.jsを読み込めばOK
・ただjsでarticleタグをcreate elementし、IEでも新要素として認識させているだけらしい。
・jsオフの場合、ユニバーサルセレクタを使う事で対処はできるらしい（微妙）
▽所感
HTML5は、目的はとても有意義だと思いますし、実現すれば、CSSを組む際にクラスやIDが減るなど、
コーディング作業にも大きなメリットがあると思います。
しかし、現実問題、
■■ microfomats
▽目的
・htmlでは足りない要素を補う事で、文書構造をより充実したものにする
・連絡先等、WEB上以外で使用できるような情報を決まった形でマークアップする事で、
他のアプリケーションに引き渡す事が出来るようになる
▽作成ツール
・クラス名等を間違えると意味がないので、作成ツールを使う方が良いのでは
▽例
<div id="hcard-yuichiro-hirata" class="vcard">
<span class="fn">yuichiro hirata</span>
<div class="org">kamonohashi</div>
<div class="adr"><span class="locality">shibuya</span></div>
▽googleの対応
・vCardやreview等はインデックスし始めた★
▽検証サービス
▽その他
・vCardは電子名刺の標準規格フォーマット
■■ CSS3
▽ボックスモデル
・通常、25%width+borderのボックスを4つ並べると、合計が100%を超えるので、
カラム落ちしてしまう。
→-webkit-box-sizing:border-box;
つまり、IEをモダンブラウザに寄せるのではなく、モダンブラウザの動きをIEのボックスモデルの用に扱う、という、
ちょっと実務レベルでは微妙な感じ
・xray
▽specific extention（プレフィックス）
・-moz- Mozilla
・-webkit- Safari
・-o- Opera
・-ms- IE
「progressive enhancement」
優秀なブラウザにはより高い経験を。
▽border-radius
border-radius：1em, .5em;
border-radius：1em;
■■セレクタ
・first-child・・・指定した要素が親要素の中で一番最初の要素として存在する場合（tr>td）
・first-of-type・・・他に何があるにせよ、指定した要素の中で一番最初の要素（tr>th>td）
・nth-of-type(even)
・nth-child(2n+1)
▽3つづつスタイルを変更
-------
nth-child(3n)
nth-child(3n+1)
nth-child(3n-1)
-------
▽属性セレクタ
a[href$=".pdf"]
■■font embed
▽font face
@font face {
font-family:;
src:;
format("truetype") ←IEではこれがあるとムシする
}
■■ その他
・style master
・-webkit-transition: all 2s・・・全ての指定を2秒かけて実行
・background: -webkit-gradient()・・・背景グラデーション
