ポートフォリオ Web サイト作成ワークショップ

Last Updated: 2025-04-21

この Codelab では、プログラミングや Web 制作の経験がない方を対象に、2 時間という短い時間で簡単な自分のポートフォリオサイトを作成し、インターネット上に公開する手順を体験します。

学習内容:

簡単な Web ページの構造 (HTML)
Web ページの見た目を整える方法 (CSS)
開発ツール (VSCode) の基本的な使い方
GitHub を使った Web サイトの公開 (GitHub Pages)

必要なもの:

インターネットに接続された PC (Windows または Mac)
メールアドレス (GitHub アカウント作成用)

注意: この Codelab は時間短縮のため、駆け足での進行となります。まずは Web サイトの公開を体験し、動くものを作る達成感を味わいましょう！ 時間に余裕のある方は、更なるカスタマイズに挑戦してみてください。最低限 Step 3 までの完了を目指しますが、Step 4 以降にも積極的にチャレンジしてみましょう。

はじめに、Web サイトを作成するための道具を準備します。

VSCode のインストール

Web サイトの設計図 (コード) を書くためのエディタ「Visual Studio Code (VSCode)」をインストールします。

お使いの Web ブラウザ (Chrome, Edge, Safari など) を開きます。
VSCode 公式サイトにアクセスします。
Download VSCode
お使いの OS (Windows, Mac) に合ったインストーラーをダウンロードします。
ダウンロードしたファイルを開き、画面の指示に従ってインストールを完了します。

作業フォルダの作成

Web サイトの作成を始める前に、成果物を保存するフォルダを作っておきましょう。

パソコン上の好きな場所に新規フォルダを作成してください。
VSCode を開きます。
左上の「ファイル」→「フォルダを開く...」から、今作成したフォルダを開いてください。

GitHub アカウントの作成

作成した Web サイトのバージョンを管理したり、インターネット上に公開したりするために、GitHub というサービスを使います。そのためのアカウントを作成しましょう。

Web ブラウザで GitHub 公式サイトにアクセスします。
画面右上の「Sign up」ボタンをクリックします。
画面の指示に従って、ユーザー名、メールアドレス、パスワードを設定します。

ユーザー名: 半角英数字とハイフンのみ使用可能です。これがあなたの Web サイトの URL の一部になります。
メールアドレス: @ マークの入った、受信可能なメールアドレスを入力してください。確認メールが届きます。

簡単なパズル認証やプラン選択（Free プランを選択）などを行います。
登録したメールアドレスに GitHub から確認メールが届きます。メールを開き、「Verify email address」ボタンをクリックして認証を完了します。

いよいよ Web サイトの中身を作っていきます。Web ページの構造を定義するには、HTML (HyperText Markup Language) を使います。HTML は「タグ」と呼ばれる要素を使って、テキストや画像などのコンテンツを構造化します。

3 つの主要なタグ - `<html>`, `<head>`, `<body>`

HTML には <html>, <head>, <body> という 3 つの主要なタグがあります。

<html> タグは、HTML 文書全体を囲むタグです。
<head> タグは、Web ページのタイトルや、CSS ファイルのリンクなどの情報を記述するタグです。
<body> タグは、実際にブラウザに表示される内容を記述するタグです。

まずはこれらのタグを使って、Web ページの基本的な構造を作ってみましょう。

`index.html` ファイルを作成

VSCode の左側にあるエクスプローラーパネルで、フォルダ名の横に表示される「新しいファイル」アイコンをクリックします。
ファイル名を index.html と入力して Enter キーを押します。
中央のエディタ画面に index.html が開かれるので、以下のコードを正確に入力（またはコピー＆ペースト）します。
Ctrl+S (Windows) または Cmd+S (Mac) でファイルを保存しましょう。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>わたしのポートフォリオ</title>
</head>
<body>
    
</body>
</html>

実際に表示してみよう！

今作成した Web ページがどのように見えるか、ブラウザで確認してみましょう。VSCode の拡張機能を使うと、編集した HTML ファイルをリアルタイムで表示できます。

