パソコン初心者のための「いちばんやさしいHTML＋CSS＋JavaScript基礎」

1. パソコンとインターネットの基礎知識

● パソコンって？

• 電気で動く「とても頭のいいノートや道具箱」

• 文章を書いたり、絵を描いたり、世界中とやり取りができます

● インターネットとは？

• 世界中のパソコンやスマホ同士がつながった巨大な情報の道

• 「Google」や「YouTube」も、実はページ（＝ホームページ）の集まり

● ブラウザって？

• ホームページを見るための「特別なソフト」

• 代表例：Google Chrome、Microsoft Edge、Safari、Firefox

2. ホームページの正体と仕組み

• ホームページ＝「パソコンが読める手紙」＋「飾り」＋「動き」

• この「手紙」を書くためのルールが「HTML」という言葉（ルールブック）

• CSSはページの「見た目・色・形」を決める

• JavaScriptはページに「動きや仕掛け」を付ける

つまり…
HTML：ページの“骨組み”
CSS：ページの“服装やお化粧”
JavaScript：ページの“動きや演出”
…というイメージです

3. ホームページ作りに必要な道具

• パソコン（WindowsでもMacでもOK）

• エディタ（「メモ帳」や「テキストエディット」、または「VS Code」「Sublime Text」など）

• インターネット環境（家にWi-Fiやネットがあれば十分）

• 画像や写真（自分の使いたいもの）

• アイコン画像（ファビコン用）

• （あれば）USBメモリや外付けHDD…ファイルのバックアップ用

4. ファイル・フォルダの扱い方

● ファイルって？

• パソコンの「ノート」「写真」「音楽」など、1つ1つのデータのこと

● フォルダって？

• ファイルをしまう「引き出し」や「箱」

• 整理のコツ：「my-homepage」など分かりやすい名前をつける

• 「images」フォルダを作って画像はまとめておく

● ファイル名の注意

• 半角英数字が安心（日本語やスペースはエラーのもと）

• 例：「index.html」「about.html」「style.css」「logo.png」

5. メモ帳やエディタでファイルを作る

● Windowsの場合

• 「メモ帳」を開く（スタート→検索→「メモ帳」）

• 文章を書いて「ファイル」→「名前を付けて保存」

• 「index.html」など必ず「.html」で保存

• 「文字コード：UTF-8」が日本語でも安全

● Macの場合

• 「テキストエディット」を開く（アプリケーション→テキストエディット）

• 「プレーンテキスト」に変更（メニュー→フォーマット→プレーンテキスト）

• あとは同じように保存