Webサイトを作ってみよう

2024年8月1日 22:09

こんばんは。今回はWebサイトを作ったことがない人向けに、すぐにWebサイトを作れるようになってもらう講座を書きます。

エンジニア未経験の時って、もう初めはイメージが全然つかないんですよね。何がどうなってWebが表示されるのか、概念はなんとなく理解してるが具体的にどうやるの…と思いませんか？

私は初期そう思ったので、イメージを早くつけてもらうためにも数分で「なるほこうやるのか！」と一連の動作を覚えてもらうことに重点を置いてこの記事を書こうと思いました。この感覚さえ身につけばすぐに楽しくなりますし、世の中に溢れる「じゃあHello Worldを書いてみましょう」という超つまんないところから脱出できます。

では早速環境構築の手順から始めます。まずはVisual Studio Codeをダウンロードしてください。動画の方が理解が早い人向けに、記事とセットで参考となる動画のリンクも併せて記載しておきます。それではいきましょう！

Visual Studio Codeインストール手順

Visual Studio Code（VS Code）のインストール手順を詳しく説明しますね。以下は、Windows、macOS、Linuxそれぞれの手順です。

1. Windowsでのインストール手順

1.1 VS Codeのダウンロード

公式サイトへアクセス: Visual Studio Codeの公式サイトにアクセスします。
ダウンロード: トップページに「Download for Windows」というボタンがあります。クリックしてインストーラ（`.exe`ファイル）をダウンロードします。

1.2 インストール

インストーラを実行: ダウンロードした`VSCodeSetup-x.x.x.exe`ファイルをダブルクリックして実行します。
セットアップウィザード: インストーラが起動したら、「Next」ボタンをクリックして進めます。
ライセンス契約: 使用許諾契約書を読み、「I accept the agreement」にチェックを入れ、「Next」をクリックします。
インストール先の選択: インストール先フォルダーを指定します。デフォルトのままで問題ない場合は、「Next」をクリックします。
スタートメニューのフォルダー: スタートメニューにショートカットを作成するフォルダーを選びます。「Next」をクリックします。
追加タスクの選択: 以下のオプションから必要なものにチェックを入れます（推奨設定）:
- Add to PATH: コマンドラインから`code`コマンドで起動できるようにします。
- Add Open with Code: ファイルエクスプローラーで「Codeで開く」オプションを追加します。
- Register Code as an editor for supported file types: ファイルタイプに関連付けます。
インストール: 「Install」ボタンをクリックしてインストールを開始します。
インストール完了: インストールが完了したら、「Finish」をクリックしてインストーラを終了します。

2. macOSでのインストール手順

2.1 VS Codeのダウンロード

公式サイトへアクセス: Visual Studio Codeの公式サイトにアクセスします。
ダウンロード: トップページに「Download for macOS」というボタンがあります。クリックして`.zip`ファイルをダウンロードします。

2.2 インストール

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

2.3 コマンドラインからの起動（オプション）

コマンドラインツールの設定: VS Codeを開き、`Command Palette`（`Cmd+Shift+P`）を開きます。
コマンドのインストール: 「Shell Command: Install 'code' command in PATH」を選択して実行します。これで、ターミナルから`code`コマンドでVS Codeを起動できるようになります。

初期設定

拡張機能のインストール: 必要な拡張機能をインストールすることで、開発環境をカスタマイズできます。左側のサイドバーから「Extensions」（または`Ctrl+Shift+X`）をクリックし、必要な拡張機能を検索してインストールします。
テーマや設定のカスタマイズ: 設定は`Ctrl+,`（または`Cmd+,`）で開けます。ここで、テーマやエディタの設定をカスタマイズできます。

これでVS Codeのインストールは完了です。

新規ファイルの作成

VS Codeで新規ファイルを作成する手順は以下の通りです。

1. VS Codeを起動する

Windows/macOS/Linux: VS Codeを起動します。デスクトップアイコンやスタートメニューから開くことができます。

2. 新規ファイルを作成する方法

方法1: メニューバーを使用する

メニューバーをクリック: VS Codeの上部メニューバーから「File」をクリックします。
「New File」を選択: ドロップダウンメニューから「New File」を選択します。
新規ファイルが作成される: 新しいタブが開き、空のファイルが表示されます。ここで、ファイルの内容を入力できます。

方法2: ショートカットキーを使用する

Windows/Linux: `Ctrl+N`を押します。
macOS: `Cmd+N`を押します。
新規ファイルが作成される: 空のタブが開きます。

方法3: サイドバーを使用する

