Merge pull request #329 from ut-code/develop

chvmvd · web-flow · commit 75f3029ede1b · 2023-05-24T06:31:28.000+09:00
diff --git a/docs/2-browser-apps/05-array/_samples/Array-class/script.js b/docs/2-browser-apps/05-array/_samples/Array-class/script.js
@@ -1,15 +1,15 @@
-//Array#push メソッドを用いて、フィボナッチ数列の配列を作成
+// Array#push メソッドを用いて、フィボナッチ数列の配列を作成
 const f = [1, 1];
 for (let i = 0; i < 100; i += 1) {
   f.push(f[f.length - 1] + f[f.length - 2]);
 }
 
-//作成した配列の各要素を for ～ of 文を用いて出力
+// 作成した配列の各要素を for ～ of 文を用いて出力
 for (const item of f) {
   document.write(item);
 }
 
-//作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力
+// 作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力
 for (let i = 0; i < f.length; i += 1) {
   document.write(f[i]);
 }
diff --git a/docs/2-browser-apps/05-array/index.md b/docs/2-browser-apps/05-array/index.md
@@ -119,16 +119,16 @@ document.write(studentNames.length); // 4
 <Answer>
 
 ```javascript
-//Array#push メソッドを用いて、フィボナッチ数列の配列を作成
+// Array#push メソッドを用いて、フィボナッチ数列の配列を作成
 const f = [1, 1];
 for (let i = 0; i < 100; i += 1) {
   f.push(f[f.length - 1] + f[f.length - 2]);
 }
-//作成した配列の各要素を for ～ of 文を用いて出力
+// 作成した配列の各要素を for ～ of 文を用いて出力
 for (const item of f) {
   document.write(item);
 }
-//作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力
+// 作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力
 for (let i = 0; i < f.length; i += 1) {
   document.write(f[i]);
 }
diff --git a/docs/2-browser-apps/07-advanced-css/index.md b/docs/2-browser-apps/07-advanced-css/index.md
@@ -73,20 +73,12 @@ CSS ファイルの拡張子は通常 `.css` です。今回は `index.html` と
 
 次のような条件を満たす要素を選択するセレクタは何でしょうか。
 
-- `id` 属性が `foo` の要素
-- `class` 属性に `bar` が含まれる要素の子孫の要素のうち、`button` 要素であるもの
+1. `id` 属性が `foo` の要素
+2. `class` 属性に `bar` が含まれる要素の子孫の要素のうち、`button` 要素であるもの
 
 <Answer>
 
-```css
-<!-- id 属性が foo の要素 -->
-#foo {
-  <!-- 処理 -->
-}
-<!-- class 属性に bar が含まれる要素の子孫の要素のうち、button 要素であるもの -->
-.bar button {
-  <!-- 処理 -->
-}
-```
+1. `#foo`
+2. `.bar button`
 
 </Answer>
diff --git a/docs/2-browser-apps/08-css-arrangement/_samples/absolute/style.css b/docs/2-browser-apps/08-css-arrangement/_samples/absolute/style.css
@@ -1,7 +1,7 @@
 .box1 {
+  background-color: lightcoral;
   width: 200px;
   height: 200px;
-  background-color: lightcoral;
 }
 
 .box2 {
diff --git a/docs/2-browser-apps/08-css-arrangement/_samples/fixed/style.css b/docs/2-browser-apps/08-css-arrangement/_samples/fixed/style.css
@@ -1,7 +1,7 @@
 .box1 {
+  background-color: lightcoral;
   width: 200px;
   height: 200px;
-  background-color: lightcoral;
 }
 
 .box2 {
diff --git a/docs/2-browser-apps/08-css-arrangement/_samples/relative/style.css b/docs/2-browser-apps/08-css-arrangement/_samples/relative/style.css
@@ -1,7 +1,7 @@
 .box1 {
+  background-color: lightcoral;
   width: 200px;
   height: 200px;
-  background-color: lightcoral;
 }
 
 .box2 {
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,17 +126,17 @@ HTML の要素は、ブロックレベル要素とインライン要素に分類
 
 <ViewSource url={import.meta.url} path="_samples/three-span" />
 
-![spanタグを3つ並べる](./three-span.png)
+![span 要素を3つ並べる](./three-span.png)
 
 ブロックレベル要素の中にはブロックレベル要素もインライン要素も配置することができますが、インライン要素の中にブロックレベル要素を配置することはできません。
 
 また、インライン要素の場合、`width` や `height` は適用されません。
 
 ### 課題
 
-`display` 要素を操作することで要素の挙動を変更することができます。
+`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" />

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`		`-//Array#push メソッドを用いて、フィボナッチ数列の配列を作成`
	`1`	`+// Array#push メソッドを用いて、フィボナッチ数列の配列を作成`
`2`	`2`	`const f = [1, 1];`
`3`	`3`	`for (let i = 0; i < 100; i += 1) {`
`4`	`4`	`f.push(f[f.length - 1] + f[f.length - 2]);`
`5`	`5`	`}`
`6`	`6`
`7`		`-//作成した配列の各要素を for ～ of 文を用いて出力`
	`7`	`+// 作成した配列の各要素を for ～ of 文を用いて出力`
`8`	`8`	`for (const item of f) {`
`9`	`9`	`document.write(item);`
`10`	`10`	`}`
`11`	`11`
`12`		`-//作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力`
	`12`	`+// 作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力`
`13`	`13`	`for (let i = 0; i < f.length; i += 1) {`
`14`	`14`	`document.write(f[i]);`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -119,16 +119,16 @@ document.write(studentNames.length); // 4`
`119`	`119`	`<Answer>`
`120`	`120`
`121`	`121`	```javascript
`122`		`-//Array#push メソッドを用いて、フィボナッチ数列の配列を作成`
	`122`	`+// Array#push メソッドを用いて、フィボナッチ数列の配列を作成`
`123`	`123`	`const f = [1, 1];`
`124`	`124`	`for (let i = 0; i < 100; i += 1) {`
`125`	`125`	`f.push(f[f.length - 1] + f[f.length - 2]);`
`126`	`126`	`}`
`127`		`-//作成した配列の各要素を for ～ of 文を用いて出力`
	`127`	`+// 作成した配列の各要素を for ～ of 文を用いて出力`
`128`	`128`	`for (const item of f) {`
`129`	`129`	`document.write(item);`
`130`	`130`	`}`
`131`		`-//作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力`
	`131`	`+// 作成した配列の各要素を、通常の for 文と Array#length プロパティを用いて出力`
`132`	`132`	`for (let i = 0; i < f.length; i += 1) {`
`133`	`133`	`document.write(f[i]);`
`134`	`134`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`.box1 {`
	`2`	`+ background-color: lightcoral;`
`2`	`3`	`width: 200px;`
`3`	`4`	`height: 200px;`
`4`		`- background-color: lightcoral;`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`.box2 {`