feat(articles): @<code>{}記法を追加

Author: kubosho

articles/ch02.re

@@ -24,8 +24,8 @@ Hard resetは@<list>{hard-reset}のように書くだけの簡単なReset CSSで
 //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が発表された当時、ブラウザ間で@<code>{margin}や@<code>{padding}の指定に差があることに対し大きな関心を持っていたようです。
+そのため、全称セレクタで@<code>{margin}と@<code>{padding}を@<code>{0}にすることで、ブラウザによって@<code>{margin}や@<code>{padding}の指定に差があることを無かったことにしようと試みたようです。
 
 == Eric Meyer's Reset CSS
 
@@ -57,16 +57,16 @@ Eric MeyerというCSSへ対しとても貢献している人がいます。彼
 #@# prh:disable
 Eric Meyer's Reset CSSのソースコードは@<href>{http://meyerweb.com/eric/tools/css/reset/}にあります。
 
-Hard resetの問題点ですが、全称セレクタを使ってmarginやpaddingを0にするやり方は、フォーム関連の要素に対してどういった影響があるか分からないと書いてあります。
-そしてmarginやpaddingを0にするだけでなく、一貫したフォントに関わるスタイル宣言をしたかったとも書いてあります。
+Hard resetの問題点ですが、全称セレクタを使って@<code>{margin}や@<code>{padding}を@<code>{0}にするやり方は、フォーム関連の要素に対してどういった影響があるか分からないと書いてあります。
+そして@<code>{margin}や@<code>{padding}を@<code>{0}にするだけでなく、一貫したフォントに関わるスタイル宣言をしたかったとも書いてあります。
 そのため明示的に要素を指定して個別にリセットしていくことで、問題を解決できると思って書かれたのがEric Meyer's Reset CSSです。
 
 == YUI 3 Reset CSS
 
 Yahoo!が主に開発していたYUI library@<fn>{yui-deprecate}の中に含まれるReset CSSです。
 //footnote[yui-deprecate][なおYUI 3はこれからメンテナンスをおこなわないというアナウンスをしています]
 
-YUI 3 Reset CSSはhtml要素に対しcolorプロパティやbackgroundプロパティが指定されています。
+YUI 3 Reset CSSはhtml要素に対し@<code>{color}プロパティや@<code>{background}プロパティが指定されています。
 またarticle要素やheader要素といったHTML5で追加された要素に対する指定がありません。
 これはYUI 2の時代からReset CSSがほぼ更新されていないためです@<fn>{yui2-reset}。
 //footnote[yui2-reset][https://github.com/yui/yui2/blob/master/src/reset/css/reset.css]
@@ -96,7 +96,7 @@ normalize.cssはブラウザが指定しているスタイルで使えそうな
 
 normalize.cssをNicolas Gallagherとともに作ったJonathan Nealが作ったReset CSSです。
 Jonathan NealはそれまでEric Meyer's Reset CSSやnormalize.cssを使っていたようですが、それらを元に大多数が書いたスタイル宣言を含んだものがsanitize.cssです。
-具体的には@<list>{sanitize-html}のとおり、html要素に@<code>{box-sizing: border-box;}を指定して全称セレクタで@<code>{box-sizing: inherit;}を指定することです。
+具体的にはhtml要素に@<code>{box-sizing: border-box;}を指定して全称セレクタで@<code>{box-sizing: inherit;}を指定することです（@<list>{sanitize-html}）。
 これによって特定の要素に対してwidthやheightを指定するときに、borderやpaddingの指定を気にせずwidthやheightの値を指定できます。
 
 //list[sanitize-html][sanitize.cssのhtml要素に対する指定]{