エクスプローラーを開く: サイドバーの一番上にある「Explorer」アイコン（ファイルフォルダーのアイコン）をクリックします。もしくは、`Ctrl+Shift+E`（Windows/Linux）または`Cmd+Shift+E`（macOS）を押します。
「New File」をクリック: サイドバーのファイルツリーの上部にある「New File」アイコン（＋のアイコン）をクリックします。
ファイル名を入力: ファイル名を入力してEnterキーを押します。指定した名前で新しいファイルが作成されます。

3. ファイルの保存

保存する: 作成したファイルの内容を保存するには、以下の方法があります。
メニューバーから: 「File」メニューをクリックし、「Save」または「Save As」を選択します。
ショートカットキーを使用:
- Windows/Linux: `Ctrl+S`
- macOS: `Cmd+S`
ファイル名の入力: 初めて保存する場合は、ファイル名と保存場所を指定するダイアログが表示されます。ファイル名を入力して保存します。

これで、新規ファイルを作成し、保存する準備が整いました。

コーディング

HTMLの作成

HTML（Hypertext Markup Language）は、Webページの構造を作る言語です。以下は基本的な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の作成

CSS（Cascading Style Sheets）は、HTMLの見た目を整えるためのスタイルシートです。例として、以下のようにスタイルを定義できます。これもコピーして貼り付けてください。index.html（ファイル名）とは区分けして新規ファイルを作ってそこに貼ります。ファイル名は”styles.css”としてください。上記のindex.htmlコードを見てください。上から5行目あたりに” <link rel="stylesheet" href="styles.css"> ”と書いています。これが、styles.cssのファイルを読み込むよーというコードです。"styles.css"という名前でコードを書いているので、CSSのファイル名は”styles.css”となります。この名前が一つでも異なったらエラーになり、index.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は、Webページに動的な機能を追加するためのスクリプト言語です。例えば、ボタンクリック時にアラートを表示するコードは以下のようになります。JavaScriptはなくてもWebページの表示は可能です。でも動作が何もありません。クリックした際の動作などをつけるにはJavaScriptが必須となります。

scripts.js

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

ブラウザで表示してみる

Google ChromeでWebページが正しく表示されるか確認します。
VS Codeのindex.htmlを右クリックし、[Open with edge] > [Open browser] をクリックします。表示されたら成功です。

GitHubでデプロイ（公開）

GitHubへのファイルアップロード手順を詳しく説明します。以下は、GitHubリポジトリにファイルをアップロードするための手順です。

1. GitHubアカウントにログイン

GitHubの公式サイトにアクセス: GitHubにアクセスします。
ログイン: 右上の「Sign in」をクリックし、ユーザー名とパスワードを入力してログインします。

2. リポジトリの選択

リポジトリに移動: GitHubのダッシュボードで、ファイルをアップロードしたいリポジトリをクリックします。
- 新規リポジトリを作成: リポジトリがまだない場合は、右上の「+」ボタンをクリックし、「New repository」を選択して新しいリポジトリを作成します。

3. ファイルをアップロードする

GitHubのWebインターフェースを使用する

「Code」タブを選択: リポジトリのメインページで「Code」タブを選択します。
「Add file」ボタンをクリック: 右上の「Add file」ボタンをクリックし、ドロップダウンメニューから「Upload files」を選択します。
ファイルを選択: 「Choose your files」ボタンをクリックして、アップロードしたいファイルを選択します。複数のファイルやフォルダーを一度に選択することもできます。
アップロード: ファイルが選択されたら、下部にある「Commit changes」セクションで、変更内容に関するコメントを入力します（例: "Add new files"）。その後、「Commit changes」ボタンをクリックしてファイルをアップロードします。

アップロードの確認

GitHubで確認: GitHubのリポジトリページに戻り、「Code」タブでアップロードしたファイルが正しく表示されているか確認します。

これで、GitHubへのファイルアップロードは完了です。

これで基本的なWebページの作成手順は完了です。とにかくここまでできればWeb制作の基礎は理解できます。この流れをまず最初に掴んでください。Progateでコードの練習するより、この一連の動作を掴むのが最初です。重要なのでもう一度言いますが、これが最初にすべきことです！コードを覚えるのはそのあとです。なぜなら作業がつまらないからです。何より、ChatGPTが出てきて以降、コードをガリガリ書くという行為は実際にはあまり多くないです。現役エンジニアでもそんな書きません。ライブラリから持ってくるか、ChatGPTを活用しています。なので、コードそのものを記憶することの価値が相対的に下がってるんですよ。まずは一連の動作を覚えて、楽しい！って思おうことの方が大事ですよという記事でした。

もし、さらに詳細な部分や特定の質問があれば、教えてくださいね。

この記事が参考になったら、ぜひフォローして、いいねをお願いします！

この記事が気に入ったらサポートをしてみませんか？