Skip to content

Commit be26fa0

Browse files
o2projectkubosho
o2project
authored andcommitted
[ci skip] update Web preview with a9663dc
1 parent a9663dc commit be26fa0

File tree

1 file changed

+26
-10
lines changed

1 file changed

+26
-10
lines changed

docs/ch02.html

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,26 +71,42 @@ <h2><a id="h2-1"></a><span class="secno">2.1 </span>Hard reset</h2>
7171
<p>このHard resetが発表された当時、ブラウザ間でmarginやpaddingの指定に差があることに対し大きな関心を持っていたようです。そのため、全称セレクタでmarginとpaddingを0にすることで、ブラウザによってmarginやpaddingの指定に差があることを無かったことにしようと試みたようです。</p>
7272

7373
<h2><a id="h2-2"></a><span class="secno">2.2 </span>Eric Meyer's Reset CSS</h2>
74-
<p>Eric MeyerというCSSへ対しとても貢献している人がいます。最近だとその貢献が認められ、CSS Color Module Level 4に彼の亡くなってしまった娘の名前を元にした「rebeccapurple」という色の名前が入ったということでも有名です<a id="fnb-rebeccapurple" href="#fn-rebeccapurple" class="noteref" epub:type="noteref">*3</a>。そのEric MeyerがHard resetの問題点を指摘した上で作ったReset CSSがEric Meyer's Reset CSSです。</p>
74+
<p>Eric MeyerというCSSへ対しとても貢献している人がいます。彼の功績を挙げると次のとおりです<a id="fnb-eric-meyer-linkedin" href="#fn-eric-meyer-linkedin" class="noteref" epub:type="noteref">*3</a></p>
75+
<ul>
76+
<li>オライリーから出版された<b class="kw">CSS: The Definitive Guide</b><!-- IDX:CSS: The Definitive Guide --><a id="fnb-css-the-definitive-guide" href="#fn-css-the-definitive-guide" class="noteref" epub:type="noteref">*4</a>(日本語版は<b class="kw">CSS完全ガイド</b><!-- IDX:CSS完全ガイド --><a id="fnb-css-complete-guide" href="#fn-css-complete-guide" class="noteref" epub:type="noteref">*5</a>)を執筆</li>
77+
<li>上記の本以外にも多数の本を執筆<a id="fnb-eric-meyer-biblio" href="#fn-eric-meyer-biblio" class="noteref" epub:type="noteref">*6</a></li>
78+
<li>css-discuss.orgの立ち上げ<a id="fnb-css-discuss" href="#fn-css-discuss" class="noteref" epub:type="noteref">*7</a></li>
79+
<li>スライドショー用のファイルフォーマット<b class="kw">S5</b><!-- IDX:S5 -->を考案<a id="fnb-s5" href="#fn-s5" class="noteref" epub:type="noteref">*8</a></li>
80+
<li>Netscape DevEdgeやCase Western Reserve University、Encyclopedia of Cleveland Historyのプロジェクトリーダーとデザイナーだった</li>
81+
</ul>
82+
<div class="footnote" epub:type="footnote" id="fn-eric-meyer-linkedin"><p class="footnote">[*3] https://www.linkedin.com/in/meyerweb/</p></div>
83+
<div class="footnote" epub:type="footnote" id="fn-css-the-definitive-guide"><p class="footnote">[*4] http://shop.oreilly.com/product/9780596527334.do</p></div>
84+
<div class="footnote" epub:type="footnote" id="fn-css-complete-guide"><p class="footnote">[*5] https://www.oreilly.co.jp/books/487311232X/</p></div>
85+
<div class="footnote" epub:type="footnote" id="fn-eric-meyer-biblio"><p class="footnote">[*6] https://en.wikipedia.org/wiki/Eric_A._Meyer#Bibliography</p></div>
86+
<div class="footnote" epub:type="footnote" id="fn-css-discuss"><p class="footnote">[*7] http://www.css-discuss.org/</p></div>
87+
<div class="footnote" epub:type="footnote" id="fn-s5"><p class="footnote">[*8] https://en.wikipedia.org/wiki/S5_(file_format)</p></div>
88+
<p>最近ではその功績にコミュニティが敬意を払い、彼の6歳で夭折した娘の名前をCSSの色名(<code class="inline-code tt">beccapurple</code>)として追加しようと提議されました<a id="fnb-becca-purple" href="#fn-becca-purple" class="noteref" epub:type="noteref">*9</a>。そして本人と夭折した娘の要望<a id="fnb-rebecca-purple" href="#fn-rebecca-purple" class="noteref" epub:type="noteref">*10</a>により<code class="inline-code tt">rebeccapurple</code>としてCSS Color Module Level 4<a id="fnb-css-color-module-level-4" href="#fn-css-color-module-level-4" class="noteref" epub:type="noteref">*11</a>に追加されました。</p>
89+
<div class="footnote" epub:type="footnote" id="fn-becca-purple"><p class="footnote">[*9] https://discourse.wicg.io/t/name-663399-becca-purple-in-css4-color/225</p></div>
90+
<div class="footnote" epub:type="footnote" id="fn-rebecca-purple"><p class="footnote">[*10] http://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/</p></div>
91+
<div class="footnote" epub:type="footnote" id="fn-css-color-module-level-4"><p class="footnote">[*11] https://drafts.csswg.org/css-color/#named-colors</p></div>
92+
<p>そのEric MeyerがHard resetの問題点を指摘した上で作ったReset CSSがEric Meyer's Reset CSSです。</p>
7593
<p>Eric Meyer's Reset CSSのソースコードは<a href="http://meyerweb.com/eric/tools/css/reset/" class="link">http://meyerweb.com/eric/tools/css/reset/</a>にあります。</p>
76-
<div class="footnote" epub:type="footnote" id="fn-rebeccapurple"><p class="footnote">[*3] https://cpplover.blogspot.jp/2014/06/rebeccapurplecss-4-color.html</p></div>
77-
<p>Hard resetの問題点ですが、全称セレクタを使ってmarginやpaddingを0にするやり方は、フォーム関連の要素に対してどういった影響があるか分からないと書いてあります。そしてmarginやpaddingを0にするだけでなく、一貫したフォントに関わるスタイル宣言をしたかったとも書いてあります。また全称セレクタは名前空間が指定されていない場合はすべての要素にマッチしてしまうため、とても処理コストが高いセレクタです。</p>
78-
<p>そのため明示的に要素を指定して個別にリセットしていくことで、そういった問題を解決できると思って書かれたのがEric Meyer's Reset CSSです。</p>
94+
<p>Hard resetの問題点ですが、全称セレクタを使ってmarginやpaddingを0にするやり方は、フォーム関連の要素に対してどういった影響があるか分からないと書いてあります。そしてmarginやpaddingを0にするだけでなく、一貫したフォントに関わるスタイル宣言をしたかったとも書いてあります。そのため明示的に要素を指定して個別にリセットしていくことで、問題を解決できると思って書かれたのがEric Meyer's Reset CSSです。</p>
7995

