Skip to content

和欧文間の半角スペースを削除 #799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chvmvd merged 1 commit into from
Jul 26, 2024
Merged

和欧文間の半角スペースを削除 #799

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions docs/1-trial-session/01-get-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: はじめての Web 開発
title: はじめてのWeb開発
---

import installChromeOnMacVideo from "./install-chrome-on-mac.mp4";
Expand All @@ -11,11 +11,11 @@ import createFolderOnWindowsVideo from "./create-folder-on-windows.mp4";
import openFolderOnMacVideo from "./open-folder-on-mac.mp4";
import openFolderOnWindowsVideo from "./open-folder-on-windows.mp4";

## Google Chrome のインストール
## Google Chromeのインストール

**Google Chrome** は、Google 社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材では Google Chrome の使用を前提として話を進めていきます。
**Google Chrome**は、Google社が開発するウェブブラウザです。現在多くの人に使われています。他のウェブブラウザを使うことも出来ますが、この教材ではGoogle Chromeの使用を前提として話を進めていきます。

Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
Google Chromeは、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。

<Tabs groupId="os">
<TabItem value="mac" label="macOS">
Expand All @@ -26,11 +26,11 @@ Google Chrome は、[公式サイト](https://www.google.com/intl/ja_jp/chrome/)
</TabItem>
</Tabs>

## Visual Studio Code のインストール
## Visual Studio Codeのインストール

**Visual Studio Code** (以下 VS Code) は、Microsoft 社が開発するテキストエディタです。多くの開発者に使用されています。
**Visual Studio Code** (以下VS Code) は、Microsoft社が開発するテキストエディタです。多くの開発者に使用されています。

Visual Studio Code は、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。
Visual Studio Codeは、[公式サイト](https://code.visualstudio.com)からインストールできます。まだインストールが終わっていない場合はインストールしておきましょう。

<Tabs groupId="os">
<TabItem value="mac" label="macOS">
Expand All @@ -43,7 +43,7 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から

## プロジェクトを格納するフォルダを作成する

これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) / ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) / ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。
これから皆さんはたくさんのプログラムを書いていくことになります。プログラムは他のファイルと扱い方がかなり異なるので、専用のフォルダを作っておきましょう。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中に `projects` という名前のフォルダを作り、その中にプロジェクトごとのフォルダを作っていくと良いです。ホームフォルダ (macOS) /ユーザーフォルダ (Windows) の場所については次の動画をご確認ください。

次の例では、`hello-world` の名前でプロジェクト用のフォルダを作成しています。

Expand All @@ -58,13 +58,13 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から

:::info

これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) / ユーザーフォルダ (Windows) の中の `projects` フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Code などの開発ツールが期待通りに動作しなくなってしまうことがあるからです。
これから作成するプログラムは、さきほど作成したホームフォルダ (macOS) /ユーザーフォルダ (Windows) の中の `projects` フォルダの中に保存するようにしてください。これは、ドキュメントフォルダなどのフォルダはクラウドストレージサービスによって自動的に同期されることがあり、Visual Studio Codeなどの開発ツールが期待通りに動作しなくなってしまうことがあるからです。

:::

## Visual Studio Code でプロジェクトフォルダを開く
## Visual Studio Codeでプロジェクトフォルダを開く

