Merge pull request #13 from o2project/friends

原稿にサンドスターを当てまくった

Author: kubosho

articles/ch01.re

@@ -1,8 +1,12 @@
 = Reset CSSとは何か
 
-Reset CSSは、Web上のページを読み込んだときに既定で適用されるスタイル宣言（ユーザーエージェントスタイルシートとも呼ばれます）をリセットするものです。
-Reset CSSは@<kw>{Hard reset}と呼ばれる「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」手法から始まりました（@<list>{hard-reset-css}）。
-そこから今日にいたるまでさまざまな手法が開発されています。
+ここからReset CSSについて解説するよ！かばんちゃんから教えてもらったことを、できるだけ分かりやすく私が教えるからね！
+
+Reset CSSっていうのは、Webページを読み込んだときに既定で適用されるスタイル@<fn>{user-agent-stylesheet}をリセットするものだよ！
+
+@<kw>{Hard reset}っていう「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」ところから始まったんだよ！（@<list>{hard-reset-css}）
+そこから今までさまざまなReset CSSのフレンズが生まれたんだって！すっごーい！
+//footnote[user-agent-stylesheet][ユーザーエージェントスタイルシートとも呼ばれます]
 
 //list[hard-reset-css][初期のReset CSSであるHard reset]{
 #@mapfile(../codes/reset-css/hard-reset.css)
@@ -15,9 +19,9 @@ Reset CSSは@<kw>{Hard reset}と呼ばれる「ユニバーサル（全称）セ
 
 == なぜReset CSSはユーザーエージェントスタイルシートを上書きできるか
 
-Reset CSSはユーザーエージェントスタイルシートでの宣言を上書きすることにより、スタイル宣言をリセットしています。
-なぜリセットできるのでしょうか？それはスタイル宣言がされた場所（オリジン）によって適用されるスタイルの優先順位があるためです。
-CSS Cascading and Inheritance Level 3（@<href>{https://www.w3.org/TR/css-cascade-3/#cascading}）から優先順を引用すると次のとおりです。
+Reset CSSはユーザーエージェントスタイルシートの宣言を上書きすることで、既定で適用されるスタイルをリセットしているんだよ！
+なんでリセットできるかって？それはスタイル宣言がされたちほー（オリジン）によって適用されるスタイルの優先順位があるためなんだって。
+よくわかんないけど、CSS Cascading and Inheritance Level 3（@<href>{https://www.w3.org/TR/css-cascade-3/#cascading}）から優先順位を引用すると次のとおりみたい。
 
  1. transitionの宣言
  1. !important付きのユーザーエージェントスタイルシートでの宣言
@@ -30,13 +34,16 @@ CSS Cascading and Inheritance Level 3（@<href>{https://www.w3.org/TR/css-cascad
  1. 利用者による宣言
  1. ユーザーエージェントスタイルシートでの宣言
 
-ユーザーエージェントスタイルシートの宣言より作者による宣言、つまりHTMLファイルからリンクされたCSSなどの宣言が優先されるため、ユーザーエージェントスタイルシートのスタイル宣言を上書きできます。
+たとえばユーザーエージェントスタイルシートの宣言より、HTMLファイルからリンクされたCSS内の宣言が優先されるんだって。
+だからユーザーエージェントスタイルシートのスタイル宣言を上書きできるんだよー！
+…うー、ボスー！ちょっとよく分かんないよー！
 
 == なぜReset CSSを使うのか
 
-Reset CSSが使われる理由は、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で差異があるためです。
-例として@<code>{h1}要素と@<code>{p}要素のみ定義したHTMLをブラウザで見てみます。
-Firefoxはセリフ@<fn>{font-serif}がないフォントで表示されます（@<img>{firefox-font}）が、Safariはセリフがあるフォントで表示されます（@<img>{safari-font}）。
+Reset CSSを使うのは、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で違いがあるからなんだよ！
+たとえば@<code>{h1}要素と@<code>{p}要素だけ書いたHTMLをブラウザで見てみるよ。
+
+するとFirefoxはセリフ@<fn>{font-serif}がないフォントだけど（@<img>{firefox-font}）、Safariはセリフがあるフォントだよ（@<img>{safari-font}）。ふっしぎー！
 //footnote[font-serif][文字の線の端にある小さな飾りのことです]
 
 //image[firefox-font][Firefoxでプレビューしたときの見た目]{
@@ -45,9 +52,8 @@ Firefoxはセリフ@<fn>{font-serif}がないフォントで表示されます
 //image[safari-font][Safariでプレビューしたときの見た目]{
 //}
 
-このように単純なHTMLでも見た目に差異があります。h1要素やp要素の他にも差異はあるため、それを吸収するために何らかのReset CSSライブラリを使うか自分で差異を吸収する必要があります。
+こんな感じで単純なHTMLにも見た目に違いはあるんだよ！ブラウザによって得意なことは違うからなんらかのReset CSSライブラリを使うか自分で違いを吸収する必要があるんだってー！
 
 == Reset CSSを使わない場面
 
-Reset CSSを使う理由として「ブラウザの既定で適用されるスタイル定義の差異を吸収するため」と書きました。
-そのため@<kw>{NW.js}や@<kw>{Electron}といったChromiumしか存在しない環境ではReset CSSを使う必要はなく、必要に応じてユーザーエージェントスタイルシートのスタイル定義をリセットするとよいです。
+Reset CSSを使うのは、ブラウザが既定で適用するスタイルがブラウザ間で違いがあるからだけど、@<kw>{NW.js}？や@<kw>{Electron}？みたいな@<kw>{Chromium}？しか無いちほーではReset CSSを使わなくていいんだって！