Add stage2

Kuniwak · Kuniwak · commit bce6aa41ee88 · 2015-03-19T12:28:04.000+09:00
diff --git a/README.md b/README.md
@@ -112,6 +112,11 @@ JavaScriptTraining リポジトリを fork します。
 - Web ブラウザ
 - Node.js, io.js
 
+JavaScript の特色のひとつは、ブラウザ上で  
+動作するということです。ブラウザ上で動作できる  
+言語はいくつかありますが、一般的に  
+JavaScript がよく使われます。
+
 
 ### いつ JavaScript を使うのか
 
@@ -258,8 +263,8 @@ Web ページが構成されていることがよくわかります。
 DOM (Document Object Model) は、この HTML のタグを  
 JavaScript の世界で操作することができる API です。
 
-JavaScript の世界にもってこられた HTML タグは、  
-DOM 要素と呼ばれています。
+HTML タグは、JavaScript の世界で  
+DOM 要素というオブジェクトとして扱われます。
 
 
 [<img src="http://mixi-inc.github.io/JavaScriptTraining/images/github-tree.png" height="300px" style="background-color: white">](http://mixi-inc.github.io/JavaScriptTraining/images/github-tree.png)
@@ -340,13 +345,21 @@ var div = document.querySelector('.foo div:last-child');
 
 というように、CSS クラスセレクタ `.foo` に  
 該当する要素の子要素を子孫セレクタ (スペース) で  
-取得し、このうち、CSS 疑似セレクタ `:last-child` に  
-マッチするものを取得するという操作になります。
+取得し、このうち `div` タグから CSS 疑似セレクタ
+`:last-child` にマッチするものを取得する  
+という操作になります。
+
 
+図にすると、このようになります。
+
+[<img src="http://mixi-inc.github.io/JavaScriptTraining/images/css-selector-example.png" height="300px" style="background-color: white">](http://mixi-inc.github.io/JavaScriptTraining/images/css-selector-example.png)
 
 CSS セレクタについては、[MDN のCSS リファレンス](https://developer.mozilla.org/ja/docs/Web/CSS/Reference#Selectors) が
 参考になります。
 
+仕様を見ないと我慢ならぬ！という立派な方は、  
+[セレクタ Level 3 仕様](http://standards.mitsue.co.jp/resources/w3c/TR/css3-selectors/) を見るとよいでしょう。
+
 
 #### 実習
 
@@ -360,7 +373,63 @@ CSS セレクタについては、[MDN のCSS リファレンス](https://develo
 
 ### ステージ2
 
-意図通りに DOM 要素のスタイルを変更するトレーニング
+意図通りに DOM 要素のスタイルを  
+変更するトレーニング
+
+
+#### DOM 要素のスタイル
+
+DOM 要素には、
+
+- 先ほど DOM API に渡した ID 属性
+- CSS クラス属性などの目印となる属性
+- 見た目を操作するスタイル属性
+
+などが付属しています。
+
+
+このうち、スタイル属性を編集すると、DOM 要素の  
+見た目を変化させることができます。
+
+たとえば、Github のヘッダの octocat の  
+style.color 属性を変更してみました。
+
+[<img src="http://mixi-inc.github.io/JavaScriptTraining/images/octocats.png" width="600px" style="background-color: white">](http://mixi-inc.github.io/JavaScriptTraining/images/octocats.png)
+
+
+このスタイル属性は CSS の仕様と対応するように  
+定められています。
+
+ただ、アニメーションを含め、見た目の変更は  
+CSS クラス名の追加/編集/削除によっておこなう  
+ことが推奨されてきています。
+
+（[レンダリングエンジンによる最適化が効くのです！](https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_CSS_animations)）
+
+JavaScript は見た目の変更のきっかけを  
+与えるだけにとどめるのが、上手な  
+HTML/JavaScript/CSS 分業の基本です。
+
+
+残念なお知らせですが、  
+今回のトレーニングは CSS を  
+書けるようになることが目的ではないので、  
+レガシーな element.style を編集するやり方を  
+学びます。
+
+
+レガシー…  &#x1f631;
+
+
+まあ、肩を落とさないでください。
+
+レガシーとはいえ、レガシーブラウザーを  
+相手にするライブラリを読み書きするときには、  
+どうしても必要になります。
+
+ちなみに、「レガシー？帰らせていただきます」は  
+フロントエンドエンジニアとして大切な感覚ですので  
+大事にしてください。
 
 
 #### 実習