VSCode の左側にある四角が積み重なったような「拡張機能」アイコンをクリックします。
検索ボックスに Live Server と入力します。
検索結果に表示された Live Server (Ritwick Dey 作) を選択し、「インストール (Install)」ボタンをクリックします。
インストールが完了したら、index.html のエディタ画面に戻ります。
画面右下のステータスバーにある Go Live ボタンをクリックします。
自動的に Web ブラウザが起動します。

真っ白な画面が表示されたら OK です。次の Step から内容を追加していきます！

Web ページに見出しをつけるには、<h1> タグを使います。<h1> タグは、Web ページの中で最も重要な見出しを表します。

index.html ファイルの <body> の中に、以下のコードを追加してください。

<h1>ここをあなたの名前に変更</h1>

ファイルを保存しましょう。
先ほど起動したブラウザの画面に文字が表示されましたか？
<h1> タグの中身をあなたの名前に書き換えてみましょう！

最終的なコード (例)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>わたしのポートフォリオ</title>
</head>
<body>
  <h1>いたこす</h1>
</body>
</html>

Web ページに段落を追加するには、<p> タグを使います。<p> タグは、Web ページの中で文章の段落を表します。

index.html ファイルの <body> の中で、先程の <h1> タグの下に以下のコードを追加してください。

<p>ここをあなたの自己紹介文に変更。Web開発に興味があります！</p>

ファイルを保存しましょう。ブラウザの画面に文章が表示されましたか？
<p> タグの中身をあなたの自己紹介文に書き換えてみましょう！

最終的なコード (例)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>わたしのポートフォリオ</title>
</head>
<body>
  <h1>いたこす</h1>
  <p>単純にプログラミングが好きなだけ。</p>
</body>
</html>

だんだん HTML の書き方には慣れてきましたか？

次は、Web ページ上で表を表示する <table>, <thead>, <tbody>, <tr>, <th>, <td> について紹介します。

表に関連するタグたち

<table> タグは、表全体を囲むタグです。表を作成する際は、まずこの <table> タグを記述します。
<thead> タグは、表の見出し部分を表します。
<tbody> タグは、表のデータ部分を表します。
<tr> タグは、表の行を表すタグです。
<th> タグは、表の見出しのセルを表すタグです。通常、表の最初の行に記述し、各列のタイトルを示します。
<td> タグは、表のデータセルを表すタグです。各行のデータが入る部分です。

文章だけ読んでもわかりにくいと思うので、実際の HTML を見てみましょう。

簡単な表の例

index.html ファイルの <body> の中で、先程の <p> タグの下に以下のコードを追加してください。

<table>
  <thead>
    <tr>
      <th>とくせい</th>
      <th>value</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>すきなもの</td>
      <td>Google</td>
    </tr>
    <tr>
      <td>サークル</td>
      <td>GDG on Campus University of Osaka</td>
    </tr>
  </tbody>
</table>

このコードを保存して、ブラウザで表示を確認してください。簡単な表が表示されるはずです。
ファイルを保存しましょう。ブラウザの画面に表が表示されましたか？
<th> や <td> の中身を変えたり、<tr> で行を増やしたりして、自分のプロフィールを書いてみましょう！

最終的なコード (例)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>わたしのポートフォリオ</title>
</head>
<body>
  <h1>いたこす</h1>
  <p>単純にプログラミングが好きなだけ。</p>
  <table>
    <thead>
      <tr>
        <th>とくせい</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>すきなもの</td>
        <td>Google</td>
      </tr>
      <tr>
        <td>サークル</td>
        <td>GDG on Campus University of Osaka</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

ここでは、Web ページにリンクを追加する方法を紹介します。リンクは、Web ページ同士をつなぐ大切な要素で、例えば皆さんのお使いの SNS へのリンクを貼ることができます。

HTML でリンクを作成するには <a> タグを使います。リンクの基本的な書き方は、以下の通りです。

<a href="リンク先のURL">リンクのテキスト</a>

では、これを元にみなさんの SNS などへのリンクを貼ってみましょう！