`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダを VS Code で開きます。
`File` メニューから `Open Folder...` をクリックして、先ほど作成したフォルダをVS Codeで開きます。

<Tabs groupId="os">
<TabItem value="mac" label="macOS">
Expand All @@ -77,6 +77,6 @@ Visual Studio Code は、[公式サイト](https://code.visualstudio.com)から

:::info

最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダを VS Code で開いたとき、VS Code によって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。
最初にフォルダを開いたとき、`Do you trust the authors of the files in this folder?` と聞かれるのは、インターネットからダウンロードした悪意のあるフォルダをVS Codeで開いたとき、VS Codeによって勝手に実行されてしまうのを防ぐためです。自分で作成したフォルダの場合は問題ありません。

:::
44 changes: 22 additions & 22 deletions docs/1-trial-session/02-html/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ import openInBrowserVideo from "./open-in-browser.mp4";
import showFileExtensionsVideo from "./show-file-extensions.mp4";
import reloadBrowserVideo from "./reload-browser.mp4";

Web 開発に必ず用いられる言語があります。<Term>**HTML**</Term> と CSS、そして JavaScript です。これらは互いに異なる役割をもっています。まずは最も基本となる <Term>HTML</Term> から学んでいきましょう。
Web開発に必ず用いられる言語があります。<Term>**HTML**</Term>とCSS、そしてJavaScriptです。これらは互いに異なる役割をもっています。まずは最も基本となる<Term>HTML</Term>から学んでいきましょう。

![Web開発で用いられる言語](./web-development-languages.drawio.svg)

## <Term>HTML</Term> を書き始める
## <Term>HTML</Term>を書き始める

VS Code の画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。
VS Codeの画面左端には、ファイル一覧が表示されています。新しいファイルを作成して、`index.html` と名付けましょう。ファイルの中身を次のようにした後、保存します。保存にはショートカットキー (<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) ) を用いてください。

```html title="index.html"
<!doctype html>
Expand All @@ -30,31 +30,31 @@ VS Code の画面左端には、ファイル一覧が表示されています。

<video src={createFileVideo} controls />

## ブラウザで <Term>HTML</Term> ファイルを開く
## ブラウザで<Term>HTML</Term>ファイルを開く

前頁で作成したフォルダを開き、`index.html` が作成されていることを確認しましょう。このファイルをダブルクリックして開きます。`Hello World!` (`World` の部分だけ太字) が表示されましたか？

<video src={openInBrowserVideo} controls />

:::info[拡張子]

VS Code 上で作成したファイルは `index.html` でした。しかしながら、Windows でフォルダの中身を見ると `index` しか表示されません (macOS の場合は正しく表示されます)。なぜでしょうか？
VS Code上で作成したファイルは `index.html` でした。しかしながら、Windowsでフォルダの中身を見ると `index` しか表示されません (macOSの場合は正しく表示されます)。なぜでしょうか？

ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term> ファイルであることを明示するためです。
ファイル名の `.` (ピリオド) 以降の部分は<Term>**拡張子**</Term>と呼ばれ、ファイルの種類を識別するために用いられることが多いです。先ほど `index.html` という名前のファイルを作成したのは、<Term>HTML</Term>ファイルであることを明示するためです。

実は Windows では、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。
実はWindowsでは、拡張子は標準で表示されません。下の動画を参考に、拡張子を表示する設定に変更しておきましょう。

<video src={showFileExtensionsVideo} controls />

:::

## <Term>HTML</Term> の構造
## <Term>HTML</Term>の構造

それでは、先ほどのファイルの中身を見ていきましょう。

`<strong>World</strong>` の部分に注目してください。

<Term>HTML</Term> ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。
<Term>HTML</Term>ファイルは、文書に意味を持たせるために、<Term>**タグ**</Term>と呼ばれる構造を持つことができます。<Term>タグ</Term>は、`<tag>` のような、`<` と `>` で囲まれた英数字のまとまりです。