8096
<h2><a id="h2-3"></a><span class="secno">2.3 </span>YUI 3 Reset CSS</h2>
81-
<p>Yahoo!が主に開発していたYUI library<a id="fnb-yui-deprecate" href="#fn-yui-deprecate" class="noteref" epub:type="noteref">*4</a>の中に含まれるReset CSSです。</p>
82-
<div class="footnote" epub:type="footnote" id="fn-yui-deprecate"><p class="footnote">[*4] なおYUI 3はこれからメンテナンスをおこなわないというアナウンスをしています</p></div>
83-
<p>YUI 3 Reset CSSはhtml要素に対しcolorプロパティやbackgroundプロパティが指定されています。またarticle要素やheader要素といったHTML5で追加された要素に対する指定がありません。これはYUI 2の時代からReset CSSがほぼ更新されていないためです<a id="fnb-yui2-reset" href="#fn-yui2-reset" class="noteref" epub:type="noteref">*5</a></p>
84-
<div class="footnote" epub:type="footnote" id="fn-yui2-reset"><p class="footnote">[*5] https://github.com/yui/yui2/blob/master/src/reset/css/reset.css</p></div>
97+
<p>Yahoo!が主に開発していたYUI library<a id="fnb-yui-deprecate" href="#fn-yui-deprecate" class="noteref" epub:type="noteref">*12</a>の中に含まれるReset CSSです。</p>
98+
<div class="footnote" epub:type="footnote" id="fn-yui-deprecate"><p class="footnote">[*12] なおYUI 3はこれからメンテナンスをおこなわないというアナウンスをしています</p></div>
99+
<p>YUI 3 Reset CSSはhtml要素に対しcolorプロパティやbackgroundプロパティが指定されています。またarticle要素やheader要素といったHTML5で追加された要素に対する指定がありません。これはYUI 2の時代からReset CSSがほぼ更新されていないためです<a id="fnb-yui2-reset" href="#fn-yui2-reset" class="noteref" epub:type="noteref">*13</a></p>
100+
<div class="footnote" epub:type="footnote" id="fn-yui2-reset"><p class="footnote">[*13] https://github.com/yui/yui2/blob/master/src/reset/css/reset.css</p></div>
85101