Step 2-4 で作成した表の <tr> を、以下の例のように書き換えてください。

<tr>
  <td>すきなもの</td>
  <td>
    <a href="https://www.google.com/">
      Google
    </a>
  </td>
</tr>

ファイルを保存しましょう。ブラウザの画面にリンクが表示されましたか？
リンク先の URL やリンクテキストを変えて、自分の SNS などへのリンクを貼ってみましょう！

まだまだ HTML には面白い機能がありますが、本日のワークショップでは一旦ここまででとしておきます。

では、これまでに作成したレイアウトにもっとオリジナリティを出すにはどうすればいいでしょうか？
次の Step からは、CSS を用いて Web ページの見た目を調整してみます。

最終的なコード (例)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>わたしのポートフォリオ</title>
</head>
<body>
  <h1>いたこす</h1>
  <p>単純にプログラミングが好きなだけ。</p>
  <table>
    <thead>
      <tr>
        <th>とくせい</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>すきなもの</td>
        <td>
          <a href="https://www.google.com/">
            Google
          </a>
        </td>
      </tr>
      <tr>
        <td>サークル</td>
        <td>
          <a href="https://gdsc-osaka.jp/">
            GDG on Campus University of Osaka
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

CSS (Cascading Style Sheets) は、Web ページの見た目 (スタイル) を定義するための言語です。CSS を使うことで、文字の色や大きさ、背景色、要素の配置など、Web ページの様々な要素を装飾することができます。

CSS の 3 つの構成要素

CSS は、セレクタ (selector)、プロパティ (property)、値 (value) の 3 つの要素で構成されています。

セレクタ {
  プロパティ: 値;
}

セレクタ: スタイルをどこに適用するかを指定します。 (例: body, h1, p)
プロパティ: 変更したいスタイルの種類を指定します。 (例: background-color, color, font-size)
値: プロパティに設定する値を指定します。 (例: red, 20px, bold)

CSS ファイルを作成

CSS のコードを見たほうが分かりやすいと思うので、実際に書いてみましょう。まずは CSS ファイルを作成します。

VSCode のエクスプローラーパネルで、index.html と同じ場所に新しいファイルを作成します。
ファイル名を style.css と入力して Enter キーを押します

CSS ファイルを HTML に読込

先ほど style.css を作成しましたが、ただファイルを作成するだけでは反映されません。HTML で CSS ファイルの存在を教えてあげる必要があるので、以下のようなコードを index.html の <head> の中に書き加えてください。

<link rel="stylesheet" href="style.css">

最終的なコード (例)

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>わたしのポートフォリオ</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>いたこす</h1>
  <p>単純にプログラミングが好きなだけ。</p>
  <table>
    <thead>
      <tr>
        <th>とくせい</th>
        <th>value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>すきなもの</td>
        <td>
          <a href="https://www.google.com/">
            Google
          </a>
        </td>
      </tr>
      <tr>
        <td>サークル</td>
        <td>
          <a href="https://gdsc-osaka.jp/">
            GDG on Campus University of Osaka
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>
</html>

style.css: 空のファイル

Web ページ全体のデザインを設定してみましょう。以下の例では <body> の背景色を薄い水色にしています。

style.css ファイルに、以下のコードを追加してください。

body {
  background-color: #d0f0ff; /* 背景色を薄い水色に */
}

ファイルを保存しましょう。ブラウザの画面上に反映されましたか？
background-color の値を好きな色に変更してみましょう！色の名前やコードはこちらのサイトなどが参考になります: HTML Color Codes

最終的なコード (例)

index.html: 変更なし
style.css

body {
  background-color: #d0f0ff; /* 背景色を薄い水色に */
}

見出し (<h1> など) や段落 (<p> など) の文字色を変えてみましょう。

style.css ファイルに、以下のコードを追加してください。

h1 {
  color: #229954; /* 見出しの文字色を緑色に */
}

p {
  color: #2e86c1; /* 段落の文字色を青色に */
}

ファイルを保存しましょう。文字の色が変わりましたか？
color の値を好きな色に変更してみましょう！

