jigintern · koduno · Apr 17, 2026 · Apr 7, 2026 · Apr 7, 2026 · Apr 7, 2026
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -35,6 +35,8 @@ jobs:
             output_name: gsap-workshop-2026
           - slide: 2026/open-data
             output_name: open-data-2026
+          - slide: 2026/web-intro
+            output_name: web-intro-2026
     runs-on: ubuntu-latest
     steps:
       - name: Checkout

diff --git a/2026/web-intro/README.md b/2026/web-intro/README.md
@@ -0,0 +1,23 @@
+# 自己紹介ページを作ろう — Web開発入門
+
+> この資料は、2026年に行う学校訪問勉強会に向けて作成されたものです。
+> 所要時間目安: 180〜240分
+
+## 目的
+
+HTML、CSS、JavaScriptの3つの言語を使って、自己紹介ページを作ります。
+Webページがどのように作られているかを体験し、「自分で作れた！」という成功体験を持ち帰ることを目的とします。
+
+## 準備
+
+- ブラウザのみ（[StackBlitz](https://stackblitz.com/) を使用）
+- 開発環境のインストール不要
+
+## 困ったときは
+
+* 質問がある場合、章節項に割り振られた通し番号といっしょに質問してもらえると対応しやすいです。
+* 資料に誤字脱字や理論的な欠陥にお気づきなら、[リポジトリ](https://github.com/jigintern/study_session_materials)にIssueを作成してContributorに知らせてください。確認して対応します。
+
+## 本編
+
+資料本編はこちら [./slide.md](./slide.md)
diff --git a/2026/web-intro/examples/advanced/a-darkmode.html b/2026/web-intro/examples/advanced/a-darkmode.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>自己紹介ページ</title>
+  <style>
+    /* ===== 全体の設定 ===== */
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    /* ===== レイアウト ===== */
+    .container {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+
+    /* ===== ヘッダー ===== */
+    .header {
+      background-color: pink;
+      text-align: center;
+      padding: 40px 20px;
+      border-radius: 0 0 20px 20px;
+    }
+
+    .header h1 {
+      margin: 0;
+      color: white;
+    }
+
+    .header p {
+      margin: 8px 0 0;
+      color: white;
+    }
+
+    /* ===== カード（共通） ===== */
+    .card {
+      background-color: white;
+      border-radius: 16px;
+      padding: 24px;
+      margin-top: 20px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    }
+
+    /* ===== プロフィールセクション ===== */
+    .profile {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+
+    .profile-img {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      object-fit: cover;
+      border: 3px solid pink;
+    }
+
+    .profile-text p {
+      margin: 4px 0;
+      font-size: 15px;
+      line-height: 1.6;
+    }
+
+    /* ===== 好きなものリスト ===== */
+    .card h2 {
+      font-size: 20px;
+      margin: 0 0 12px;
+      color: hotpink;
+    }
+
+    .favorites-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+
+    .favorites-list li {
+      padding: 6px 0;
+      font-size: 15px;
+    }
+
+    .favorites-list li::before {
+      content: "♡ ";
+      color: hotpink;
+    }
+
+    /* ===== スキルバッジ ===== */
+    .badges {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    .badge {
+      background-color: mistyrose;
+      color: hotpink;
+      padding: 6px 14px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    /* ===== SNSリンク ===== */
+    .sns-links {
+      display: flex;
+      gap: 10px;
+      margin-top: 8px;
+    }
+
+    .sns-link {
+      display: inline-block;
+      padding: 10px 20px;
+      background-color: pink;
+      color: white;
+      text-decoration: none;
+      border-radius: 25px;
+      font-size: 14px;
+      font-weight: bold;
+    }
+
+    .sns-link:hover {
+      background-color: hotpink;
+    }
+
+    /* ===== ダークモード ===== */
+    body.dark {
+      background-color: #1a1a2e;
+      color: #e0e0e0;
+    }
+
+    body.dark .header {
+      background-color: #2d2d5e;
+    }
+
+    body.dark .card {
+      background-color: #16213e;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
+    }
+
+    body.dark .card h2 {
+      color: #ffa0c4;
+    }
+
+    body.dark .badge {
+      background-color: #2d2d5e;
+      color: #e0e0e0;
+    }
+
+    body.dark .sns-link {
+      background-color: #2d2d5e;
+      color: #e0e0e0;
+    }
+
+    body.dark .sns-link:hover {
+      background-color: #3d3d7e;
+    }
+
+    .dark-mode-btn {
+      display: block;
+      margin: 24px auto 40px;
+      padding: 10px 24px;
+      border: 2px solid #ccc;
+      border-radius: 25px;
+      background: none;
+      font-size: 14px;
+      cursor: pointer;
+      color: inherit;
+      transition: border-color 0.3s;
+    }
+
+    .dark-mode-btn:hover {
+      border-color: #ff7eb3;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- ヘッダー -->
+  <div class="header">
+    <h1>田中 はなこ</h1>
+    <p>Web開発をはじめたばかりの大学生です！</p>
+  </div>
+
+  <!-- メインコンテンツ -->
+  <div class="container">
+
+    <!-- プロフィール -->
+    <div class="card">
+      <div class="profile">
+        <img
+          src="https://api.dicebear.com/7.x/thumbs/svg?seed=Hanako&backgroundColor=ffdfbf"
+          alt="プロフィール写真"
+          class="profile-img"
+        >
+        <div class="profile-text">
+          <p>こんにちは！田中はなこです。</p>
+          <p>東京に住んでいて、カフェ巡りと猫が好きです。最近プログラミングを始めました！</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- 好きなもの -->
+    <div class="card">
+      <h2>好きなもの</h2>
+      <ul class="favorites-list">
+        <li>カフェ巡り</li>
+        <li>猫</li>
+        <li>ラーメン</li>
+        <li>音楽を聴くこと</li>
+        <li>写真を撮ること</li>
+      </ul>
+    </div>
+
+    <!-- スキル -->
+    <div class="card">
+      <h2>できること・学んでいること</h2>
+      <div class="badges">
+        <span class="badge">HTML</span>
+        <span class="badge">CSS</span>
+        <span class="badge">JavaScript</span>
+        <span class="badge">写真</span>
+        <span class="badge">デザイン</span>
+      </div>
+    </div>
+
+    <!-- SNSリンク -->
+    <div class="card">
+      <h2>SNS</h2>
+      <div class="sns-links">
+        <a href="#" class="sns-link">X</a>
+        <a href="#" class="sns-link">Instagram</a>
+        <a href="#" class="sns-link">GitHub</a>
+      </div>
+    </div>
+
+    <button class="dark-mode-btn" id="darkModeBtn">🌙 ダークモード</button>
+
+  </div>
+
+  <script>
+    const darkModeBtn = document.querySelector("#darkModeBtn");
+
+    darkModeBtn.addEventListener("click", function () {
+      document.body.classList.toggle("dark");
+
+      if (document.body.classList.contains("dark")) {
+        darkModeBtn.textContent = "☀️ ライトモード";
+      } else {
+        darkModeBtn.textContent = "🌙 ダークモード";
+      }
+    });
+  </script>
+
+</body>
+</html>