Skip to content

Commit 07ee71e

Browse files
Yokomi422Yokomi422
committed
Merge remote-tracking branch 'origin/main' into code-sandpack
2 parents 0cf2a23 + c8ad394 commit 07ee71e

File tree

191 files changed

+7073
-4660
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

191 files changed

+7073
-4660
lines changed

‎docs/1-trial-session/03-css/_samples/foo/index.html‎

Lines changed: 0 additions & 11 deletions
This file was deleted.

‎docs/1-trial-session/03-css/index.mdx‎

Lines changed: 3 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,17 @@ import fooCss from "./_samples/foo/style.css?raw";
1717
<Term>**`style`属性**</Term>は、全ての<Term>HTML要素</Term>に対して定義されている、<Term>CSS</Term>を記述するための属性です。次の例では、`div`要素の`style`属性に<Term>CSS</Term>を指定して、文字色を赤色にしています。
1818

1919
```html title="index.html"
20-
<div style="color: red; font-size: 24px;">Hello World!</div>
20+
<div style="color: red; font-size: 24px">Hello World!</div>
2121
```
2222

2323
<ViewSource url={import.meta.url} path="_samples/first-css" />
2424

2525
![Hello World!](./red-hello-world.png)
2626

2727
{/* prettier-ignore */}
28-
<Term>`style`属性</Term>には、<Term type="cssProperty">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
28+
<Term>`style`属性</Term>には、<Term id="css-property">**プロパティ**</Term>と呼ばれるスタイルの種類と、その値を、コロン記号で繋いだ形式で記述します。また、複数のプロパティを指定する場合は、セミコロンで区切ります。
2929

30-
この例では、`color`という<Term type="cssProperty">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term type="cssProperty">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
30+
この例では、`color`という<Term id="css-property">プロパティ</Term>に`red`という値を設定し、`font-size`という<Term id="css-property">プロパティ</Term>に`24px`という値を設定しています。これにより、`Hello World!`という文字列が、赤色で、24ピクセルの大きさで表示されます。
3131

3232
:::tip[`div`要素]
3333

@@ -153,58 +153,3 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
153153

154154
1. `#foo`
155155
2. `.bar button`
156-
157-
</Answer>
158-
159-
## 演習問題3（発展）
160-
161-
画像のようなシンプルなボックスを作ってみましょう。
162-
163-
![シンプルなボックス](./rounded-box-with-shadow.png)
164-
165-
シンプルで、よく見かけるデザインですが、様々な指定が必要であることが分かります。次のような点に注意してデザインしてみてください。
166-
167-
- グレーの枠線が付いています (border)
168-
- 枠線は角丸になっています (border-radius)
169-
- 枠線の外側に余白があります (margin)
170-
- 枠線の内側にも余白があります (padding)
171-
- ボックスに影がついています (box-shadow)
172-
173-
<Answer title="シンプルなボックス">
174-
175-
```html title="index.html"
176-
<!doctype html>
177-
<html lang="ja">
178-
<head>
179-
<meta charset="utf-8" />
180-
<link rel="stylesheet" href="./style.css" />
181-
<title>Title</title>
182-
</head>
183-
<body>
184-
<div id="foo">Foo</div>
185-
</body>
186-
</html>
187-
```
188-
189-
```css title="style.css"
190-
#foo {
191-
border: 1px solid #aaa;
192-
border-radius: 10px;
193-
margin: 30px;
194-
padding: 30px;
195-
box-shadow: 0px 0px 2px 1px #aaa;
196-
}
197-
```
198-
199-
<Sandpack
200-
template="static"
201-
files={{
202-
"/index.html": fooHtml,
203-
"/style.css": fooCss,
204-
}}
205-
options={{
206-
activeFile: "/style.css",
207-
}}
208-
/>
209-
210-
</Answer>

‎docs/1-trial-session/03-css/rounded-box-with-shadow.png‎

-39.5 KB
Binary file not shown.

‎docs/1-trial-session/04-javascript/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ document.write("Hello World!");
5656

5757
:::
5858

59-
## <Term>JavaScript</Term> の基本文法
59+
## <Term>JavaScript</Term>の基本文法
6060

6161
{/* prettier-ignore */}
6262
<Term>JavaScript</Term>のプログラムで、セミコロンで区切られた部分を<Term>文</Term>と呼びます。<Term>JavaScript</Term>の実行環境は、プログラム中に含まれる<Term>文</Term>を上から下に向けて順番に実行していきます。