最終的なコード (例)

index.html: 変更なし
style.css

body {
  background-color: #d0f0ff; /* 背景色を薄い水色に */
}

h1 {
  color: #229954; /* 見出しの文字色を緑色に */
}

p {
  color: #2e86c1; /* 段落の文字色を青色に */
}

皆さんの中には、これまでにプレゼン資料やレポートを作ったことがある人も多いと思いますが、その際にフォント (文字の形) を変更した経験のある方もいるのではないでしょうか。Web 上でも自分の好きなフォントを選んで表示することができます。

style.css ファイルに、以下のコードを追加してください。

body {
  font-family: serif; /* セリフ体 (≒ 明朝体) */
}

ファイルを保存しましょう。文字の形が変わりましたか？
font-family の値を好きなフォントに変更してみましょう！フォントの値はこちらのドキュメントが参考になります。

ここまでで HTML と CSS の話は一旦終了としますが、Web サイトの仕組みについてなんとなく理解ができたでしょうか？

次の Step からは、これまでに作成した Web サイトを公開する方法について説明します。

最終的なコード (例)

index.html: 変更なし
style.css

body {
  background-color: #d0f0ff; /* 背景色を薄い水色に */
}

h1 {
  color: #229954; /* 見出しの文字色を緑色に */
}

p {
  color: #2e86c1; /* 段落の文字色を青色に */
}

body {
  font-family: serif; /* セリフ体 (≒ 明朝体) */
}

ここまで皆さん、お疲れ様でした！いよいよ作成した Web サイトをこれから公開してみたいと思います。

公開する方法はたくさんあるのですが、今回はその中でも無料で簡単にできる GitHub Pages を使いたいと思います。

GitHub って何？

GitHub は、ソフトウェア開発に欠かせない「バージョン管理」と「共同作業」ができるプラットフォームです。コードの変更履歴を管理し、複数人での共同作業を円滑に進めることができます。

新しいリポジトリの作成

GitHub では、それぞれのプロジェクトを「リポジトリ」という単位でまとめています。それでは、今回作成した Web サイトを管理する新しい「リポジトリ」を作成してみましょう。

Web ブラウザで GitHub にアクセスし、ログインします。
画面右上の「+」アイコンをクリックし、「New repository」を選択します。
以下の項目を設定します。

Repository name: [your-GitHub-username].github.io と正確に入力します。
例: ユーザー名が taro-yamada なら taro-yamada.github.io
Description: (任意) 簡単な説明を入力します (例: My portfolio site)。
Public を選択します (Private だと GitHub Pages が使えません)。
Initialize this repository with: の下のチェックボックスはすべてチェックを外した状態にします (README などは不要)。
その他の部分もデフォルト (None や No) のままで大丈夫です。

「Create repository」ボタンをクリックします。

ファイルのアップロード

リポジトリが作成されると、「Quick setup」などの画面が表示されます。ここにファイルをアップロードします。

画面に表示されている「uploading an existing file」というリンクをクリックします。
ファイル選択画面が表示されるので、先ほど VSCode で作成した index.html と style.css の 2 つのファイルを、画面の点線枠の中にドラッグ＆ドロップします。(間違えてフォルダごとアップロードしないように気をつけましょう)
ファイルがアップロードされると、画面下に「Commit changes」というセクションが表示されます。特に変更せず、緑色の「Commit changes」ボタンをクリックします。

GitHub Pages の設定

ファイルを置いただけではまだ公開されません。GitHub Pages の機能を有効にします。

アップロードが完了したら、リポジトリのページ上部にある「Settings」タブをクリックします。
左側のメニューから「Pages」を選択します。
「Build and deployment」セクションで、「Source」が「Deploy from a branch」になっていることを確認します。
「Branch」の項目で、「Branch: main」（または master）、「Folder: / (root)」が選択されていることを確認し、「Save」ボタンをクリックします。

公開の確認

設定が完了すると、「Your site is live at ...」のようなメッセージが表示されます（表示されるまで少し時間がかかる場合があります）。

