これからのhtmlコーティング（2014年）
最近というか…SEOやユーザビリティなど諸々考慮する場合のHTMLコーティングについて。また月日がたてば変わるだろうね。
HTMLの記述関連
ヘッダやフッタなど専用のタグが色々と用意されているので正しくマークアップしましょうってヤツ。
キーワードは「HTML5」。
IE8以下の対応について
ばっさりと切り捨てるってコトができるならいいんだけど…出来ない場合は「html5shiv.js」ってヤツを使う。
CSSの記述関連
CSSのメンテが楽になるってヤツ。
キーワードは「sass」。winだったらrubyのインストールが必要。macは知らない。
スマホやタブレット端末関連「レスポンシブ」
要は…端末ごとにCSSを用意しようぜってヤツ。
キーワードは「レスポンシブ」もしくは「レスポンシブデザイン」。CSS3、メディアクエリー、ビューポートなどが絡む。
メディアクエリーは「@media screen and (min-width: 768px)」とか。
ビューポートは「meta name=”viewport” content=”width=device-width,user-scalable=no,maximum-scale=1″」とか。
基本、画面サイズからCSSを切り分けるって考え。フレキシブルデザインと組み合わせるのがラクかも。
画像がらみ：端末用画像
PC用とスマホ用で同じ画像を使いまわすってのもアリだけど、ダウンロード時間を考えるとスマホ用に小さい画像にしてあげたほうがいいだろうね。
…となってくるとjsで画像ファイルの読み込み切替も必要になるね。下記サイトでサンプルがあった。
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験 | BlackFlag
実際問題、出来る限り画像ファイルを使わないデザインにしたほうがいいんだろうね。
画像がらみ：Retina
キーワードは「Retinaディスプレイ」。
Retinaディスプレイってヤツは通常のディスプレイの倍以上の解像度らしい。そのため通常のディスプレイ用の画像とRetinaディスプレイ用にサイズを2倍にした画像の2つ用意してあげる必要があるらしい。
・・・ディスプレイによって画像を切り替える必要もあるだろうね。
IE8以下の対応について
IE8以下も対象としてレスポンシブデザインにするならJS（Respond.js）も絡んでくる。
キャッシュ対策として
「Ctrl + F5」をすれば良いんだけど…しない人のために用意してあげるってヤツ。
とりあえず…文字コードの指定のしたに「meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″」ってヤツを追加。
SNS対応として
Facebookなどで「いいね」してもらったときに表示する内容。
キーワードは「OGP」。metaタグに色々と記述するらしい。