HTML/CSS練習サイトの選び方｜こどもITラボ

選び方の3つの軸

練習サイトを選ぶときは、「①日本語対応」「②書きながら学べるか（手を動かす型か、動画視聴型か）」「③ゴールが明確か」の3つで判断するのが分かりやすいです。子どもには、ブラウザだけで完結し、コードを書きながら結果を即見られる「インタラクティブ型」のサイトが特に向いています。

最初の教材で大切なのは、難しすぎないことです。HTML/CSSは見た目がすぐ変わるので楽しい反面、細かい指定が多く、最初からプロ向けの資料を読むと疲れます。まずは「書く→画面が変わる→少し直す」の流れを何度も体験できるサイトを選びましょう。

図1：日本語＋初学者向けは①Progateと②ドットインストール。無料で本格派は④freeCodeCamp

完全初心者：Progate（日本語・基礎全般）→ ドットインストール（応用パターン）→ MDN（疑問が出たら調べる）。この3つで基礎は十分固まります。

中級者：freeCodeCampの「Responsive Web Design」コースが定番。プロジェクト形式で5本のサイトを作るので、実力が大きく伸びます。英語ですが、図とサンプルコードが豊富で今からでも進められます。

レファレンス用途：MDN Web Docs（Mozilla公式）が最も信頼できます。すべてのHTML要素・CSSプロパティの仕様が網羅されており、現場のエンジニアも毎日使う辞書サイトです。

学習ルートで迷ったら、1つのサイトを最後まで進めてから次へ移るのが基本です。途中で別サイトに乗り換え続けると、同じ入門部分ばかりを繰り返してしまいます。1周したあとに、自己紹介ページや部活紹介ページを自分で作ると、知識が定着します。

図2：学習サイト選びの8つの判断軸

練習サイトでハマりがちな3つ

HTML/CSSの学習はWeb開発の入り口で、これができないとフロントエンドエンジニアの仕事は始まりません。逆に「練習サイトを通じて自走できる人」は、Web系・モバイル系・デザイン系・AI系どの分野に進んでも応用が効きます。学習サイトを使い倒した経験そのものが、独学スキルとして将来役立ちます。

さらに、HTML/CSSは成果が見えやすいので、ポートフォリオ作りにもつながります。練習サイトで学んだボタン、カード、見出し、余白の作り方を、自分のサイトに移してみる。そうすると、教材の知識が「自分の作品」に変わります。

3ステップで始めよう

HTML/CSSの練習サイトは「日本語・手を動かす・無料」を軸に選ぶと失敗しにくいです。Progate→ドットインストール→MDNの3点セットで基礎は十分固まります。大事なのは「サイトを巡回する」のではなく「1つを最後まで終わらせる」こと。3つ並行するより1つ完走の方が、実力につながります。

確認練習サイトを選ぶ軸は？