{/* prettier-ignore */}
<Term>タグ</Term>は、`<tag>内容</tag>` のように、<Term>タグ</Term>名の先頭にスラッシュを付けるか否かの区別により<Term>**開始タグ**</Term>と<Term>**終了タグ**</Term>に分かれ、内部にテキストや別のタグを挟み込むことができます。
Expand All @@ -76,13 +76,13 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな
</html>
```

繰り返しになりますが、<Term>HTML</Term> を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。
繰り返しになりますが、<Term>HTML</Term>を編集したら、<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) キーを押してファイルを保存します。ファイル名の横に表示されている丸い記号が消えたら保存が完了しています。

![ファイルを保存する](./save-file.png)

:::tip[ショートカットキー]

ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または <kbd>Ctrl</kbd> (Windows) キーと <kbd>S</kbd> キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に <kbd>S</kbd> キーを押しましょう。
ショートカットキーがうまく押せませんか？<kbd>command</kbd> + <kbd>S</kbd> (macOS) / <kbd>Ctrl</kbd> + <kbd>S</kbd> (Windows) はよく、「<kbd>command</kbd> (macOS) または<kbd>Ctrl</kbd> (Windows) キーと<kbd>S</kbd>キーを同時に押す」と言われますが、実は同時に押すと半分くらいの確率で失敗します。<kbd>command</kbd> (macOS) / <kbd>Ctrl</kbd> (Windows) キーを押した後、キーから指を離す前に<kbd>S</kbd>キーを押しましょう。

ショートカットキーを使いこなせるようになると、パソコンの操作速度が飛躍的に上昇します。慣れている人がパソコンを操作しているのを見たら、ぜひ後ろから覗き込んでみましょう。便利そうなショートカットキーを使っている人がいたら身に付けるようにすると良いです。

Expand All @@ -94,39 +94,39 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

`<a href="https://www.google.com/">～</a>` は **`a` <Term>要素</Term>** です。<Term>開始タグ</Term>の中に `href="https://www.google.com/"` という部分があります。これが<Term>**属性**</Term>です。<Term>属性</Term>は、<Term>開始タグ</Term> の中に `属性名="値"` のように記述され、<Term>要素</Term>の特徴を表します。`a` <Term>要素</Term>の **`href` <Term>属性</Term>** は、ハイパーリンクのリンク先を表す<Term>属性</Term>です。

これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTML タグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。
これにより、ハイパーリンクが設定されます。この例では `a` <Term>要素</Term>の中に `strong` <Term>要素</Term>が含まれています。このように、HTMLタグは<Term type="htmlNest">**ネスト**</Term>させることにより、効果を重ね掛けすることができます。

![ネストされた要素](./nested-elements.png)

## <Term>HTML</Term> の文法
## <Term>HTML</Term>の文法

それでは、作成した <Term>HTML</Term> をもう一度見直してみましょう。
それでは、作成した<Term>HTML</Term>をもう一度見直してみましょう。

すべての <Term>HTML</Term> ファイルは、
すべての<Term>HTML</Term>ファイルは、

```html title="index.html"
<!doctype html>
```

という、「このファイルは <Term>HTML</Term> ファイルだ！」と宣言する定型句から始まります。
という、「このファイルは<Term>HTML</Term>ファイルだ！」と宣言する定型句から始まります。

続けて記述されるのは `<html lang="ja">`、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term> は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。
続けて記述されるのは `<html lang="ja">`、つまり **`html` <Term>要素</Term>** です。<Term>HTML</Term>は、この `html` <Term>要素</Term>を根とした木構造になっています。このため、`html` <Term>タグ</Term>の閉じ<Term>タグ</Term>はファイルの末尾に現れます。

`html` <Term>要素</Term>の直属の子<Term>要素</Term>は、 **`head` <Term>要素</Term>** と **`body` <Term>要素</Term>** の二つだけです。このうち、後者 (`body` <Term>要素</Term>) が実際にブラウザの表示領域上に表示されることになります。

![HTMLの構造](./html-structure.drawio.svg)

:::info

ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term> ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する <Term>HTML</Term> のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。
ブラウザの画面内に表示される情報を表すのは `body` <Term>要素</Term>中だけなので、<Term>HTML</Term>ファイルの編集は通常 `body` <Term>要素</Term>内部が中心となります。このドキュメントでも、これ以降掲載する<Term>HTML</Term>のサンプルコードは `body` <Term>要素</Term>内部のみを記述することとします。

:::

## 演習問題

### 問題 1
### 問題1

単一の HTML ファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。
単一のHTMLファイルのみを使用して、下のような遠足の持ち物リストを作成してみましょう。お弁当は何よりも重要なので太字にしましょう。

![遠足の持ち物リストの例](./excursion-sample.png)

Expand Down Expand Up @@ -162,9 +162,9 @@ VS Code 上で作成したファイルは `index.html` でした。しかしな

</Answer>

### 問題 2 (時間が余った場合)
### 問題2 (時間が余った場合)

下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすら HTML タグを並べるのみです。
下のようなフォームを作成してみましょう。いきなり飛躍した感がありますが、やることは単純で、ひたすらHTMLタグを並べるのみです。

![新規登録フォームの例](form-sample.png)

Expand Down
Loading