86102
<h2><a id="h2-4"></a><span class="secno">2.4 </span>HTML5 Docter Reset CSS</h2>
87103
<p>HTML5 DocterというHTML5を使った開発について発信していたWebサイトがありました。そのWebサイトで提唱されたReset CSSです。HTML5 Docter Reset CSSのソースコードは<a href="http://html5doctor.com/html-5-reset-stylesheet/" class="link">http://html5doctor.com/html-5-reset-stylesheet/</a>にあります。</p>
88104
<p>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で追加されたarticle要素やheader要素に対するスタイル宣言を追加しています。またins要素やmark要素、hr要素などに独自のスタイルが適用されています。</p>
89105

90106
<h2><a id="h2-5"></a><span class="secno">2.5 </span>normalize.css</h2>
91107
<p>normalize.cssはそれまでのReset CSSを代替するReset CSSとして出てきました。</p>
92-
<p>それまでのReset CSSはブラウザが既定で指定しているスタイルを消すものでした。normalize.cssはブラウザが指定しているスタイルで使えそうなものはそのまま残しているのが特徴です。後述するsanitize.cssやressと違い、作者の意見が入っていない純粋にブラウザのスタイルを正規化するライブラリです<a id="fnb-normalize-v5" href="#fn-normalize-v5" class="noteref" epub:type="noteref">*6</a></p>
93-
<div class="footnote" epub:type="footnote" id="fn-normalize-v5"><p class="footnote">[*6] v5.0.0まではスタイル宣言に作者の意見が含まれていましたが、v6.0.0でそれらがすべて取り除かれました</p></div>
108+
<p>それまでのReset CSSはブラウザが既定で指定しているスタイルを消すものでした。normalize.cssはブラウザが指定しているスタイルで使えそうなものはそのまま残しているのが特徴です。後述するsanitize.cssやressと違い、作者の意見が入っていない純粋にブラウザのスタイルを正規化するライブラリです<a id="fnb-normalize-v5" href="#fn-normalize-v5" class="noteref" epub:type="noteref">*14</a></p>
109+
<div class="footnote" epub:type="footnote" id="fn-normalize-v5"><p class="footnote">[*14] v5.0.0まではスタイル宣言に作者の意見が含まれていましたが、v6.0.0でそれらがすべて取り除かれました</p></div>
94110
<p>ソースコードにはなぜそのような指定をしたのか書かれているため、ソースコードを読むだけでも勉強になります。</p>
95111

96112
<h2><a id="h2-6"></a><span class="secno">2.6 </span>sanitize.css</h2>

0 commit comments

Comments
 (0)