1. CSS3でできるようになったこと
1.1. 基本「今まで画像を使ってた」デザインを 画像ではなく「CSSの指定」で実現できるようになりました
1.2. シャドウ（影）をつける
1.2.1. テキストに
1.2.2. ボックスに
1.2.2.1. ボックスにシャドウを付けると ボックス要素が浮いているように見える
1.3. RGBaでの色指定＋alpha（透明度）指定
1.3.1. background-color: rgba(0,0,255,0.1);
1.3.2. 透明度はほかにもある
1.3.2.1. opacity: 0.4;
1.4. 背景にグラデーション指定
1.4.1. gradient
1.4.2. グラデーション指定は ベンダープレフィックスの数がすごい！
1.4.2.1. http://www.colorzilla.com/gradient-editor/ こんなサイトで自動生成するのがオススメ！
1.5. オブジェクトの回転
1.5.1. transform: rotate(-5deg);
1.6. オブジェクトの縮小
1.6.1. transform: scale(.8);
1.7. ボックスのリサイズ
1.7.1. resize: both; resize: none; resize: horizontal; resize: vertical;
1.8. 単語の改行
1.8.1. word-wrap: break-word;
1.8.2. すごく重要！
1.8.2.1. 連続した半角英数字はボックス内で自動改行されない！ すごく長いURLなどを画面上（たとえばテーブルタグの中など）に表示すると、 widthを指定していてもレイアウト崩れが発生する！！ Webの画面を作っていると必ず出くわすレイアウト崩れの基本的問題です
1.9. Webフォントの利用
1.9.1. @font-face { font-family: 'FontAwesome'; src: url('../font/fontawesome-webfont.eot?v=3.0.1'); src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype'); font-weight: normal; font-style: normal; }
1.9.2. これも重要！
1.9.2.1. フォントと聞くと「文字」と思いがちですよね？ それだけじゃない！ FontAwesomeというサイトを例にすると、 画像のようなアイコンがフォントとして提供されています。
1.9.2.1.1. え？何が良い？
1.10. 角が丸まったボックス
1.10.1. -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
1.10.1.1. CSS3より前の時代では 画像で表現してましたよね？
1.11. 細かいものだとほかにもあるけどこんなもんです
1.12. ベンダープレフィックス
1.12.1. IEやChromeなど ブラウザごとに対応の割合が違う
1.12.2. http://caniuse.com/ このサイトで確認しよう！
2. レンダリングエンジン
2.1. HTMLやCSSなどを解析し、 ブラウザ上の配置やサイズを計算・描画するエンジン
2.2. Trident
2.2.1. Internet Exploler
2.2.1.1. -ms-
2.3. Gecko
2.3.1. Firefox
2.3.1.1. -moz-
2.4. Webkit
2.4.1. Google Chrome
2.4.1.1. -webkit-
2.4.2. Safari
2.4.2.1. -webkit-
2.4.3. Androidの標準ブラウザ
2.4.3.1. -webkit-
2.5. Presto
2.5.1. Opera
2.5.1.1. -o-
3. javascript
3.1. AJAX
3.2. DOMの操作
3.2.1. getElementsByName
3.2.2. getElementById
3.3. onloadイベント
3.3.1. ブラウザごとにonloadイベントの走るタイミングが異なる？
3.3.1.1. ＩＥだとヒストリーバック（ブラウザの戻るボタン押下など）で 画面が表示されるとonloadイベントが実行される
3.3.1.2. FirefoxやChromeなどはヒストリーバックで 画面が表示されてもonloadイベントは実行されない
4. おすすめ
4.1. jQuery
4.1.1. jQuery本体
4.1.1.1. ブラウザ間のjavascriptの挙動誤差を吸収
4.1.1.2. コーディング量の削減
4.1.1.3. Web上に公開されているサイトの 56.1% が利用しているライブラリ ※信頼性がかなり高い http://w3techs.com/
4.1.1.4. AJAX通信を簡単に実現
4.1.2. jQuery UI
4.1.2.1. デザインに特化したライブラリ
4.1.2.2. ドラッグ＆ドロップ機能
4.1.2.3. アニメーションの強化機能
4.1.2.4. などなど
4.1.3. jQuery Validation
4.1.3.1. 入力チェックのライブラリ
4.1.3.2. 入力途中でチェックし リアルタイムにエラーメッセージ出力など
4.2. twitter bootstrap
4.2.1. ボックスレイアウトでのシンプルなデザインを提供 javascript と css のセットライブラリ
4.2.2. レスポンシブWebデザインを簡単に実装可能
4.3. ドットインストール
4.3.1. 様々な技術の入門Webセミナー（無料）
4.3.2. http://dotinstall.com/
4.3.3. サイト自体も twitter bootstrap で作られている
5. まぁレイアウトは
5.1. ヘッダーがあり
5.2. メニューバーがあり
5.3. コンテンツ領域があり
5.4. フッターがある
6. CSS
6.1. ボックスモデル
6.1.1. DOM要素
6.1.1.1. 各要素が生成する四角い領域
6.1.2. モデル要素
6.1.2.1. コンテンツ
6.1.2.2. ボーダー
6.1.2.2.1. ボーダーのサイズもモデル要素のサイズに影響するよ
6.1.2.2.2. ボーダーのサイズが指定されている場合と 指定されていない場合で他要素のmargin 指定などに影響することも！？ 不思議だ・・・・
6.1.2.3. パディング
6.1.2.3.1. コンテンツとボーダーまでの間
6.1.2.4. マージン
6.1.2.4.1. ボーダーと他のモデル要素までの間
6.1.2.4.2. マージンの相殺
6.1.3. インラインボックス
6.1.3.1. ボックス内での要素配置が横に並ぶ
6.1.3.2. <a> <span> <strong> など
6.1.3.3. 匿名インラインボックス
6.1.3.3.1. <div> <a href="#">リンク</a> ここは何も指定してないけど。。。 </div>
6.1.4. ブロックボックス
6.1.4.1. ボックス内での要素配置が縦に並ぶ
6.1.4.2. <div> <p> <h1>～<h6>など
6.1.4.3. 匿名ブロックボックス
6.1.4.3.1. <div> <p>P要素明示</p> ここは何も指定してないけど。。。 </div>
6.1.4.4. width や height の指定が可能！ インライン要素では【基本的に】指定できないよ！！
6.1.4.4.1. ちなみに、インライン要素でも width や heightが指定できるものは
6.1.5. displayプロパティ
6.1.5.1. display: block;
6.1.5.2. display: inline;
6.1.5.3. 他にもあるけどこれで十分！
6.2. 包含ブロック
6.2.1. 子孫要素を配置する事ができる領域
6.2.1.1. widthを指定しない場合ね
6.3. フロート
6.3.1. ブロック要素を浮かせて右または左に移動する
6.3.2. widthを指定しなければいけない
6.3.3. position: relative;を親要素に指定する！
6.3.4. float: left; float: right;
6.3.5. フロートのルール
6.3.5.1. 包含ブロックの親要素（ブロック要素）からはみ出ることはない
6.3.5.2. 左にフロートされた要素の右側に次のフロート要素がくる ※右側に配置するスペースがない場合は下に配置される
6.3.5.3. フロートボックス同士は重ならない
6.3.5.4. フロートされたボックスは出来る限り 上に配置されなければならない（余分な余白はない）
6.3.5.5. フローとされたボックスはできる限り 左に（または右に）配置されなければならない
6.3.5.6. clearプロパティが指定されたボックスの 下辺に配置されなければならない
6.3.6. clear: left; clear: right; clear: both;
6.3.6.1. 指定された要素のフロートを解除 フロート要素の回り込みをキャンセルする
6.4. 絶対位置
6.4.1. position: absolute;
6.4.2. position: relative; 親要素にこの指定がされていると、 その親要素からの相対位置で指定可能
6.4.2.1. 基本的には「position: relative; を指定した要素」の中の要素に position: absolute;を指定すること！！
6.4.3. top: left: で基本的には位置を指定 right: bottom: もあるよ。
6.4.4. フロートと同じように絶対位置指定すると、 他の要素に対して浮いているようになる。
6.5. 固定配置
6.5.1. position: fixed;
6.5.2. ウインドウに対して絶対配置される
6.6. 重なり順序
6.6.1. z-index: 99999
6.6.2. 基本は、後に（下に）記載するHTMLのDOM要素が手前に表示される
6.7. id / class は覚えておこう！
6.8. CSSリセットも覚えておこう！
7. HTML
7.1. DOCTYPE宣言が重要！
7.1.1. ざっくりと
7.1.1.1. HTML
7.1.1.1.1. スクロールしても常に上部に固定されているヘッダーやサイドバーなどに活用
7.1.1.1.2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
7.1.1.1.3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
7.1.1.2. XHTML
7.1.1.2.1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
7.1.1.2.2. 閉じタグ必須
7.1.1.2.3. シングルタグの場合は /> で終わること
7.1.1.3. HTML5
7.1.1.3.1. <!DOCTYPE html>
7.1.1.3.2. たったこれだけ
7.1.2. DOCTYPE宣言が無いと
7.1.2.1. 基本的には下位互換モードで動作してしまう
7.2. DOM
7.2.1. Document Object Model
7.2.2. HTMLドキュメントをツリー構造に表現したもの
7.3. よく利用されるＨＴＭＬのタグは覚えておこう！
7.3.1. formタグ
7.3.1.1. inputタグ
7.3.1.2. textareaタグ
7.3.1.3. selectタグ
7.3.2. divタグ
7.3.3. spanタグ
7.3.4. div と spanタグって何が違う？
7.4. id と class の違いって何だろう？
7.4.1. idはHTML内で一意となる要素に指定
7.4.2. classはHTML内で複数の要素で重複するものに指定
8. HTML5でできるようになったこと
8.1. フォーム要素に対する placeholderの指定
8.2. 構造化タグ
8.2.1. headerタグ
8.2.2. sectionタグ
8.2.2.1. articleタグ
8.2.3. naviタグ
8.2.4. footerタグ
8.3. canvas
8.4. Webストレージ
8.4.1. ローカルストレージ
8.4.2. セッションストレージ