HTML コース

0 STEP 0 / 7

レッスン0：パソコン基礎知識

⏱ 約25分やってみよう 1 クイズ 1

所要時間目安：30分／ HTML レッスン1 の前に読もう

🎯 学習目標

ファイルとフォルダの違いがわかる
拡張子が何かを知り、表示できるようにする
VS Code をインストールして、基本操作ができる
ブラウザの開発者ツールを開ける

📖 1. 導入

プログラミングを始める前に、パソコンの基本を確認しよう。

「コードを書く」というのは、つまりファイルを作って、ブラウザで確認することの繰り返しです。この流れをスムーズに進めるために、まずパソコンの基本的な使い方を押さえておきましょう。

英語の単語が出てきても大丈夫です。意味はそのつど説明します。

📁 2. ファイルとフォルダ

フォルダとファイルって何？

パソコンの中のデータは、フォルダとファイルで整理されています。

フォルダ ＝引き出し。中にファイルをまとめて入れておく場所
ファイル ＝紙。実際のデータが入っているもの（文章・画像・コードなど）

たとえば「夏休みの宿題」というフォルダの中に、「作文.txt」「絵.png」というファイルを入れるイメージです。

プロジェクトフォルダを作ろう

プログラミングでは、1つの作品に関するファイルをまとめて1つのフォルダに入れます。これをプロジェクトフォルダと呼びます。

デスクトップで右クリック →「新しいフォルダ」（Windows）または「新規フォルダ」（Mac）
フォルダ名を my-practice にする
このフォルダの中に、これから作るファイルをすべて保存していく

💡 フォルダ名やファイル名は半角英数字で付けましょう。スペースや日本語は後でトラブルの原因になることがあります。

🔤 3. 拡張子

拡張子って何？

ファイル名の最後についている .html .css .js などの部分を拡張子（かくちょうし）といいます。拡張子はそのファイルの「種類」を表しています。

拡張子	種類	役割
`.html`	HTML ファイル	ウェブページの骨格を作る
`.css`	CSS ファイル	ウェブページの見た目を整える
`.js`	JavaScript ファイル	ウェブページに動きをつける
`.png` / `.jpg`	画像ファイル	写真やイラスト

拡張子を表示する設定

パソコンの初期設定では拡張子が隠れていることがあります。表示するように設定しましょう。

Windows の場合：

エクスプローラーを開く
上のメニューから「表示」をクリック
「ファイル名拡張子」にチェックを入れる

Mac の場合：

Finder を開く
上のメニューから「Finder」→「設定」をクリック
「詳細」タブを開き、「すべてのファイル名拡張子を表示」にチェックを入れる

⚠️ 拡張子を変えると、ファイルが開けなくなることがあります。拡張子は変えないように気をつけましょう。

💻 4. VS Code のインストール

VS Code って何？

VS Code（Visual Studio Code）は、コードを書くための無料のアプリです。文字の色分けや補完機能があり、プログラミングがとても書きやすくなります。

インストール手順

ブラウザで https://code.visualstudio.com を開く
「Download」ボタンをクリックする（自分の OS が自動で選ばれます）
ダウンロードされたファイルを開いてインストールする
- Windows：.exe ファイルをダブルクリック → 「次へ」を押し続けてインストール
- Mac：.dmg ファイルをダブルクリック → VS Code のアイコンを「Applications」フォルダにドラッグ

✅ インストールが終わったら VS Code を起動してみましょう。英語のメニューが表示されますが、使う操作は3つだけなので大丈夫です。

基本操作3つ

これだけ覚えれば始められます。

① フォルダを開く

メニュー「File」→「Open Folder」（Windows）または「Open...」（Mac）
先ほど作った my-practice フォルダを選ぶ

② ファイルを新規作成する

左のサイドバーでフォルダ名の横にある「新しいファイル」アイコンをクリック
ファイル名を入力して Enter キーを押す（例：index.html）

③ ファイルを保存する

Windows：Ctrl + S
Mac：Cmd + S

💡 コードを書いたらこまめに保存する習慣をつけましょう。保存しないと変更が反映されません。

VS Code でファイルを作る流れ

実際の操作手順をまとめます。以下の通りにやってみましょう:

1. VS Code を起動する
2. メニュー「File」→「Open Folder」をクリック
3. デスクトップの「my-practice」フォルダを選んで開く
4. 左のエクスプローラーでフォルダ名の横の「新しいファイル」アイコンをクリック
5. 「index.html」と入力して Enter

確認ポイント:

✅ 左のサイドバーに「MY-PRACTICE」と表示されている
✅ その下に「index.html」ファイルが表示されている
✅ 右側にファイルの編集画面が開いている

⚠️ 全角スペース・全角文字に注意！
コードは半角英数字で書きます。日本語入力がオンのまま書くと、全角スペースや全角記号が混ざってエラーになります。

✅ OK: こんにちは
❌ NG: ＜h1＞こんにちは＜/h1＞（全角の＜＞はタグとして認識されない）

💡 コードを書くときは日本語入力をオフにしよう！（タグや属性を書き終えてから、テキスト部分だけ日本語入力をオンにする）

🔍 5. ブラウザの開発者ツール

開発者ツールって何？

開発者ツールは、ブラウザに最初から入っている「確認・調査ツール」です。自分が書いたコードにエラーがあるとき、ここに情報が表示されます。

⚠️ エラーは怖くない
エラーメッセージが出ても、パソコンが壊れるわけではありません。「ここがおかしいよ」というヒントだと思って読んでみましょう。エラーの対処法はエラー辞典でも調べられます。

開発者ツールの開き方

Windows：F12 キーを押す、または右クリック →「検証」
Mac：Cmd + Option + I を押す、または右クリック →「検証」

「コンソール」タブを確認しよう

開発者ツールを開いたら、上部のタブから「Console（コンソール）」をクリックしてください。ここにエラーメッセージや console.log() の出力が表示されます。JavaScript のレッスンでよく使います。

✅ 今は「こんな場所があるんだな」と確認するだけで OK です。

💻 やってみよう！

デスクトップに my-practice フォルダを作る
VS Code でそのフォルダを開く
index.html という名前のファイルを新規作成する
ファイルに Hello! と書いて保存する（Ctrl+S）
ファイルをブラウザにドラッグ＆ドロップして開く
「Hello!」と表示されれば成功です！ 🎉

⚠️ よくあるミス

ファイル名に日本語やスペースを使う：ファイル名は半角英数字で付けましょう。自己紹介.html ではなく index.html のように書きます。
保存を忘れる：コードを書いたら Ctrl+S（Mac: Cmd+S）で必ず保存しましょう。保存しないとブラウザに反映されません。
拡張子を変えてしまう：.html を .txt に変えるとブラウザで正しく表示されなくなります。拡張子は変えないように注意しましょう。