Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
19 changes: 10 additions & 9 deletions html-css/DOCS.md
Original file line number Diff line number Diff line change
Expand Up @@ -119,27 +119,28 @@ VisBug の起動時に自動で開くツールがガイドツールです。
では実際にWebページの開発を始めてみましょう!
ここでは [StackBlitz](https://stackblitz.com/?starters=vanilla) というWeb IDEを使います。

![StackBlitzスタートページ](imgs/stackblitz-start-page.png)
![StackBlitzスタートページ](imgs/stackblitz-start-page-2025.png)

GitHubアカウントでログイン可能なので右上の「Sign in」からログインしておいてください。(制作物の保存に必要です)
ログインが成功すると↓のような画面に遷移します。

![stackblitzダッシュボード](imgs/stackblitz-dashboard.png)
![stackblitzダッシュボード](imgs/stackblitz-dashboard-2025.png)

「New Project」をクリックすると新規プロジェクトダイアログが開くので、Vanillaタブにある Static をクリックしてください。

![stackblitz新規プロジェクト](imgs/stackblitz-create-new-project.png)
![stackblitz新規プロジェクト](imgs/stackblitz-create-new-project-2025.png)

↓の画像のようにエディタとエミュレータが表示された状態に遷移します。

![stackblitz新規プロジェクト初期状態](imgs/stackblits-opened-static-ide.png)
![stackblitz新規プロジェクト初期状態](imgs/stackblits-opened-static-ide-2025.png)

ファイルビューアにあるファイルをすべて削除して準備完了です
↓のように、ファイルビューアに「index.html」、「package.json」、「package-lock.json」以外を削除し、この3ファイルになった状態で準備完了です

### 2-1. HTMLをはじめよう
![stackblitz新規プロジェクト初期状態](imgs/stackblits-opened-static-ide-removefile-2025.png)

では空になったファイルビューアの右上にカーソルをホバーして、アイコンからファイルの追加をクリックします。
最初に作るHTMLファイルは `index.html` とします。以下の内容を`index.html`に書き込んでください。
### 2-1. HTMLをはじめよう

HTMLファイル `index.html` の内容をすべて削除します。(削除した内容の解説はすぐ回収されます✋️)その後、以下の内容を`index.html`に書き込んでください。

```HTML:index.html
Hello, World !
Expand All @@ -149,7 +150,7 @@ StackBlitzのエミュレータに↓のように表示されていることを

![マーク前](imgs/html-hello-world.png)

先程の`Hello, World !`の前後を`<h1>`と`</h1>`で囲んで↓のように書き換えててください
先程の`Hello, World !`の前後を`<h1>`と`</h1>`で囲んで↓のように書き換えてください

```HTML:index.html
<h1>Hello, World !</h1>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html-css/imgs/stackblitz-dashboard-2025.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added html-css/imgs/stackblitz-start-page-2025.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.