‎docs/1-trial-session/05-expressions/index.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,16 +28,16 @@ document.write(3);
2828
document.write(3 + 4);
2929
```
3030

31-
## <Term>演算子</Term>の<Term type="javascriptOperatorPriority">優先順位</Term>
31+
## <Term>演算子</Term>の<Term id="javascript-operator-priority">優先順位</Term>
3232

3333
{/* prettier-ignore */}
34-
<Term>演算子</Term>には、<Term type="javascriptOperatorPriority">優先順位</Term>が設定されています。
34+
<Term>演算子</Term>には、<Term id="javascript-operator-priority">優先順位</Term>が設定されています。
3535

3636
```javascript title="script.js"
3737
document.write(3 + 4 * 5);
3838
```
3939

40-
`*`（乗算<Term>演算子</Term>）は`+`より<Term type="javascriptOperatorPriority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
40+
`*`（乗算<Term>演算子</Term>）は`+`より<Term id="javascript-operator-priority">優先順位</Term>が高く設定されているため、上記のコードの実行結果は`23`となります。
4141

4242
このコードにおいて、`3 + 4 * 5`や、`4 * 5`、`4`を<Term>**式**</Term>と呼びます。また、<Term>式</Term>が計算され、その結果としての<Term>値</Term>が確定することを式が<Term>**評価**</Term>されるといいます。
4343

‎docs/1-trial-session/06-variables/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ document.write(myName);
2525
2行目では、<Term>変数</Term>`myName`が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term>`"John Doe"`が画面に表示されます。
2626

2727
{/* prettier-ignore */}
28-
<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の節で説明します。
28+
<Term>変数</Term>を<Term>宣言</Term>するキーワードには、`let`以外にも`const`があります。記法自体は`let`と同様ですが、少し違いがあります。違いについては、次の項で説明します。
2929

3030
```javascript title="script.js"
3131
const myName = "John Doe";

‎docs/1-trial-session/07-boolean/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ const height = 155;
8080
const canRideRollerCoasters = age >= 10 && height >= 120; // true
8181
```
8282

83-
`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term type="javascriptOperatorPriority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
83+
`&&`や`||`よりも比較<Term>演算子</Term>の方が<Term id="javascript-operator-priority">優先順位</Term>が高いため、複数の条件を「かつ」「または」などで組み合わせることは容易です。
8484

8585
:::info
8686

@@ -117,7 +117,7 @@ document.write(isTanakaWinner); // true
117117

118118
:::tip
119119

120-
`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term type="javascriptOperatorPriority">優先順位</Term>が高いです。
120+
`+`, `-`, `*`, `/`などの算術演算子は、比較演算子よりも<Term id="javascript-operator-priority">優先順位</Term>が高いです。
121121

122122
```javascript
123123
const isBig = 10 + 5 > 10 - 3; // 15 > 7 なので true

‎docs/1-trial-session/11-array/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ for (変数の宣言/変数名 of 配列) {
9494

9595
## 配列の便利な機能
9696

97-
JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[オブジェクト](/docs/trial-session/object)と[クラス](/docs/browser-apps/class)の回でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
97+
JavaScriptの配列には、便利な変数や関数のようなものが定義されています。正確には[「オブジェクト」の節](/docs/trial-session/object)と[「クラス」の節](/docs/browser-apps/class)でそれぞれ扱う<Term>プロパティ</Term>、<Term>メソッド</Term>というものですが、今のところは特殊な書き方をする変数や関数であると考えればよいでしょう。
9898

9999
### `配列.length`
100100

‎docs/1-trial-session/13-dom/_samples/get-element-by-id/script.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
const element = document.getElementById("greeting");
2-
element.textContent = "Hello DOM";
1+
const greetingElement = document.getElementById("greeting");
2+
greetingElement.textContent = "Hello DOM";

‎docs/1-trial-session/13-dom/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ greetingType.textContent = "evening";
8989

9090
## <Term>HTML要素</Term>のスタイルを変更する
9191

92-
`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term type="cssProperty">プロパティ</Term>に対応します。
92+
`document.getElementById`<Term>関数</Term>が返す<Term>オブジェクト</Term>の`style`<Term>プロパティ</Term>は、その要素の <Term>`style`属性</Term>と対応します。 **`style`<Term>プロパティ</Term>に格納されている<Term>値</Term>自体も<Term>オブジェクト</Term>** となっており、その各<Term>プロパティ</Term>がCSSの<Term id="css-property">プロパティ</Term>に対応します。
9393

9494
```js title="script.js"
9595
element.style.backgroundColor = "red";
@@ -100,7 +100,7 @@ element.style.backgroundColor = "red";
100100
![JavaScriptからスタイルを操作する](./change-styles.png)
101101

102102
{/* prettier-ignore */}
103-
<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term type="cssProperty">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
103+
<Term>CSS</Term>の<Term id="css-property">プロパティ</Term>名である`background-color`は、内部にハイフンが含まれているため、`element.style.background-color`のように指定してしまうと、ハイフンが減算<Term>演算子</Term>として解釈されてしまいます。`style`<Term>プロパティ</Term>では、<Term>CSS</Term>の<Term id="css-property">プロパティ</Term>名は<Term>キャメルケース</Term>として指定する必要があることに注意してください。
104104

105105
### 確認問題
106106

0 commit comments

Comments
 (0)