HTML5&CSS3 メモメモ。
個人用にメモ。
・HTML5ではDOCTYPE宣言は不要だが、記述しないと、昔のソースコードであると判定して
表示モードを勝手に古いページ向けに切り替えてしまう為、＜!DOCTYPE html＞を記述する。
・header内のtype属性の記述は省略できる。
style要素は「text/css」、scripr要素は「text/javascript」、
link要素は「rel="stylesheet"」がデフォルト値として設定された為。
・strongタグは強調ではなく「重要度（importance）」を示す要素に変わった。
・便利なweb構築用テンプレートHTML5 Boilerplate
ブラウザ間の表示差異、特定のブラウザでのバグ、表示速度高速化などを考慮した、
さまざまなノウハウがつまっている。
・HTML5に対応していない旧来のブラウザでも新要素を認識させるためのjsファイル
html5 shivをheader内に組み込むと、正常に表示される。
・HTML5 Boilerplateでは、表示スタイルが「ノーマライズ」で余白・段落が入ってしまっているので、
リセットYahoo! User Interface LibraryのCSS Resetをhead要素内に記述し、
完全にリセットさせる。
・15秒でHTML5プロジェクトが始められるInitializr。
レスポンシブWebデザインのテンプレもダウンロードできて便利！
【ベンダープリフィクス】
Google Chrome,Safari -webkit-
Firefox -moz-
Internet Explorer -ms-
Opere -o-
【疑似要素】
〇::first-line 〇の1行目
〇::first-letter 〇の1文字目
〇::before 〇の直前に挿入（contentプロパティ使用）
〇::after 〇の直後に挿入（contentプロパティ使用）
【グリッドレイアウト用サービス】
gridsystemgenerator.com
960 grid system
978 Grid system
Variable Grid System
【各ブラウザ対応状況】
findmebyIP.com
Can I use...
Modernizr
ブラウザに実装状況を分析し、必要に応じてHTML要素にクラスを付け加えてくれる。
【CSS3ジェネレーター】
●さまざまなCSS3プロパティに対応
CSS3 Generator
CSS3.0 Maker
CSS3 Sandbox
●ボックスシャドウ・グラデーション
Layer Styles
●マルチカラムレイアウト
CSS3 Multi Column Layout Generator
●ボーダーイメージ
border-image-generator
●グラデーション
Grad3
Ultimate CSS Gradient Generator
●CSS3アニメーション
Animate.css
Stylie
●CSS3で作る吹き出しを作成する
CSSARROWPLEASE
【box-sizingプロパティ】
CSS3で追加されたプロパティ
box-sizing: content-box; 通常通り、padding、border-widthは含まれない
box-sizing: border-box; padding、border-widthがwidth値に含まれる。
コンテンツエリアの幅はwidthからpaddingおよびborder-wisthを差し引いた値となる。
●SVG（Scalable Vector Graphics）
XMLによって記述されたベクターイメージ言語のこと、あるいは SVG で記述された画像形式の事。
写真には不向きで、ロゴ・アイコンで力を発揮する。
