Merge pull request #326 from ut-code/unify-notation

chvmvd · web-flow · commit 5159ee3f04d7 · 2023-05-17T18:53:44.000+09:00
diff --git a/docs/2-browser-apps/08-css-arrangement/index.md b/docs/2-browser-apps/08-css-arrangement/index.md
@@ -76,9 +76,9 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 そのため、ブロックレベル要素を複数並べて書くと、上から下へと配置されていきます。
 
-ブロックレベル要素には `<div></div>` や `<p></p>`、 `<table></table>` 、`<ul></ul>` などがあります。
+ブロックレベル要素には `div` 要素や `p` 要素、`table` 要素、`ul` 要素などがあります。
 
-以下ではブロックレベル要素である `<div></div>` を 3 つ並べています。
+以下ではブロックレベル要素である `div` 要素を 3 つ並べています。
 
 ```html title="index.html"
 <body>
@@ -112,9 +112,9 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 そのため、インライン要素を複数並べて書くと、左から右へと配置されていきます。
 
-インライン要素には `<span></span>` や `<a></a>` 、`<img>` や `<input>` があります。
+インライン要素には `span` 要素や `a` 要素、`img` 要素や `input` 要素があります。
 
-以下ではインライン要素である `<span></span>` を 3 つ並べています。
+以下ではインライン要素である `span` 要素を 3 つ並べています。
 
 ```html title="index.html"
 <body>
@@ -126,7 +126,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 <ViewSource url={import.meta.url} path="_samples/three-span" />
 
-![spanタグを3つ並べる](./three-span.png)
+![span 要素を3つ並べる](./three-span.png)
 
 ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。
 
@@ -136,7 +136,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 `display` プロパティを操作することで要素の挙動を変更することができます。
 
-上記のコードで、ブロックレベル要素である `<div></div>` に `display: inline` を、インライン要素である `<span></span>` に `display: block` を指定してみると表示はどう変わるか、試してみましょう。
+上記のコードで、ブロックレベル要素である `div` 要素に `display: inline` を、インライン要素である `span` 要素に `display: block` を指定してみると表示はどう変わるか、試してみましょう。
 
 <ViewSource url={import.meta.url} path="_samples/display" />
 
@@ -146,7 +146,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 フレックスボックスを利用するには、配置したい要素の**親要素**に `display: flex` を適用します。
 
-以下のように、`box1`, `box2`, `box3` という 3 つの `<div></div>` が `wrapper` という `<div></div>` の中に並んでいる状態を考えましょう。
+以下のように、`box1`, `box2`, `box3` という 3 つの `div` 要素が `wrapper` という `div` 要素の中に並んでいる状態を考えましょう。
 
 ```html title="index.html"
 <body>
@@ -158,7 +158,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 </body>
 ```
 
-このままだとブロックレベル要素である `<div></div>` が並んでいるだけなので、`box1`, `box2`, `box3` は縦に並んで表示されます。
+このままだとブロックレベル要素である `div` 要素が並んでいるだけなので、`box1`, `box2`, `box3` は縦に並んで表示されます。
 
 ![ブロックレベル要素は縦に並んで表示される](./three-blocks.png)
 
@@ -385,7 +385,7 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 画面サイズによって異なるスタイルを適用させたい際にはメディアクエリを使います。
 
-スマートフォン等でもサイトをデバイス本来の画面サイズで表示するために、`head` タグの中に以下を記述しましょう。
+スマートフォン等でもサイトをデバイス本来の画面サイズで表示するために、`head` 要素の中に以下を記述しましょう。
 
 ```html title="index.html"
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
