Webサイトを作ってみよう

![Web.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3806587/318ab543-446e-cadf-1667-23480456e960.jpeg)

こんばんは！今回は、Webサイトを作ったことがない方向けに、すぐにWebサイトを作成できるようになるための講座をお届けします。

エンジニアとしての経験がないと、最初はWebの仕組みが全然分からないものです。何がどうなってWebが表示されるのか、概念は理解していても、具体的にどう進めていいか分からないことが多いですよね。

私も初めはそう感じていたので、イメージを早く掴んでもらうために、一連の動作を数分で覚えられるようにこの記事を書きました。この感覚さえつかめれば、すぐに楽しさを感じられるようになるでしょうし、一般的な「Hello World」から脱出する手助けになります。

それでは、早速環境構築の手順から始めましょう。まずは [Visual Studio Code (VS Code)](https://code.visualstudio.com/) をダウンロードしてください。

### Visual Studio Code (VS Code) インストール手順

#### 1. Windowsでのインストール

1. **VS Codeのダウンロード**
   - [公式サイト](https://code.visualstudio.com/) にアクセスし、「Download for Windows」ボタンをクリックして `.exe` ファイルをダウンロードします。

2. **インストール**
   - ダウンロードした `VSCodeSetup-x.x.x.exe` ファイルをダブルクリックして実行します。
   - セットアップウィザードが起動したら、「Next」をクリックして進めます。
   - 使用許諾契約書を読み、「I accept the agreement」にチェックを入れ、「Next」をクリックします。
   - インストール先フォルダーを指定し、「Next」をクリックします。
   - スタートメニューのフォルダーを選び、「Next」をクリックします。
   - 追加タスクの選択画面で、以下のオプションにチェックを入れ、「Install」をクリックします。
     - Add to PATH
     - Add Open with Code
     - Register Code as an editor for supported file types
   - インストールが完了したら、「Finish」をクリックして終了します。

#### 2. macOSでのインストール

1. **VS Codeのダウンロード**
   - [公式サイト](https://code.visualstudio.com/) にアクセスし、「Download for macOS」ボタンをクリックして `.zip` ファイルをダウンロードします。

2. **インストール**
   - ダウンロードした `.zip` ファイルをダブルクリックして展開します。
   - `Visual Studio Code.app` を `Applications` フォルダーにドラッグして移動します。
   - `Applications` フォルダーから `Visual Studio Code` をダブルクリックして起動します。
   - 初回起動時にセキュリティ警告が表示される場合があります。「Open」をクリックして開きます。

3. **コマンドラインからの起動（オプション）**
   - VS Codeを開き、`Command Palette`（`Cmd+Shift+P`）を開きます。
   - 「Shell Command: Install 'code' command in PATH」を選択して実行します。

### 新規ファイルの作成

1. **VS Codeを起動する**
   - VS Codeを起動します。

2. **新規ファイルを作成する**
   - メニューバーから「File」>「New File」を選択、または `Ctrl+N`（Windows/Linux）または `Cmd+N`（macOS）を押します。
   - サイドバーから「Explorer」アイコンをクリックし、「New File」アイコン（＋のアイコン）をクリックします。

3. **ファイルの保存**
   - 「File」メニューから「Save」または「Save As」を選択、または `Ctrl+S`（Windows/Linux）または `Cmd+S`（macOS）を押します。

### コーディング

#### HTMLの作成

基本的なHTMLの構造を作成します。以下のコードを `index.html` として保存します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ページタイトル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>サイトのヘッダー</h1>
    </header>
    <main>
        <h2>セクションタイトル</h2>
        <p>ここにコンテンツが入ります。</p>
    </main>
    <footer>
        <p>© 2024 会社名</p>
    </footer>
</body>
</html>
```

#### CSSの作成

HTMLの見た目を整えるためのCSSを `styles.css` として保存します。

```css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}
```

#### JavaScriptの追加

動的な機能を追加するためのJavaScriptを `scripts.js` として保存します。

```html
<button id="myButton">クリックしてみて</button>
<script>
    document.getElementById('myButton').addEventListener('click', function() {
        alert('ボタンがクリックされました！');
    });
</script>
```

### ブラウザで表示してみる

Google Chromeなどのブラウザで `index.html` を開き、正しく表示されるか確認します。VS Codeで `index.html` を右クリックし、「Open with Edge」>「Open browser」を選択します。

### GitHubでデプロイ（公開）

1. **GitHubアカウントにログイン**
   [GitHubの公式サイト](https://github.com/) にアクセスし、ログインします。
.
2. **リポジトリの選択**
   ファイルをアップロードしたいリポジトリを選択します。新しいリポジトリが必要な場合は、「+」ボタンをクリックし、「New repository」を作成します。
.
3. **ファイルをアップロードする**
   「Code」タブを選択し、「Add file」ボタンをクリックして「Upload files」を選択します。
   ファイルを選択し、「Commit changes」セクションで変更内容をコメントして「Commit changes」をクリックします。
.
これで基本的なWebページの作成手順が完了です。まずはこの流れを掴んで、楽しんでください！コードを覚えるのはその後で大丈夫です。質問があれば、ぜひ教えてくださいね。

この記事が役立ったら、フォローやいいねをお願いします！