Skip to content

Commit 49d9c2e

Browse files
chvmvdchvmvd
committed
Merge branch 'main' into add-remark-term
2 parents 5e44918 + 88aa4f5 commit 49d9c2e

File tree

135 files changed

+2573
-1833
lines changed

Some content is hidden

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

135 files changed

+2573
-1833
lines changed

‎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: 3 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,17 @@ title: CSS
1212
<Term>**`style`属性**</Term>は、全ての<Term>HTML要素</Term>に対して定義されている、<Term>CSS</Term>を記述するための属性です。次の例では、`div`要素の`style`属性に<Term>CSS</Term>を指定して、文字色を赤色にしています。
1313

1414
```html title="index.html"
15-
<div style="color: red; font-size: 24px;">Hello World!</div>
15+
<div style="color: red; font-size: 24px">Hello World!</div>
1616
```
1717

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

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/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-
## [[JavaScript]] の基本文法
59+
## [[JavaScript]]の基本文法
6060

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

‎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
@@ -22,7 +22,7 @@ document.write(myName);
2222
2行目では、<Term>変数</Term>`myName`が<Term>評価</Term>され、<Term>代入</Term>されていた<Term>文字列</Term><Term>値</Term>`"John Doe"`が画面に表示されます。
2323

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

2727
```javascript title="script.js"
2828
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
@@ -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/1-trial-session/14-events/index.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ greetButton.onclick = clicked();
8484

8585
`document.write`関数を使うと、画面上にあったボタンが消えてしまいます。また、文字色や文字サイズを変えることも困難です。
8686

87-
`document.write`関数の代わりに、先ほどのDOMの章で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。
87+
`document.write`関数の代わりに、先ほどのDOMの節で扱った方法を使ってHTML要素をJavaScriptで操作するとよいでしょう。
8888

8989
:::
9090

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ title: Webプログラミングの基礎を学ぼう
44

55
import DocCardList from "@theme/DocCardList";
66

7-
この部では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。
7+
この章では、HTML、CSS、JavaScriptの基礎を学び、簡単なウェブアプリケーションを作ってみます。
88

99
<DocCardList />

0 commit comments

Comments
 (0)