表示された URL (https://[your-GitHub-username].github.io) をクリックして、作成した Web サイトがインターネット上で見られるか確認しましょう！

おめでとうございます！これであなたのポートフォリオサイトが完成し、世界中に公開されました！

皆さん、大変お疲れ様でした！このワークショップでは、たった 1 時間半で以下のことを達成しました。

VSCode を使って HTML と CSS ファイルを作成・編集した。
簡単な Web ページの構造と見た目を作った。
GitHub アカウントを作成し、リポジトリを作成した。
GitHub Pages を使って、作成した Web サイトをインターネットに公開した。

今回の手法について

今回は時間短縮のため、ページに画像を表示したり、動きのあるコンテンツを作成したりすることはしていません。こちらも非常に楽しい内容なので、今後ぜひ体験してみてください。

また、今回は GitHub に直接ファイルをアップロードしました。これは手軽ですが、実際の Web 開発では Git というバージョン管理システムを使って、変更履歴を記録しながら GitHub と連携するのが一般的です。こちらも慣れると非常に強力なツールとなります。

Next Steps (初心者向け)

コンテンツを充実させる: index.html にもっと詳しい自己紹介や、作品紹介（もしあれば）を追加してみましょう。画像 (<img> タグ) を追加するのも良いですね。
CSS でデザインを凝る: style.css で、もっと色々なプロパティ (例: border, font-size, margin, padding) を試して、デザインを改善してみましょう。 MDN Web Docs - CSS が参考になります。
Git を学ぶ: Web 開発の基本スキルである Git の使い方を学んでみましょう。今日作ったサイトを Git で管理できるようにするのも良い練習になります。

Next Steps (中級者向け)

もし Web 開発の経験が少しあるなら、以下の課題に挑戦してみるのも面白いでしょう。(詳細は別途資料を参照)

Flexbox や Grid を使ったレイアウト作成
メディアクエリを使ったレスポンシブデザイン対応
JavaScript を使った簡単なインタラクションの実装 (例: ボタンクリック)
今日試した「直接アップロード」ではなく、Git コマンド (git add, git commit, git push) を使って GitHub にファイルを送信し、GitHub Pages を更新してみる。

Next Steps (さらなる上へ)

もし Web 開発の経験が少しあるなら、以下の課題に挑戦してみるのも面白いでしょう。

React: UI 構築のための JavaScript ライブラリ。コンポーネントベースで効率的な開発が可能。
Next.js: React ベースのフルスタックフレームワーク。サーバーサイドレンダリングで SEO 対策も万全。
Vue.js: シンプルで学習しやすい JavaScript フレームワーク。

これらのフレームワークを使うことで、より高度なポートフォリオサイトを構築できます。例えば、以下のような機能を追加できます。

コンポーネントの再利用による効率的な開発
動的なコンテンツの表示
API との連携
高度な UI/UX の実現

ぜひ、これらのフレームワークを学んで、あなたのポートフォリオサイトをさらに進化させてください！

最後に

今日の体験が、皆さんの Web 開発への興味の入口となれば幸いです。ぜひ、今日作ったサイトをベースに、どんどん自分だけのポートフォリオサイトを作り込んでいってください！

VSCode のインストール

作業フォルダの作成

GitHub アカウントの作成

3 つの主要なタグ - <html>, <head>, <body>

index.html ファイルを作成

実際に表示してみよう！

最終的なコード (例)

最終的なコード (例)

表に関連するタグたち

簡単な表の例

最終的なコード (例)

最終的なコード (例)

CSS の 3 つの構成要素

CSS ファイルを作成

CSS ファイルを HTML に読込

最終的なコード (例)

最終的なコード (例)

最終的なコード (例)

最終的なコード (例)

GitHub って何？

新しいリポジトリの作成

ファイルのアップロード

GitHub Pages の設定

公開の確認

今回の手法について

Next Steps (初心者向け)

Next Steps (中級者向け)

Next Steps (さらなる上へ)

最後に

3 つの主要なタグ - `<html>`, `<head>`, `<body>`

`index.html` ファイルを作成