From 8741c79a5230011f3084954222cd5983630a7925 Mon Sep 17 00:00:00 2001 From: kubosho Date: Sun, 2 Apr 2017 14:25:13 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat(index):=20=E8=AA=B0=E3=81=8C=E8=A7=A3?= =?UTF-8?q?=E8=AA=AC=E3=81=99=E3=82=8B=E3=81=8B=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/index.re | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/articles/index.re b/articles/index.re index 346aa5c..920acf2 100644 --- a/articles/index.re +++ b/articles/index.re @@ -11,9 +11,9 @@ 本書は3章から成り立っています。 - 1. Reset CSSとは何か - 1. Reset CSSの特色 - 1. Reset CSSでどのような宣言がされているか + 1. Reset CSSとは何か（かばんちゃんとサーバルによる解説） + 1. Reset CSSの特色（アメリカビーバーとオグロプレーリードッグによる解説） + 1. Reset CSSでどのような宣言がされているか（アフリカオオコノハズクとワシミミズクによる解説） == お問い合わせ先 From 125d3fe14f27877d829be1c286fc1c73d5fc7436 Mon Sep 17 00:00:00 2001 From: kubosho Date: Sun, 2 Apr 2017 14:26:12 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat(ch01):=20=E3=82=B5=E3=83=BC=E3=83=90?= =?UTF-8?q?=E3=83=AB=E3=81=A8=E3=81=8B=E3=81=B0=E3=82=93=E3=81=A1=E3=82=83?= =?UTF-8?q?=E3=82=93=E3=81=AB=E8=A7=A3=E8=AA=AC=E3=81=97=E3=81=A6=E3=82=82?= =?UTF-8?q?=E3=82=89=E3=81=A3=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/ch01.re | 32 +++++++++++++++++++------------- redpen-conf-ja.xml | 1 - 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/articles/ch01.re b/articles/ch01.re index e8f28b0..4b5c795 100644 --- a/articles/ch01.re +++ b/articles/ch01.re @@ -1,8 +1,12 @@ = Reset CSSとは何か -Reset CSSは、Web上のページを読み込んだときに既定で適用されるスタイル宣言（ユーザーエージェントスタイルシートとも呼ばれます）をリセットするものです。 -Reset CSSは@{Hard reset}と呼ばれる「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」手法から始まりました（@{hard-reset-css}）。 -そこから今日にいたるまでさまざまな手法が開発されています。 +ここからReset CSSについて解説するよ！かばんちゃんから教えてもらったことを、できるだけ分かりやすく私が教えるからね！ + +Reset CSSっていうのは、Webページを読み込んだときに既定で適用されるスタイル@{user-agent-stylesheet}をリセットするものだよ！ + +@{Hard reset}っていう「ユニバーサル（全称）セレクタを使ってすべてのmarginとpaddingを0にする」ところから始まったんだよ！（@{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は@{Hard reset}と呼ばれる「ユニバーサル（全称）セ == なぜReset CSSはユーザーエージェントスタイルシートを上書きできるか -Reset CSSはユーザーエージェントスタイルシートでの宣言を上書きすることにより、スタイル宣言をリセットしています。 -なぜリセットできるのでしょうか？それはスタイル宣言がされた場所（オリジン）によって適用されるスタイルの優先順位があるためです。 -CSS Cascading and Inheritance Level 3（@{https://www.w3.org/TR/css-cascade-3/#cascading}）から優先順を引用すると次のとおりです。 +Reset CSSはユーザーエージェントスタイルシートの宣言を上書きすることで、既定で適用されるスタイルをリセットしているんだよ！ +なんでリセットできるかって？それはスタイル宣言がされたちほー（オリジン）によって適用されるスタイルの優先順位があるためなんだって。 +よくわかんないけど、CSS Cascading and Inheritance Level 3（@{https://www.w3.org/TR/css-cascade-3/#cascading}）から優先順位を引用すると次のとおりみたい。 1. transitionの宣言 1. !important付きのユーザーエージェントスタイルシートでの宣言 @@ -30,13 +34,16 @@ CSS Cascading and Inheritance Level 3（@{https://www.w3.org/TR/css-cascad 1. 利用者による宣言 1. ユーザーエージェントスタイルシートでの宣言 -ユーザーエージェントスタイルシートの宣言より作者による宣言、つまりHTMLファイルからリンクされたCSSなどの宣言が優先されるため、ユーザーエージェントスタイルシートのスタイル宣言を上書きできます。 +たとえばユーザーエージェントスタイルシートの宣言より、HTMLファイルからリンクされたCSS内の宣言が優先されるんだって。 +だからユーザーエージェントスタイルシートのスタイル宣言を上書きできるんだよー！ +…うー、ボスー！ちょっとよく分かんないよー！ == なぜReset CSSを使うのか -Reset CSSが使われる理由は、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で差異があるためです。 -例として@{h1}要素と@{p}要素のみ定義したHTMLをブラウザで見てみます。 -Firefoxはセリフ@{font-serif}がないフォントで表示されます（@{firefox-font}）が、Safariはセリフがあるフォントで表示されます（@{safari-font}）。 +Reset CSSを使うのは、ブラウザが既定で読み込むユーザーエージェントスタイルシートがブラウザ間で違いがあるからなんだよ！ +たとえば@{h1}要素と@{p}要素だけ書いたHTMLをブラウザで見てみるよ。 + +するとFirefoxはセリフ@{font-serif}がないフォントだけど（@{firefox-font}）、Safariはセリフがあるフォントだよ（@{safari-font}）。ふっしぎー！ //footnote[font-serif][文字の線の端にある小さな飾りのことです] //image[firefox-font][Firefoxでプレビューしたときの見た目]{ @@ -45,9 +52,8 @@ Firefoxはセリフ@{font-serif}がないフォントで表示されます //image[safari-font][Safariでプレビューしたときの見た目]{ //} -このように単純なHTMLでも見た目に差異があります。h1要素やp要素の他にも差異はあるため、それを吸収するために何らかのReset CSSライブラリを使うか自分で差異を吸収する必要があります。 +こんな感じで単純なHTMLにも見た目に違いはあるんだよ！ブラウザによって得意なことは違うからなんらかのReset CSSライブラリを使うか自分で違いを吸収する必要があるんだってー！ == Reset CSSを使わない場面 -Reset CSSを使う理由として「ブラウザの既定で適用されるスタイル定義の差異を吸収するため」と書きました。 -そのため@{NW.js}や@{Electron}といったChromiumしか存在しない環境ではReset CSSを使う必要はなく、必要に応じてユーザーエージェントスタイルシートのスタイル定義をリセットするとよいです。 +Reset CSSを使うのは、ブラウザが既定で適用するスタイルがブラウザ間で違いがあるからだけど、@{NW.js}？や@{Electron}？みたいな@{Chromium}？しか無いちほーではReset CSSを使わなくていいんだって！ diff --git a/redpen-conf-ja.xml b/redpen-conf-ja.xml index e5b4e61..2785918 100644 --- a/redpen-conf-ja.xml +++ b/redpen-conf-ja.xml @@ -9,7 +9,6 @@ - From 05fc830591ab92e41d99b481aa575c0631d54e2d Mon Sep 17 00:00:00 2001 From: kubosho Date: Sun, 2 Apr 2017 17:44:53 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat(ch02):=20=E3=82=A2=E3=83=A1=E3=83=AA?= =?UTF-8?q?=E3=82=AB=E3=83=93=E3=83=BC=E3=83=90=E3=83=BC=E3=81=A8=E3=82=AA?= =?UTF-8?q?=E3=82=B0=E3=83=AD=E3=83=97=E3=83=AC=E3=83=BC=E3=83=AA=E3=83=BC?= =?UTF-8?q?=E3=83=89=E3=83=83=E3=82=B0=E3=81=AB=E8=A7=A3=E8=AA=AC=E3=81=97?= =?UTF-8?q?=E3=81=A6=E3=82=82=E3=82=89=E3=81=A3=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/ch02.re | 89 +++++++++++++++++++++++++----------------------- 1 file changed, 47 insertions(+), 42 deletions(-) diff --git a/articles/ch02.re b/articles/ch02.re index 9922c50..40c4744 100644 --- a/articles/ch02.re +++ b/articles/ch02.re @@ -1,12 +1,12 @@ = Reset CSSの特色 -Reset CSSの思想は2004年に生まれ、そこから数多くのReset CSSが生まれました。 -Reset CSSは年代によって思想や定義されているスタイルが若干ゃ変わっています。 -この章では特に有名だと思われるReset CSSの思想を7個見ていきます。 +Reset CSSは2004年に生まれて数多くのReset CSSが生まれてきたであります。 +Reset CSSは年代によって思想や宣言されているスタイルが少しずつ変わっているでありますよ。 +ここでは有名なReset CSSを7個見ていくでありますよー！うおー！ == Hard reset -Hard resetは@{hard-reset}のように書くだけの簡単なReset CSSです。 +Hard resetは2004年に発表された、おそらく最初のReset CSSであります@{fight-the-power-default}！最初のReset CSSだけあって単純であります（@{hard-reset}）。 //list[hard-reset][Hard reset]{ #@mapfile(../codes/reset-css/hard-reset.css) @@ -17,19 +17,18 @@ Hard resetは@{hard-reset}のように書くだけの簡単なReset CSSで #@end //} -Hard resetは2004年に発表されました、おそらく最初のReset CSSだと思われます@{fight-the-power-default}。 -公式ではHard resetと名乗っていません。Hard resetという名称は「A Comprehensive Guide to CSS Resets@{a-comprehensive-guide-to-css-resets}」という記事で出てきました。 -2004年当時、自分はWebサイトを作っていなかったため状況をよく知りません。そのため次の段落は憶測を含みます。 +Hard resetという名は「A Comprehensive Guide to CSS Resets@{a-comprehensive-guide-to-css-resets}」という記事で出てきたであります。 +当時の状況はよく分からないので、ここからはわたしの勘によって書くでありますよー！ #@# prh:disable //footnote[fight-the-power-default][https://web.archive.org/web/20150905184045/http://leftjustified.net/journal/2004/10/07/css-negotiation/] //footnote[a-comprehensive-guide-to-css-resets][http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/] -このHard resetが発表された当時はブラウザ間で@{margin}や@{padding}の宣言に差があることに対し大きな関心を持っていたようです。 -そのためユニバーサルセレクタで@{margin}と@{padding}を@{0}にすることで、ブラウザによって@{margin}や@{padding}の宣言に差があるのを無かったことにしようと試みたようです。 +Hard resetが発表されたときは、ブラウザ間で@{margin}や@{padding}の値に差があることに関心があったようであります。 +そのためユニバーサルセレクタで@{margin}と@{padding}を@{0}にして、ブラウザ間の@{margin}や@{padding}の値に差があるのを無かったことにしたようでありますよ。 == Eric Meyer's Reset CSS -Eric MeyerというCSSへ対しとても貢献している人がいます。彼の功績を挙げると次のとおりです@{eric-meyer-linkedin}。 +Eric MeyerというCSSへ対しとても貢献している人がいるであります。Eric Mayerの実績はすごいでありますよ！@{eric-meyer-linkedin} * オライリーから出版された@{CSS: The Definitive Guide}@{css-the-definitive-guide}（日本語版は@{CSS完全ガイド}@{css-complete-guide}）を執筆 * 上記の本以外にも多数の本を執筆@{eric-meyer-biblio} @@ -46,59 +45,64 @@ Eric MeyerというCSSへ対しとても貢献している人がいます。彼 #@# prh:disable //footnote[s5][https://en.wikipedia.org/wiki/S5_(file_format)] -最近ではその功績にコミュニティが敬意を払い、彼の6歳で夭折した娘の名前をCSSの色名@{beccapurple}として追加しようと提議されました@{becca-purple}。 -そして本人と夭折した娘の要望@{rebecca-purple}により@{rebeccapurple}としてCSS Color Module Level 4@{css-color-module-level-4}に追加されました。 +最近ではその功績にコミュニティが敬意を払って、6歳で亡くなってしまった娘の名前をCSSの色名@{beccapurple}として追加しようと提案されたであります@{becca-purple}。 +そして本人と亡くなってしまった娘の要望@{rebecca-purple}によって、@{rebeccapurple}としてCSS Color Module Level 4@{css-color-module-level-4}に追加されたであります！すごいであります！ //footnote[becca-purple][https://discourse.wicg.io/t/name-663399-becca-purple-in-css4-color/225] #@# prh:disable //footnote[rebecca-purple][http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/] //footnote[css-color-module-level-4][https://drafts.csswg.org/css-color/#named-colors] -そのEric MeyerがHard resetの問題点を指摘した上で作ったReset CSSがEric Meyer's Reset CSSです。 -#@# prh:disable -Eric Meyer's Reset CSSのソースコードは@{http://meyerweb.com/eric/tools/css/reset/}にあります。 +そのEric MeyerがHard resetの問題点を踏まえた上で作ったReset CSSがEric Meyer's Reset CSSであります。 +Hard resetの問題点は次の2点であります。これらの問題を解決するためにそれぞれの要素ごとにリセットしたのがEric Meyer's Reset CSSであります！ + + * ユニバーサルセレクタを使って@{margin}や@{padding}を@{0}にするやり方がフォーム関連の要素に対してどういった影響があるか分からない + * @{margin}や@{padding}を@{0}にするだけでなく、フォントに関わる一貫したスタイル宣言をしたい -Hard resetの問題点ですが、ユニバーサルセレクタを使って@{margin}や@{padding}を@{0}にするやり方は、フォーム関連の要素に対してどういった影響があるか分からないと書いてあります。 -そして@{margin}や@{padding}を@{0}にするだけでなく、フォントに関わる一貫したスタイル宣言をしたかったとも書いてあります。 -そのため明示的に要素を宣言して個別にリセットしていくようにしたのがEric Meyer's Reset CSSです。 +#@# prh:disable +Eric Meyer's Reset CSSのソースコードは@{http://meyerweb.com/eric/tools/css/reset/}であります！ == YUI 3 Reset CSS -Yahoo!が主に開発していたYUI library@{yui-deprecate}に含まれるReset CSSです。 -//footnote[yui-deprecate][なおYUI 3はこれからメンテナンスをおこなわないというアナウンスをしています] +Yahoo!が主に開発していたYUI libraryに含まれるReset CSSであります！ +ちなみにYUI 3はこれからメンテナンスをおこなわないというアナウンスをしているのであります@{yui-deprecate}。 +//footnote[yui-deprecate][https://yahooeng.tumblr.com/post/96098168666/important-announcement-regarding-yui] -YUI 3 Reset CSSはhtml要素に対し@{color}プロパティや@{background}プロパティが宣言されています。 -ただしYUI 2の時代からReset CSSがほぼ更新されていない@{yui2-2008-1}@{yui2-2008-2}ため、article要素やheader要素といったHTML5で追加された要素に対する宣言はありません@{yui2-reset}。 -//footnote[yui2-2008-1][YUI 2のReset CSSを見てみると2008年から指定内容がほぼ変わっていません] +他のReset CSSに無いものとして、html要素に対し@{color}プロパティや@{background}プロパティが宣言されているでありますよ。 +ただYUI 2からReset CSSはほぼ更新されていない@{yui2-2008-1}@{yui2-2008-2}であります。なのでHTML5で追加された要素の宣言は無いであります@{yui2-reset}。 +//footnote[yui2-2008-1][YUI 2のReset CSSを見てみると2008年から内容がほぼ変わっていないであります] //footnote[yui2-2008-2][https://github.com/yui/yui2/blob/324b3755ea4f3ac643572eb839d85c09801aac5f/build/reset/reset.css] //footnote[yui2-reset][https://github.com/yui/yui2/blob/master/src/reset/css/reset.css] == HTML5 Docter Reset CSS -HTML5を使った開発について発信していた@{HTML5 Docter}で提唱されたReset CSSです。 -HTML5 Docter Reset CSSのソースコードは@{http://html5doctor.com/html-5-reset-stylesheet/}にあります。 +HTML5を使った開発について発信していた@{HTML5 Docter}で発表されたReset CSSであります！ +HTML5 Docter Reset CSSのソースコードは@{http://html5doctor.com/html-5-reset-stylesheet/}であります！ -HTML5 Docter Reset CSSはEric Meyer's Reset CSSのv1.0を元に作られたものです。 -Eric Meyer's Reset CSSのv1.0は作られた時期が2008年2月12日のため、HTML5で追加された要素のスタイル宣言がありませんでした。 -HTML5 Docter Reset CSSはそこにarticle要素やheader要素などHTML5で追加された要素のスタイル宣言を追加しています。 -他にもins要素やmark要素、hr要素などに独自のスタイルが定義されています。 +HTML5 Docter Reset CSSはEric Meyer's Reset CSSのv1.0を元に作られたものでありますよ。 +Eric Meyer's Reset CSSのv1.0は作られた時期が2008年2月12日なので、HTML5で追加された要素のスタイル宣言がなかったであります。 +HTML5 Docter Reset CSSはそこにHTML5で追加された要素のスタイル宣言を追加しているであります。他にもいろんな要素に独自のスタイル宣言をしているであります！ + +ちょっと眠くなったので、ここからはビーバー殿にまかせてわたしは寝るであります。 == normalize.css -normalize.cssはそれまでのReset CSSを代替するReset CSSとして出てきました。 +プレーリーさんが寝てしまったのでここからはおれっちが説明するっす。 + +normalize.cssはそれまでのReset CSSに代わるReset CSSとして出てきたっす。 +それまでのReset CSSはブラウザが既定で適用するスタイルをほぼすべてリセットしていたっす。 -それまでのReset CSSはブラウザが既定で宣言しているスタイルをほぼすべてリセットするものでした。 -normalize.cssはブラウザが宣言しているスタイルで使えそうなものを残しているのが特徴です。 -後述するsanitize.cssやressと違い、作者の意見が入っていない純粋にブラウザのスタイルを正規化するライブラリです@{normalize-v5}。 -//footnote[normalize-v5][v5.0.0まではスタイル宣言に作者の意見が含まれていましたが、v6.0.0でそれらがすべて取り除かれました] +normalize.cssは今までと違ってブラウザが適用するスタイルで使えそうなものは残しているっす。 +あとで説明する@{sanitize.css}や@{ress}と違って、作者の意見が無くて純粋にブラウザのスタイルを正規化しているっす@{normalize-v5}。 +//footnote[normalize-v5][v5.0.0まではスタイル宣言に作者の意見が含まれていたのですが、v6.0.0でそれらがすべて取り除かれたっす] -ソースコードにはなぜその宣言をしたのか書かれているため、ソースコードを読むだけでも勉強になります。 +ソースコードにはなぜその宣言をしたか書かれているので読むだけでも勉強になるっす。 == sanitize.css -normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSです。 -Jonathan NealはEric Meyer's Reset CSSやnormalize.cssを使っていましたが、それらを元に大多数が書いたスタイル宣言を含んだのがsanitize.cssです。 -一例を挙げるとhtml要素に@{box-sizing: border-box;}を宣言してユニバーサルセレクタで@{box-sizing: inherit;}を宣言しています（@{sanitize-html}）。 -これにより特定の要素に対してwidthやheightを宣言するときに、borderやpaddingの宣言を気にせずwidthやheightの値を宣言できます。 +normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSっす。 +Eric Meyer's Reset CSSやnormalize.cssなどを元に多くの人が書いたスタイル宣言を含んだのがsanitize.cssっすね。 +たとえばhtml要素に@{box-sizing: border-box;}を宣言して、ユニバーサルセレクタで@{box-sizing: inherit;}を宣言しているっす（@{sanitize-html}）。 +こうすることで特定の要素に対してwidthやheightを宣言するときに値の計算がしやすくなるっす。 //list[sanitize-html][sanitize.cssのhtml要素に対する宣言]{ #@mapfile(../codes/reset-css/sanitize-css/html.css) @@ -131,6 +135,7 @@ html { == ress -最後は@{A modern CSS reset}と称するressです。ressはnormalize.cssの宣言を受け継ぎつつ、Hard resetのようにユニバーサルセレクタを使ってすべての要素に対し@{margin}や@{padding}を@{0}にしています。 -またsanitize.cssと同じくすべての要素に対して@{box-sizing: border-box;}を宣言しています。 -フォームに関連する要素についても@{A modern CSS reset}と称しているとおり、大胆にユーザーエージェントスタイルシートの宣言をリセットしています。 +最後は@{A modern CSS reset}と名乗るressっすね。 +ressはnormalize.cssの宣言を引き継ぎつつ、Hard resetのようにユニバーサルセレクタを使ってすべての要素に対し@{margin}や@{padding}を@{0}にしているっす。 +またsanitize.cssと同じくすべての要素に対して@{box-sizing: border-box;}を宣言しているっす。こうする利点はsanitize.cssの説明を読んでほしいっす。 +フォームに関連する要素も@{A modern CSS reset}と名乗るとおり、大胆にユーザーエージェントスタイルシートの宣言をリセットしているっす。 From 795f669aae90c8b28ff1f68baa15b63406ac3b88 Mon Sep 17 00:00:00 2001 From: kubosho Date: Sun, 2 Apr 2017 23:24:32 +0900 Subject: [PATCH 4/5] =?UTF-8?q?refactor(codes):=20=E4=B8=8D=E8=A6=81?= =?UTF-8?q?=E3=81=AA=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- codes/reset-css/normalize-css/input-old.css | 13 ------------- 1 file changed, 13 deletions(-) delete mode 100644 codes/reset-css/normalize-css/input-old.css diff --git a/codes/reset-css/normalize-css/input-old.css b/codes/reset-css/normalize-css/input-old.css deleted file mode 100644 index a7b556a..0000000 --- a/codes/reset-css/normalize-css/input-old.css +++ /dev/null @@ -1,13 +0,0 @@ -/** - * 1. Change the font styles in all browsers (opinionated). - */ - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ -} From 12b8b9067d889b852804895fa1f58ce2c9332c0d Mon Sep 17 00:00:00 2001 From: kubosho Date: Sun, 2 Apr 2017 23:25:05 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat(ch03):=20=E3=82=A2=E3=83=95=E3=83=AA?= =?UTF-8?q?=E3=82=AB=E3=82=AA=E3=82=AA=E3=82=B3=E3=83=8E=E3=83=8F=E3=82=BA?= =?UTF-8?q?=E3=82=AF=E3=81=A8=E3=83=AF=E3=82=B7=E3=83=9F=E3=83=9F=E3=82=BA?= =?UTF-8?q?=E3=82=AF=E3=81=AB=E8=A7=A3=E8=AA=AC=E3=81=97=E3=81=A6=E3=82=82?= =?UTF-8?q?=E3=82=89=E3=81=A3=E3=81=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/ch03.re | 204 ++++++++++++++++++++--------------------------- 1 file changed, 87 insertions(+), 117 deletions(-) diff --git a/articles/ch03.re b/articles/ch03.re index ed5dc36..b49365c 100644 --- a/articles/ch03.re +++ b/articles/ch03.re @@ -1,18 +1,20 @@ = Reset CSSでどのような宣言がされているか -ブラウザがWeb上のページを読み込むときに既定で適用されるスタイルとして、@{ユーザーエージェントスタイルシート}があります。 -ユーザーエージェントスタイルシートがどのように宣言されているかはブラウザごとに次のURLで見られます。 +われわれはかしこいのでReset CSSでどのような宣言があるか教えるです。その前に教えてほしければ料理をよこすのです。 + +…満腹、満足です。解説が終わったらおかわりをよこすのです。 + +ブラウザがWeb上のページを読み込むときに既定で適用されるスタイルとして、@{ユーザーエージェントスタイルシート}があるです。 +ユーザーエージェントスタイルシートの内容はブラウザごとに次のURLで見られるのです。 #@# prh:disable * Chrome: @{https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css} * Firefox: @{https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css} * Safari: @{http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css} -ユーザーエージェントスタイルシートはブラウザごとに定義されているスタイルが違うため、Reset CSSを使わなかった場合ブラウザによって適用されるスタイルが違います@{user-agent-stylesheet-diff}。 - -この章では各Reset CSSがどのような宣言をしているか、ユーザーエージェントスタイルシートでどのように宣言されているか一部解説しつつ見ていきます。 -なお、解説するHTML要素は（@{explain-elements}）のみに絞ります。 -//footnote[user-agent-stylesheet-diff][https://developer.mozilla.org/ja/docs/Web/Compatibility_FAQ/Tips_Default_Style_Difference.html] +Reset CSSはユーザーエージェントスタイルシートの宣言をリセットするためにあるです。 +これからReset CSSのスタイル宣言を一部ユーザーエージェントスタイルシートでの宣言も教えつつ見ていくのです。 +ちなみに解説するHTMLの要素は（@{explain-elements}）のみに絞るです。 //list[explain-elements][解説するHTML要素一覧]{ html, body, img, @@ -25,19 +27,17 @@ input, textarea, button, select == html要素 -まずはhtml要素です。ChromeとSafariでは@{display: block;}の宣言だけがあります。 -いっぽうFirefoxでは@{display: block;}以外にも、@{unicode-bidi: isolate;}という複数の表記方向が混在する文章をどのように扱うか決める定義もされています。 -@{unicode-bidi}プロパティの値によって表示がどう変わるかは「CSS: unicode-bidi プロパティ - Unicode文字の表記方向@{unicode-bidi}」を参照してください。 +まずはhtml要素です。ChromeとSafariでは@{display: block;}の宣言だけなのです。 +Firefoxでは@{display: block;}以外にも、@{unicode-bidi: isolate;}という複数の表記方向が混ざる文章をどのように扱うか決める宣言もされているのです。 +@{unicode-bidi}プロパティの値が表示にどう影響をあたえるかは「CSS: unicode-bidi プロパティ - Unicode文字の表記方向@{unicode-bidi}」を見るです。 //footnote[unicode-bidi][http://www.osaka-kyoiku.ac.jp/~joho/html5_ref/css/unicode-bidi_css.php] -Reset CSSではsanitize.cssとressが、html要素へ対し@{box-sizing: border-box;}を宣言した上で、ユニバーサルセレクタへ@{box-sizing: inherit;}を宣言しています。 -このことでコンテンツ領域に@{padding}や@{border}の値が入るようになります。 -これによりボックスサイズの計算をより簡単にすることを狙っていると思われます。 +sanitize.cssとressは、html要素へ対し@{box-sizing: border-box;}を宣言した上で、ユニバーサルセレクタへ@{box-sizing: inherit;}を宣言しているです。 +これでコンテンツ領域に@{padding}や@{border}の値が入るようになるのです。これでボックスサイズの計算がより簡単になるのです。 == body要素 -body要素はChrome・Firefox・Safariで同様のスタイル定義がおこなわれています（@{body-element}）。 -ただし@{margin: 8px;}の宣言は多くのWebサイトにおいて不要な宣言となるため、Reset CSSでは@{margin: 0;}と宣言されることが多いです。 +body要素はChrome・Firefox・Safariで同じスタイル宣言なのです（@{body-element}）。 //list[body-element][body要素に対するスタイル定義]{ #@mapfile(../codes/browser/body.css) @@ -48,13 +48,14 @@ body { #@end //} -Eric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSではbody要素へ対し@{margin: 0;}を宣言しています。 -Webページを作るときにページの外周へ@{margin}を設定することはほとんど無いため、このような宣言がされていると思われます。 -normalize.cssでもv5.0.0まではbody要素に対し同様の宣言がされていましたが、v6.0.0で削除されて何も宣言されなくなりました。 +@{margin: 8px;}の宣言は多くのWebサイトでいらない宣言なので、Reset CSSで@{margin: 0;}と宣言されることが多いのです。 +@{margin: 0;}と宣言しているReset CSSはEric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSがあるです。 +normalize.cssもv5.0.0まではbody要素に同じ宣言があったです。v6.0.0で削除されて何もなくなったのです。 == セクショニング・コンテンツとh1要素 -h1要素は見出しを表す要素の中でもっともランクが高い要素です。またsection要素やarticle要素といったセクショニング・コンテンツへh1要素を入れた場合は、入れ子の深さに応じてスタイルが変わるようになっています（@{h1-element}）。 +h1要素は見出しを表す要素の中でもっともランクが高い要素です。 +section要素やarticle要素といったセクショニング・コンテンツへh1要素を入れ子した場合は、深さに応じてスタイルが変わるのです（@{h1-element}）。 //list[h1-element][h1要素に対するスタイル定義]{ #@mapfile(../codes/browser/h1.css) @@ -112,7 +113,7 @@ h1 { #@end //} -normalize.cssやsanitize.cssでは入れ子具合によってスタイルが変わるのを無くしています（@{h1-normalize}）。 +normalize.cssやsanitize.cssでは入れ子の深さによってスタイルが変わるのを無くしているです（@{h1-normalize}）。 //list[h1-normalize][h1要素に対するnormalize.cssやsanitize.cssのスタイル定義]{ #@mapfile(../codes/reset-css/normalize-css/h1.css) @@ -128,7 +129,7 @@ h1 { #@end //} -また、YUI 3 Reset CSSやEric Meyer's Reset CSSでは見出しらしいスタイル定義をすべて無くしています（@{h1-yui3}）。 +YUI 3 Reset CSSやEric Meyer's Reset CSSでは見出しらしいスタイルをすべて無くしているのです（@{h1-yui3}）。 //list[h1-yui3][h1要素に対するYUI 3 Reset CSSやEric Meyer's Reset CSSのスタイル定義]{ #@mapfile(../codes/reset-css/yui3/h1.css) @@ -143,23 +144,19 @@ h1 { == p要素 -Firefoxでは文字のレイアウト方向や向き、文字が流れる方向を元にmarginを設定する@{margin-block-start}や@{margin-block-end}が定義されています。 -ちなみにCSSのプロパティでは、文字のレイアウト方向は@{writing-mode}、文字の向きは@{text-orientation}、文字の流れる方向は@{direction}に対応しています。 - -ChromeやSafariでは、@{margin-before}や@{margin-after}といったプロパティが定義され、値として@{1__qem}が定義されています。 -これは、互換性モードで表示する際@{margin}の相殺をおこなわないようにするものです。 - -YUI 3 Reset CSSやEric Meyer's Reset CSSといった古めのReset CSSでは@{margin}と@{padding}が0と宣言されています。 -しかし新しめのReset CSSでは特に宣言がなく、ユーザーエージェントスタイルシートをそのまま使うようにしています。 +Firefoxでは文字のレイアウト方向や向き、文字が流れる方向を元にmarginを適用する@{margin-block-start}や@{margin-block-end}を宣言しているです。 +CSSのプロパティはそれぞれ、文字のレイアウト方向は@{writing-mode}、文字の向きは@{text-orientation}、文字の流れる方向は@{direction}に対応しているのです。 +ChromeやSafariでは@{margin-before}や@{margin-after}といったプロパティが宣言されて、値に@{1__qem}が指定されているのです。 +互換性モードで表示するときに@{margin}の相殺をおこなわないためなのです。 -#@# prh:disable -これは新しく縦書きという概念が出てきたため、Reset CSSで文字の方向や向き、流れる方向を意識するようになったからです。 -その結果ユーザーエージェントスタイルシートをそのまま使ったほうが良いという結論に至ったと思われます。 +YUI 3 Reset CSSやEric Meyer's Reset CSSなど古めのReset CSSでは@{margin}と@{padding}が0になっているのです。 +新しいReset CSSでは特に宣言がないのです。これは新しく縦書きという概念が出てきたので、Reset CSSで文字の方向や向き、流れる方向を意識しだしたからです。 +結果としてユーザーエージェントスタイルシートをそのまま使ったほうがいいとなったのです。 == a要素 -a要素は各ブラウザのユーザーエージェントスタイルシートでは特にスタイルが定義されていません。 -normalize.cssやsanitize.css、ressではIEやSafariに向けたスタイル定義をしています（@{a-reset}）。 +a要素は各ブラウザのユーザーエージェントスタイルシートではスタイル宣言がないのです。 +normalize.cssやsanitize.css、ressではIEとSafari向けのスタイル宣言をしているです（@{a-reset}）。 //list[a-reset][a要素に対するReset CSSのスタイル定義]{ #@mapfile(../codes/reset-css/a-reset.css) @@ -175,13 +172,13 @@ a { #@end //} -@{background-color: transparent;}が宣言されている理由としては、IE 10上でリンクをクリックしたときにグレーの背景がついてしまうのを無くすために定義されています。 -また@{-webkit-text-decoration-skip: objects;}という宣言は、英語の@{p}や@{y}、一部のロシア語をリンクの文字にした場合、リンクの下線が途切れてしまうのを防ぐためです@{normalize-issue-573}。 +@{background-color: transparent;}が宣言されているのは、IE 10でリンクをクリックしたときにグレーの背景がついてしまうのを防ぐためです。 +@{-webkit-text-decoration-skip: objects;}という宣言は、英語やロシア語という言葉の一部文字をリンクの文字に指定したとき、下線が途切れてしまうのを防ぐためなのです@{normalize-issue-573}。 //footnote[normalize-issue-573][https://github.com/necolas/normalize.css/pull/573] == img要素 -img要素はiOSのSafari上でタップしたときにハイライトが適用されないようになっています（@{img-safari}）。 +img要素はiOSのSafariでタップしたときにハイライトを適用しないようにしているのです（@{img-safari}）。 //list[img-safari][img要素に対するSafariのスタイル定義]{ #@mapfile(../codes/browser/safari/img.css) @@ -196,7 +193,7 @@ img { #@end //} -normalize.cssやsanitize.css、ressではIE 10でリンク内に画像があるとborderが適用されてしまうのを防ぐために、@{border-style: none;}が宣言されています（@{img-normalize}）。 +normalize.cssやsanitize.css、ressではIE 10でリンク内に画像があるとborderが適用されるのを防ぐため、@{border-style: none;}が宣言されているです（@{img-normalize}）。 //list[img-normalize][img要素に対する各種Reset CSSのスタイル定義]{ #@mapfile(../codes/reset-css/normalize-css/img.css) @@ -212,7 +209,7 @@ img { == ul, ol要素 -ulやol要素はFirefoxやChrome、Safariで@{論理margin}と@{padding}が宣言されています（@{ul-firefox}）。 +ulやol要素はFirefoxやChrome、Safariで@{論理margin}と@{論理padding}が宣言されているです（@{ul-firefox}）。 //list[ul-firefox][ul要素に対するSafariのスタイル定義]{ #@mapfile(../codes/browser/firefox/ul.css) @@ -226,9 +223,9 @@ ul { #@end //} -入れ子になったulやol要素はFirefoxとChrome、Safariで宣言しているプロパティは同じですが、セレクタの宣言方法が違います。 -Firefoxでは@{:any()}という疑似クラスを使って、ul要素やol要素などが入れ子になったときのスタイル宣言をおこなっています@{mdn-any-pseudo-class}（@{ul-nested-firefox}）。 -この@{:any()}擬似クラスですが、CSS Selectors Level 4では@{:matches()}として仕様策定が進んでいます@{css-selectors-4-matches}。 +ulやol要素が入れ子になったとき、FirefoxとChrome、Safariで宣言しているプロパティは同じなのですが、セレクタの宣言方法が違うのです。 +Firefoxでは@{:any()}という疑似クラスを使って、ulやol要素などが入れ子になったときのスタイル宣言をおこなっているです@{mdn-any-pseudo-class}（@{ul-nested-firefox}）。 +@{:any()}擬似クラスは、@{CSS Selectors Level 4}では@{:matches()}として仕様策定が進んでいるのです@{css-selectors-4-matches}。 //footnote[mdn-any-pseudo-class][https://developer.mozilla.org/ja/docs/Web/CSS/:any] //footnote[css-selectors-4-matches][https://drafts.csswg.org/selectors-4/#matches] @@ -253,7 +250,7 @@ Firefoxでは@{:any()}という疑似クラスを使って、ul要素やol #@end //} -@{:any()}や@{:matches()}の仕様が固まっていないためか、ChromeやSafariでは従来どおりの子孫セレクタを使った宣言になっています（@{ul-nested-chrome}）。 +ただ@{:any()}や@{:matches()}の仕様が固まっていないので、ChromeやSafariでは従来どおりの子孫セレクタを使った宣言になっているです（@{ul-nested-chrome}）。 //list[ul-nested-chrome][入れ子になったul要素に対するChromeやSafariのスタイル定義]{ #@mapfile(../codes/browser/chrome/ul-nested.css) @@ -270,8 +267,8 @@ ul ul ul { #@end //} -sanitize.cssではnav要素が親要素としてあるときにol要素とul要素に対して@{list-style: none;}の宣言をしています（@{sanitize-ul-ol}）。 -nav要素内に宣言したol要素とul要素に対して@{list-style}の値を宣言することは少ないので、自分で書くスタイル宣言を減らせます。 +sanitize.cssでは、nav要素が親要素のときにulとol要素に@{list-style: none;}の宣言をしているです（@{sanitize-ul-ol}）。 +nav要素内にあるulとol要素に@{list-style}の値はあまり宣言しないので、このような宣言になっているです。 //list[sanitize-ul-ol][sanitize.cssのulやol要素に対するスタイル宣言]{ #@mapfile(../codes/reset-css/sanitize-css/ul-ol.css) @@ -288,8 +285,8 @@ nav ul { == table要素 -table要素のスタイル宣言ですが、Firefoxでは非推奨となった属性にもスタイル宣言をおこなっているのが特色です。 -たとえば@{align}や@{frame}、@{rules}といった属性が挙げられます（@{table-firefox-1}）。 +Firefoxでtable要素の非推奨となった属性にスタイル宣言をしているのが面白いのです。 +たとえば@{align}や@{frame}、@{rules}が挙げられるです（@{table-firefox-1}）。 //list[table-firefox-1][Firefoxで宣言されている非推奨の属性に対してのスタイル宣言（一部）]{ #@mapfile(../codes/browser/firefox/table-1.css) @@ -309,8 +306,8 @@ table[rules] { #@end //} -またFirefox特有の宣言として@{-moz-is-html}という擬似クラスのようなセレクタ宣言があります（@{table-firefox-2}）。 -この宣言が何を示すのかJSFiddleで見てみようとしましたが、特に表示は変わりなく謎のままでした@{form-firefox}。 +他にもFirefoxだけ@{-moz-is-html}という擬似クラスのようなセレクタ宣言があるです（@{table-firefox-2}）。 +この宣言は何が起こるのか謎なのです。かしこいわれわれでも分からないことはあるのです@{form-firefox}。 //footnote[form-firefox][https://jsfiddle.net/f3rp4kmu/] //list[table-firefox-2][-moz-is-htmlという謎の擬似クラスっぽいセレクタ]{ @@ -324,9 +321,8 @@ table > form:-moz-is-html { #@end //} -sanitize.cssでは@{border-collapse: collapse;}の宣言がされています（@{sanitize-table}）。 -これはtableの@{border}をセル同士で共有する宣言になります。 -表を表示するときにセルを分けて表示することは少ないため、余計なスタイル宣言を減らせます。 +sanitize.cssでは@{border-collapse: collapse;}の宣言があるです（@{sanitize-table}）。 +これによってtableの@{border}がセル同士で共有されるです。セル同士をくっつけて表示したいときは便利なのです。 //list[sanitize-table][sanitize.cssのtable要素に対する宣言]{ #@mapfile(../codes/reset-css/sanitize-css/table.css) @@ -340,15 +336,15 @@ table { #@end //} -@{border-collapse}の値によって表示がどのように変わるかは@{table-border-collapse}で示すとおりです。 +@{border-collapse}の値が表示へどのように影響するのかは@{table-border-collapse}で示すとおりなのです。 //image[table-border-collapse][border-collapseの宣言によって表示が変わる]{ //} == blockquote要素 -blockquote要素はFirefoxで@{[type=cite]}という属性に対するスタイル宣言があります（@{blockquote-firefox}）。 -この属性は現在W3Cの仕様には無い仕様ですが、過去にはあったらしくFirefoxではいい感じの見た目になります（@{firefox-blockquote-type-cite}）。 +blockquote要素はFirefoxで@{[type=cite]}という属性へスタイル宣言があるのです（@{blockquote-firefox}）。 +この属性はいまW3Cの仕様には無いですが、過去にはあってFirefoxではいい感じの見た目になるのです（@{firefox-blockquote-type-cite}）。 //list[blockquote-firefox][blockquote要素に対してのスタイル宣言]{ #@mapfile(../codes/browser/firefox/blockquote.css) @@ -377,8 +373,7 @@ blockquote[type=cite] { //image[firefox-blockquote-type-cite][Firefoxでblockquote[type="cite"\]をプレビューしてみた様子]{ //} -Eric Meyer's Reset CSSではblockquoteやq要素に対し引用符を消すスタイルが宣言されています（@{eric-meyers-blockquote}）。 -なお、他のReset CSSには特徴的な宣言がありません。 +Eric Meyer's Reset CSSでは、blockquoteやq要素で引用符を消すスタイル宣言があるです（@{eric-meyers-blockquote}）。 //list[eric-meyers-blockquote][Eric Meyer's Reset CSSのblockquote要素に対するスタイル宣言]{ #@mapfile(../codes/reset-css/eric-meyers-blockquote.css) @@ -395,22 +390,21 @@ q:before, q:after { == input要素 -input要素はtype属性の値によって挙動が大きく変わります（@{input-types}）。 -そのためChromeのユーザーエージェントスタイルシートでは1123行中295行がinput要素関連のスタイル宣言です。 -Safariに至っては1221行中421行がinput要素関連のスタイル宣言です@{safari-user-agent-stylesheet-line}。 -//footnote[safari-user-agent-stylesheet-line][Safariの場合iOS向けと思われるスタイル宣言もあるためChromeと比較して行数が多いのかもしれません] -なおFirefoxは895行中24行がinput要素関連のスタイル宣言です。 +input要素はtype属性の値によって動きが大きく変わるのです（@{input-types}）。まるでパンサーカメレオンのようなのです。 +input要素関連のスタイル宣言はChromeのユーザーエージェントスタイルシートで1123行中295行、Safariは1221行中421行も充てられているのです@{safari-user-agent-stylesheet-line}。 +Firefoxは895行中24行がinput要素関連のスタイル宣言に充てられているです。 +//footnote[safari-user-agent-stylesheet-line][SafariはiOS向けのスタイル宣言もあるので行数が多いかもしれないです] //image[input-types][input要素はtype属性の値によって挙動が大きく変わる]{ //} -Reset CSSのinput要素に対する宣言はnormalize.css、sanitize.css、ressそれぞれで似通っているのですが微妙に違います。 -この項ではそれぞれのライブラリでどのように宣言されているかを解説します。 +Reset CSSのinput要素に対する宣言はnormalize.css、sanitize.css、ressそれぞれで似ていますが微妙に違うのです。 +それぞれのライブラリでどのように宣言されているか解説していくです。 ==={input-normalize} normalize.css -normalize.cssはinput要素に対してブラウザ間の差異を埋める程度に留めています（@{normalize-input}）。 -これもv6.0.0から作者の意見を入れないようにしたnormalize.cssの特徴を示しているといえます。 +normalize.cssはブラウザ間の違いをなくす宣言だけなのです（@{normalize-input}）。 +これもv6.0.0から作者の意見を入れないようにしたnormalize.cssの特徴が示されているのです。 //list[normalize-input][あくまでブラウザ間の差異を埋める程度に留めるnormalize.css]{ #@mapfile(../codes/reset-css/normalize-css/input.css) @@ -438,32 +432,10 @@ input { /* 1 */ #@end //} -ちなみに、バージョン5.0.0まではフォントや行間に作者の意見が反映されていました（@{normalize-input-old}）。 -ほとんどの場合@{font-family: sans-serif}はフォームを構成する要素へ対し宣言されることが多い値です。 -そのためnormalize.cssで宣言することで、normalize.cssを使う側では宣言をしなくて済むことを目指していたと思われます。 - -//list[normalize-input-old][バージョン5.0.0までのnormalize.css]{ -#@mapfile(../codes/reset-css/normalize-css/input-old.css) -/** - * 1. Change the font styles in all browsers (opinionated). - */ - -button, -input, -optgroup, -select, -textarea { - font-family: sans-serif; /* 1 */ - font-size: 100%; /* 1 */ - line-height: 1.15; /* 1 */ -} -#@end -//} - ==={input-sanitize} sanitize.css -normalize.cssの宣言を受け継ぎつつ、@{font-size}や@{line-height}の値として@{inherit}が宣言されています（@{sanitize-input}）。 -親要素の宣言を継承することにより、自分でスタイル宣言することを極力減らそうとしています。 +normalize.cssの宣言を元に、@{font-size}や@{line-height}の値として@{inherit}が宣言されているのです（@{sanitize-input}）。 +親要素の宣言を受け継ぐことによって、スタイル宣言することを極力減らすようにしているです。優しいのです。 //list[sanitize-input][normalize.cssより作者の主張が含まれているsanitize.css]{ #@mapfile(../codes/reset-css/sanitize-css/input.css) @@ -505,8 +477,8 @@ input { /* 1 */ #@end //} -またinput要素に対する宣言として他にないものとしては@{touch-action: manipulation;}があります（@{sanitize-fix-tap-delay}）。 -ページのスクロールとズームのみを許可する宣言ですが、IE 10ではタップ時の遅延をなくす宣言になります。 +input要素への宣言として他にないものは@{touch-action: manipulation;}なのです（@{sanitize-fix-tap-delay}）。 +ページのスクロールとズームのみを許可する宣言なのですが、IE 10だとタップ時の遅延もなくなるのです。 //list[sanitize-fix-tap-delay][IE 10でタップ時の遅延を無くすCSS]{ #@mapfile(../codes/reset-css/sanitize-css/fix-tap-delay.css) @@ -532,10 +504,9 @@ textarea, ==={input-ress} ress -ressもsanitize.css並かそれ以上に作者の意見が反映されています（@{ress-input}）。 -@{[type="button"]}や@{[type="submit"]}、@{[type="search"]}はブラウザのユーザーエージェントスタイルシートで@{border-radius}と宣言されていますが、ressでは無かったことにしています。 - -また@{background-color}を透過したり、@{border-style}を無くす宣言があったりと大胆な宣言をしています。 +ressもsanitize.css、もしくはそれ以上に作者の意見が反映されているのです（@{ress-input}）。 +@{[type="button"]}や@{[type="submit"]}、@{[type="search"]}はブラウザのユーザーエージェントスタイルシートで@{border-radius}が適用されているですが、ressでは無かったことになっているです。 +他にも@{background-color}を透過させたり@{border-style}を無くしたり大胆なのです。 //list[ress-input][normalize.cssと同じく主張が強いress]{ #@mapfile(../codes/reset-css/ress/input.css) @@ -565,8 +536,8 @@ textarea { == select要素 -select要素はChromeとSafariで@{text-transform: none;}という宣言がされています。 -しかしEdgeとFirefoxでは宣言がないため、normalize.cssとsanitize.cssでは同様の宣言をしています（@{normalize-select}）。 +select要素はChromeとSafariで@{text-transform: none;}の宣言がされているのです。 +しかしEdgeとFirefoxでは宣言がないので、normalize.cssとsanitize.cssには同じ宣言があるです（@{normalize-select}）。 //list[normalize-select][normalize.cssとsanitize.cssではtext-transform: none;の宣言だけ]{ #@mapfile(../codes/reset-css/normalize-css/select.css) @@ -584,9 +555,9 @@ select { /* 1 */ ==={select-ress} ress -normalize.cssやsanitize.cssと違い独自路線なのがressです。 -@{text-transform: none;}も宣言されていますが、他にもselect要素らしい見た目を無くす@{appearance}やIE独自の疑似要素に対してスタイルを宣言しています（@{ress-select}）。 -IE独自の疑似要素について書くと、@{::-ms-expand}はドロップダウンを表示するためのボタンを表す疑似要素、@{::-ms-value}はselect要素内の文字を表す疑似要素です@{ie-pseudo-elements}。 +normalize.cssやsanitize.cssと違って自分の道を歩いているのがressなのです。 +@{text-transform: none;}も宣言していますが、他にもselect要素らしい見た目を無くす@{appearance}やIE独自の疑似要素へスタイルを宣言しているのです（@{ress-select}）。 +@{::-ms-expand}はドロップダウンの項目を見るためのボタンを表す疑似要素で、@{::-ms-value}はselect要素内の文字を表す疑似要素なのです@{ie-pseudo-elements}。 //footnote[ie-pseudo-elements][http://subtech.g.hatena.ne.jp/mayuki/20110923/1316786871] //list[ress-select][ressはselect要素でも独自路線]{ @@ -609,8 +580,8 @@ select::-ms-value { == button要素 -normalize.cssやsanitize.css、ressではWebKitのバグを修正するセレクタ宣言やプロパティと値の宣言がおこなわれています（@{normalize-button}）。 -またFirefoxに対してもbutton要素内に画像を配置したときにボタンの@{border}と画像の間に隙間が空く問題などが修正されています@{firefox-form-button}。 +normalize.cssやsanitize.css、ressではWebKitのバグを修正するセレクタ宣言やプロパティと値の宣言をしているです（@{normalize-button}）。 +Firefoxでもbutton要素内に画像を置いたときに生まれる@{border}と画像の間にある隙間が埋まるようにしてあるのです@{firefox-form-button}。 #@# prh:disable //footnote[firefox-form-button][http://jeffreyfrancesco.org/weblog/2011062101/] @@ -656,9 +627,9 @@ button:-moz-focusring, ==={button-ress} ress -ressはnormalize.cssやsanitize.cssと同じ宣言もしていますが、ress独自の宣言として@{cursor: pointer;}や@{overflow: visible;}があります（@{ress-button}）。 -@{cursor: pointer;}はユーザーエージェントスタイルシートでカーソルへ対する宣言がないため、ress側で宣言しています。 -@{overflow: visible;}はコメントにもありますが、IE8〜11ではbutton要素へ対して@{hidden}という値が宣言されているため、それでは不都合があると考えたのか@{overflow: visible;}が宣言されています。 +ressはnormalize.cssやsanitize.cssと同じ宣言もあるですが、独自に@{cursor: pointer;}や@{overflow: visible;}が宣言されているです（@{ress-button}）。 +@{cursor: pointer;}はユーザーエージェントスタイルシートでカーソルの宣言がないのでressで宣言しているのです。 +@{overflow: visible;}はコメントにもあるように、IE8〜11はbutton要素の値として@{hidden}が宣言されているのです。その宣言を無くすために@{overflow: visible;}が宣言されているです。 //list[ress-button][ressのbutton要素へ対する宣言]{ #@mapfile(../codes/reset-css/ress/button.css) @@ -679,11 +650,11 @@ button { == textarea要素 -textarea要素はnormalize.cssやsanitize.css、ressで似通った宣言になっています。 +textarea要素はnormalize.cssやsanitize.css、ressで似た宣言がされているです。 ==={textarea-normalize} normalize.css -normalize.cssの宣言は単純で、IE向けにtextarea要素内のスクロールバーを消すだけの宣言がされています（@{normalize-textarea}）。 +normalize.cssの宣言は単純なのです。IE向けにtextarea要素内のスクロールバーを消すだけの宣言だけです（@{normalize-textarea}）。 //list[normalize-textarea][normalize.cssのtextarea要素へ対する宣言]{ #@mapfile(../codes/reset-css/normalize-css/textarea.css) @@ -699,7 +670,7 @@ textarea { ==={textarea-sanitize-and-ress} sanitize.cssとress -sanitize.cssとressでは、normalize.cssでされていた宣言に加え、textarea要素のリサイズできる方向を縦方向にのみ制限する宣言がされています（@{sanitize-and-ress-textarea}）。 +sanitize.cssとressは、normalize.cssの宣言に加えてtextarea要素がリサイズできる方向を縦だけにする宣言がされているのです（@{sanitize-and-ress-textarea}）。 //list[sanitize-and-ress-textarea][sanitize.cssとressのtextarea要素へ対する宣言]{ #@mapfile(../codes/reset-css/sanitize-css/textarea.css) @@ -718,8 +689,8 @@ textarea { ==={textarea-yui3} YUI 3 Reset CSS #@# prh:disable -書かれた時期が古いため、IE 7以下に適用されるCSSハックが書かれています（@{yui3-textarea}）。 -この@{*font-size:100%}という書き方については@ITの「IE 6とIE 7のCSSハック16選」内にあるアスタリスクハック@{atmarkit-css}を見てください。 +書かれた時期が古いので、IE 7以下で使えるCSSハックが書かれているです（@{yui3-textarea}）。 +@{*font-size:100%}という書き方は@ITの「IE 6とIE 7のCSSハック16選」内にある@{アスタリスクハック}@{atmarkit-css}を見るのです。…見なくてもよいのです。 //footnote[atmarkit-css][http://www.atmarkit.co.jp/fwcr/design/benkyo/csshack02/03.html#13] //list[yui3-textarea][YUI 3のtextarea要素へ対する宣言]{ @@ -737,11 +708,10 @@ select { == まとめ -Reset CSSといってもライブラリによって思想や宣言内容が違います。 -その中から自分が作ろうとしているものに応じてReset CSSを選択するのが重要です。 +Reset CSSといってもライブラリによって思想や宣言内容が違うのです。フレンズによって得意なことは違うのです。 +その中から自分が作ろうとしているものに適したReset CSSを選ぶのが重要なのです。カレーのスパイスが重要なのと一緒なのです。 -個人的な意見としては、Eric Meyer's Reset CSSやnormalize.css、sanitize.cssはブラウザ既定の見た目を大幅に上書きしない場面で使えます。 -たとえば、企業の公式Webサイトや1ページで収まるようなキャンペーンサイトが挙げられます。 +われわれとしては、Eric Meyer's Reset CSSやnormalize.css、sanitize.cssはブラウザ既定の見た目を大幅に上書きしなければ使えるです。 +たとえば会社のWebサイトやキャンペーンサイトが挙げられるのです。 -ressはその逆で、大幅にブラウザ既定の見た目を書き換えたい場合に使えます。 -たとえばWebアプリやElectronなどで作るデスクトップアプリなどが挙げられます。 +ressは大幅にブラウザ既定の見た目を書き換えたいときに使えるです。たとえばWebアプリやElectronで作るデスクトップアプリなどです。