Skip to content

Commit 8799ed5

Browse files
chvmvdchvmvd
committed
Merge branch 'main' into add-deploy-chapter
2 parents 643f2e8 + 574f70e commit 8799ed5

File tree

149 files changed

+4321
-3496
lines changed

Some content is hidden

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

149 files changed

+4321
-3496
lines changed

‎README-en.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ This document is formatted with Prettier.
5858

5959
## License
6060

61-
ut.code(); Learn is licensed under the [MIT license](https://github.com/ut-code/utcode-learn/blob/master/LICENSE).
61+
ut.code(); Learn is licensed under the [MIT license](https://github.com/ut-code/utcode-learn/blob/main/LICENSE).
6262
Copyright © 2023 ut.code();.
6363

6464
## Contributing

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ npm run build
8989

9090
## ライセンス
9191

92-
ut.code(); Learn は [MIT license](https://github.com/ut-code/utcode-learn/blob/master/LICENSE) でライセンスされています。
92+
ut.code(); Learn は [MIT license](https://github.com/ut-code/utcode-learn/blob/main/LICENSE) でライセンスされています。
9393
Copyright © 2023 ut.code();.
9494

9595
## 貢献

‎babel.config.js‎

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

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

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

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

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ title: CSS
2020
![Hello World!](./red-hello-world.png)
2121

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

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

2727
:::tip[`div`要素]
2828

@@ -142,47 +142,3 @@ HTMLファイルとCSSファイルを分けて作成する場合、`style`属性
142142
2. `.bar button`
143143

144144
</Answer>
145-
146-
## 演習問題3（発展）
147-
148-
画像のようなシンプルなボックスを作ってみましょう。
149-
150-
![シンプルなボックス](./rounded-box-with-shadow.png)
151-
152-
シンプルで、よく見かけるデザインですが、様々な指定が必要であることが分かります。次のような点に注意してデザインしてみてください。
153-
154-
- グレーの枠線が付いています (border)
155-
- 枠線は角丸になっています (border-radius)
156-
- 枠線の外側に余白があります (margin)
157-
- 枠線の内側にも余白があります (padding)
158-
- ボックスに影がついています (box-shadow)
159-
160-
<Answer title="シンプルなボックス">
161-
162-
```html title="index.html"
163-
<!doctype html>
164-
<html lang="ja">
165-
<head>
166-
<meta charset="utf-8" />
167-
<link rel="stylesheet" href="./style.css" />
168-
<title>Title</title>
169-
</head>
170-
<body>
171-
<div id="foo">Foo</div>
172-
</body>
173-
</html>
174-
```
175-
176-
```css title="style.css"
177-
#foo {
178-
border: 1px solid #aaa;
179-
border-radius: 10px;
180-
margin: 30px;
181-
padding: 30px;
182-
box-shadow: 0px 0px 2px 1px #aaa;
183-
}
184-
```
185-
186-
<ViewSource url={import.meta.url} path="_samples/foo" />
187-
188-
</Answer>

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

-39.5 KB
Binary file not shown.

‎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/07-boolean/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const height = 155;
7777
const canRideRollerCoasters = age >= 10 && height >= 120; // true
7878
```
7979

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

8282
:::info
8383

@@ -114,7 +114,7 @@ document.write(isTanakaWinner); // true
114114

115115
:::tip
116116

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

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

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

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

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

72-
`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>に対応します。
72+
`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>に対応します。
7373

7474
```js title="script.js"
7575
element.style.backgroundColor = "red";
@@ -80,7 +80,7 @@ element.style.backgroundColor = "red";
8080
![JavaScriptからスタイルを操作する](./change-styles.png)
8181

8282
{/* prettier-ignore */}
83-
<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>として指定する必要があることに注意してください。
83+
<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>として指定する必要があることに注意してください。
8484

8585
### 確認問題
8686

‎docs/2-browser-apps/05-css-arrangement/_samples/absolute/index.html‎

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

0 commit comments

Comments
 (0)