@@ -131,6 +131,6 @@ html {
 == ress
 
 最後は@<kw>{A modern CSS reset}と称するressです。
-ressはnormalize.cssの指定を受け継ぎつつ、Hard resetのようにすべてのmarginやpaddingを0にしています。
+ressはnormalize.cssの指定を受け継ぎつつ、Hard resetのようにすべての@<code>{margin}や@<code>{padding}を@<code>{0}にしています。
 またsanitize.cssと同じくすべての要素に対して@<code>{box-sizing: border-box;}を指定しています。
 フォームに関連する要素についても@<kw>{A modern CSS reset}と称しているとおり、大胆にユーザーエージェントスタイルシートの指定をリセットしています。

articles/ch03.re

@@ -48,14 +48,14 @@ body {
 #@end
 //}
 
-Eric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSでは@<code>{body}要素へ対し@<code>{margin: 0;}を指定しています。
-Webページを作るときにページの外周へmarginを設定することはほとんど無いため、このような指定がされていると思われます。
+Eric Meyer's Reset CSS、sanitize.css、YUI 3 Reset CSSではbody要素へ対し@<code>{margin: 0;}を指定しています。
+Webページを作るときにページの外周へ@<code>{margin}を設定することはほとんど無いため、このような指定がされていると思われます。
 normalize.cssでもv5.0.0まではbody要素に対し同様の指定がされていましたが、v6.0.0で削除されて何も指定されなくなりました。
 
 == セクショニング・コンテンツとh1要素
 
 h1要素は見出しを表す要素の中でもっともランクが高い要素です。
-また@<code>{section}要素や@<code>{article}要素といったセクショニング・コンテンツへh1要素を入れた場合は、入れ子の深さに応じてスタイルが変わるようになっています（@<list>{h1-element}）。
+またsection要素やarticle要素といったセクショニング・コンテンツへh1要素を入れた場合は、入れ子の深さに応じてスタイルが変わるようになっています（@<list>{h1-element}）。
 
 //list[h1-element][h1要素に対するスタイル定義]{
 #@mapfile(../codes/browser/h1.css)
@@ -148,7 +148,7 @@ Firefoxでは文字のレイアウト方向や向き、文字が流れる方向
 ちなみにCSSのプロパティでは、文字のレイアウト方向は@<code>{writing-mode}、文字の向きは@<code>{text-orientation}、文字の流れる方向は@<code>{direction}に対応しています。
 
 ChromeやSafariでは、@<code>{margin-before}や@<code>{margin-after}といったプロパティが定義され、値として@<code>{1__qem}が定義されています。
-これは、互換性モードで表示するときにmarginの相殺をおこなわないようにするものです。
+これは、互換性モードで表示するときに@<code>{margin}の相殺をおこなわないようにするものです。
 
 YUI 3 Reset CSSやEric Meyer's Reset CSSといった古めのReset CSSでは@<code>{margin}と@<code>{padding}が0と指定されています。
 しかし、他のReset CSSでは特に指定がなくユーザーエージェントスタイルシートをそのまま使うようにしています。
@@ -213,7 +213,7 @@ img {
 
 == ul, ol要素
 
-ulやol要素はFirefoxやChrome、Safariで論理marginとpaddingが指定されています（@<list>{ul-firefox}）。
+ulやol要素はFirefoxやChrome、Safariで@<code>{論理margin}と@<code>{padding}が指定されています（@<list>{ul-firefox}）。
 
 //list[ul-firefox][ul要素に対するSafariのスタイル定義]{
 #@mapfile(../codes/browser/firefox/ul.css)
@@ -326,7 +326,7 @@ table > form:-moz-is-html {
 //}
 
 sanitize.cssでは@<code>{border-collapse: collapse;}の指定がされています（@<list>{sanitize-table}）。
-これはtableのborderをセル同士で共有する指定になります。表を表示するときにセルを分けて表示することは少ないので、余計なスタイル宣言を減らすことができます。
+これはtableの@<code>{border}をセル同士で共有する指定になります。表を表示するときにセルを分けて表示することは少ないので、余計なスタイル宣言を減らすことができます。
 
 //list[sanitize-table][sanitize.cssのtable要素に対する指定]{
 #@mapfile(../codes/reset-css/sanitize-css/table.css)
@@ -611,7 +611,7 @@ select::-ms-value {
 == button要素
 
 normalize.cssやsanitize.css、ressではWebKitのバグを修正するセレクタ指定やプロパティと値の指定がおこなわれています（@<list>{normalize-button}）。
-またFirefoxに対してもbutton要素内に画像を配置したときにボタンのborderと画像の間に隙間が空く問題などが修正されています@<fn>{firefox-form-button}。
+またFirefoxに対してもbutton要素内に画像を配置したときにボタンの@<code>{border}と画像の間に隙間が空く問題などが修正されています@<fn>{firefox-form-button}。
 #@# prh:disable
 //footnote[firefox-form-button][http://jeffreyfrancesco.org/weblog/2011062101/]