Webサイトを作ってみよう

Posted at 2024-08-01

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

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

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

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

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

1. Windowsでのインストール

VS Codeのダウンロード
- 公式サイトにアクセスし、「Download for Windows」ボタンをクリックして .exe ファイルをダウンロードします。
インストール
- ダウンロードした 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でのインストール

VS Codeのダウンロード
- 公式サイトにアクセスし、「Download for macOS」ボタンをクリックして .zip ファイルをダウンロードします。
インストール
- ダウンロードした .zip ファイルをダブルクリックして展開します。
- Visual Studio Code.app を Applications フォルダーにドラッグして移動します。
- Applications フォルダーから Visual Studio Code をダブルクリックして起動します。
- 初回起動時にセキュリティ警告が表示される場合があります。「Open」をクリックして開きます。
コマンドラインからの起動（オプション）
- VS Codeを開き、Command Palette（Cmd+Shift+P）を開きます。
- 「Shell Command: Install 'code' command in PATH」を選択して実行します。

新規ファイルの作成

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

コーディング

HTMLの作成

基本的なHTMLの構造を作成します。以下のコードを index.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 として保存します。

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 として保存します。

<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でデプロイ（公開）

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up