← クエスト一覧へ

HTML & CSS ガイドブック

🏠

準備する

1 記事
1
開発環境の準備(テキストエディタ)

コードクエストはブラウザ上でコードを書いて実行できるので、特別なインストールは不要です。
ただし、実際に自分のパソコンでHTMLファイルを作りたい場合は、以下の準備をしましょう。

📥 VSCode(推奨エディタ)のインストール
1
公式サイトを開く
https://code.visualstudio.com にアクセス
2
ダウンロード&インストール
「Download for Windows / Mac」をクリックしてインストール
3
拡張機能「Live Server」を追加
左メニューのExtensionsから「Live Server」を検索してインストール。HTMLファイルを保存するたびにブラウザが自動更新されます
✅ 最初のHTMLファイルを作る

VSCodeで新しいファイルを作り、index.html という名前で保存します。
その後 ! と入力してTabキーを押すと、HTMLの基本テンプレートが自動挿入されます(Emmet機能)。

⚠️ ブラウザで確認するには

作成したHTMLファイルをブラウザ(Chrome推奨)にドラッグ&ドロップするか、
VSCodeのLive Server拡張で「Open with Live Server」をクリックすると表示確認できます。