教員の方へ ─ 授業で使える無料教材ガイド

このページでは、中学校「技術」・高校「情報Ⅰ」の授業でこのサイトを活用する方法をご紹介します。

📋 1. サイト概要

start-web-programming は、中学生・高校生を対象とした無料のプログラミング学習サイトです。

項目	内容
対象	中学生・高校生（プログラミング完全初心者）
費用	完全無料（課金・有料プランなし）
会員登録	不要（個人情報の入力なし）
広告	Google AdSense による広告あり
コンテンツ	HTML/CSS/JS 全20レッスン、問題ドリル90問、実践チャレンジ10課題、ブログ記事113本
必要環境	パソコン + ブラウザ（Chrome推奨）

生徒がアカウント登録なしで利用できるため、個人情報の取り扱いに関する懸念がありません。学習進捗はブラウザのlocalStorageに保存されるため、同じ端末・同じブラウザであれば進捗が引き継がれます。

このサイトのコンテンツは、以下の学習指導要領の単元に対応しています。

情報Ⅰの単元	対応するコンテンツ
(2) コミュニケーションと情報デザイン	HTMLコース全6レッスン（Webページの構造設計） CSSコース全6レッスン（情報の視覚的表現）
(3) コンピュータとプログラミング	JSコース全7レッスン（変数・条件分岐・繰り返し・関数）問題ドリル JS 30問実践チャレンジ ★★★ 4課題
(4) 情報通信ネットワークとデータの活用	ブログ記事：DNS・HTTPS・Cookie・Webパフォーマンスなど

技術科の内容	対応するコンテンツ
D(1) 生活や社会を支える情報の技術	ブログ記事：プログラミングのメリット・将来の仕事など
D(2) ネットワークを利用した双方向性のあるコンテンツのプログラミング	HTMLコース + CSSコース + JSコース（Webページの制作）実践チャレンジ全10課題
D(3) 計測・制御のプログラミング	JSコースレッスン3〜5（条件分岐・繰り返し・関数の基礎）

1コマ50分×6回で、HTMLの基礎からWebページ制作までを体験できるモデルプランです。

回	テーマ	使うコンテンツ	活動内容
1	環境構築とHTMLの基本	HTML レッスン0〜1	VS Codeのインストール、最初のHTMLファイル作成
2	文字・リンク・画像	HTML レッスン2〜3	見出し・段落・リンク・画像を使った自己紹介ページ作成
3	リスト・表・フォーム	HTML レッスン4〜5	リスト・表・フォームを使ったアンケートページ作成
4	CSSでデザイン	CSS レッスン1〜3	文字色・背景色・枠線を使ったページのデザイン
5	レイアウトとレスポンシブ	CSS レッスン4〜6	Flexboxでカード型レイアウト、メディアクエリでスマホ対応
6	作品制作・発表	実践チャレンジ ★☆☆〜★★☆	自由テーマでWebページを制作し、クラスで発表

💡 授業時間が限られている場合：レッスンの「説明」部分は事前課題（反転授業）として自宅で読ませ、授業では「やってみよう」の実践部分に集中する方法が効果的です。

上記6回に加えて、JavaScriptの基礎を4コマで扱うことも可能です。

このサイトでは、レッスンの完了状況がブラウザのlocalStorageに自動保存されます。

学習の進捗ページ（/my-progress/）にアクセスすると、レッスン・ドリル・チャレンジの完了状況を一覧で確認できます。生徒にこのページのスクリーンショットを提出させることで、進捗を把握できます。

生徒のパソコンで以下の手順を実行すると、進捗データを確認できます。

💡 注意：localStorageはブラウザごとに保存されるため、生徒が別の端末やブラウザを使うと進捗がリセットされます。授業では同じ端末を使い続けることを推奨します。

授業での活用に関するご質問・ご要望は、以下のメールアドレスまでお気軽にご連絡ください。

以下のようなご相談を歓迎します。