フロントエンド開発を学び始めた人のほぼ全員が、この壁にぶつかります。
チュートリアル動画を見すぎて、頭がぼーっとしてくる。divが何かは知っている。他人のスタイルシートをなんとなく眺めて、何が起きているかも理解できる。Flexboxの解説動画を3本？もちろん視聴済み。しかし、いざ真っ白な index.html を開き、カーソルが点滅しているのを前にすると、頭の中が真っ白になってしまう。
もう1本チュートリアルを見るのが解決策ではありません。必要なのは、実際にプロジェクトを作ることです。
週末だけで完成させられて、友達に見せられるような目に見える成果物。HTML や CSS は、自分でコードを書き、壊し、そして壊れた部分を自分で修正するプロセスを経て初めて身につくものです。
Coddy プラットフォームの中でも、HTMLとCSSの学習コースは特に人気があります。そして、フロントエンドのコードに自信を持てるようになるまで続けられた人々には、共通点があります。それは、「小さなプロジェクトを定期的に完成させている」ということです。彼らは「十分に知識が身につく」のを待ちません。作り、壁にぶつかり、調べ、そして前に進むのです。
このガイドでは、1ページのシンプルなサイトからCSSだけで作るカルーセルまで、難易度順に並べた18のHTML・CSSプロジェクトを紹介します。すべてを作る必要はありません。この週末にどれか1つを選んで、完成させてみましょう。
なぜチュートリアルよりも「プロジェクト作成」が効果的なのか
コードを読むことは、生産的な活動のように思えます。しかし、実際はそうではありません。
YouTubeの動画を1ヶ月間見続けても、基本的なランディングページすら作れないことがあります。なぜなら、「見る」ことと「書く」ことでは、使う脳の筋肉が違うからです。特にCSSは、実際に手を動かして書かなければ身につきません。微調整を繰り返す泥臭い作業が多く、試行錯誤を通してしか学べないからです。
また、プロジェクトを作ると、必然的に「調べる」必要が出てきます。フロントエンドの仕事は、コードを書くのが3割、MDNで検索したり、ドキュメントを読んだり、要素がなぜか2ピクセルずれている原因を突き止めたりするのが7割です。チュートリアル動画は、この「調べる」プロセスをすべて隠してしまっています。
さらに、プロジェクトを作ることで、目に見える成果物が手に入ります。「HTMLとCSSを勉強中」と言うだけでは、なかなか達成感を得られません。しかし、「このレストランのウェブサイトを作ったんだ。リンクはこれだよ」と言って友達に送ることができれば、話は別です。この「自分で作った！」という感動こそが、挫折しそうな時期を乗り越える原動力になります。
Coddyの隙間時間で学べるHTML・CSSレッスンは、環境構築なしでブラウザ上でそのまま実行できます。1回5分のセッションで、構文を暗記できるまで基本を繰り返し練習しましょう。
開発環境の準備（すでに準備できている場合はスキップ）
HTMLとCSSの開発に、大がかりな準備は不要です。必要なのは次の3つだけです。
- テキストエディタ： ほとんどの人にとって、VS Code が定番の選択肢です。無料で使えますし、いくつかプロジェクトを進めていくうちに、便利なCSS拡張機能も導入したくなるはずです。
- ブラウザ： 普段使っているもので構いません。デベロッパーツール（右クリックして「検証」）を使えば、レイアウトの崩れをデバッグできます。このツールを使う習慣は、早いうちから身につけておきましょう。
- プロジェクトごとのフォルダ： 最初は
index.htmlとstyle.cssだけで十分です！ 最初のプロジェクトから、ビルドツールやフレームワーク、「ベストプラクティス」などを気にする必要はありません。
もし環境構築の手間を省きたいなら、Coddyの HTMLレッスン や CSSレッスン を使えば、インストール不要でブラウザ上ですぐに学習を始められます。プロジェクトを立ち上げるほどではないけれど、特定のコンセプトを練習したいときに便利です。それ以外の場合は、フォルダとテキストエディタがあれば十分です。
初級：HTML＆CSSプロジェクト
以下の5つのプロジェクトでは、見出し、段落、画像、リスト、リンク、そして少しの色と余白といった基本要素を使います。HTMLとCSSのレッスンをいくつか終えた後なら、どれも数時間で完成させることができます。
1. トリビュートページ（人物紹介ページ）
自分が尊敬する人物（ミュージシャン、作家、アスリート、科学者など）を1人選び、その人を紹介する1ページのサイトを作ります。大きな見出し、メイン画像（ヒーロー画像）、簡単なプロフィール、その人の年表、そして詳細を知るためのリンク集を配置します。見出し、段落、画像、リスト、そしてタイポグラフィと余白を調整する基本的なCSSだけで作成できます。これが最初のHTMLプロジェクトの定番とされているのには理由があります。難しい要素は一切ありません。
2. 自己紹介ページ（About Me）
自分自身を紹介する1ページの個人サイトです。写真、簡単な自己紹介、興味のあることのリスト、連絡先セクションを掲載します。もし実際にウェブ上に公開（デプロイ）できれば、さらに素晴らしいです。GitHub Pages を使えば、無料で数分で公開できます。これで、人に共有できる本物のリンクが手に入ります。
3. レシピカード
料理のメイン画像、材料リスト、番号付きの調理手順、そして小さな詳細ボックスに表示された調理時間を含むレシピページです。順序付きリスト（ol）と順序なしリスト（ul）の使い分け、画像サイズ調整、そして情報の多いページをごちゃごちゃさせずに整理して見せる方法を学べます。
4. お問い合わせフォーム
名前、メールアドレス、メッセージ、送信ボタンを備えたフォームページです。フォームの送信機能（バックエンドやJavaScriptの処理）はまだ実装しなくて構いません。ここでの目的は、HTMLのフォーム要素（input、textarea、label、button）を使い、ブラウザのデフォルトの野暮ったいデザインから、おしゃれなスタイルに整えることです。フォームはほぼすべてのフロントエンドプロジェクトで登場するため、今のうちに慣れておくと後々大きなアドバンテージになります。
5. シンプルなレストランのメニュー
架空のレストランの1ページ構成のメニュー表です。前菜、メイン、デザートなどのカテゴリに分け、それぞれの料理名と簡単な説明を記載します。上部には魅力的なヒーローバナーを、下部には営業時間などを記載した小さなフッターを配置します。コンテンツをセクションごとにグループ化する方法、繰り返しのレイアウト、そして統一感のある配色を選ぶ練習になります。
中級：レイアウトと配置（Flexbox、Grid）
ここからは、要素を適切に配置し、複数のセクションを組み合わせ、実際のウェブサイトで見かけるような本格的なページを作っていきます。これらのプロジェクトの多くは Flexbox や CSS Grid を多用するため、レイアウト構築のスキルを鍛えるのに最適です。
6. 架空の製品のランディングページ
何か製品（アプリ、SaaSツール、キャンドルブランドなど何でも可）を1つ選び、そのホームページとなるようなランディングページを作成します。キャッチコピーとアクション呼び出し（CTA）ボタンを配置したヒーローセクション、その下には3つの特徴を紹介するセクション、顧客の声（レビュー）、そしてリンク付きのフッターを配置します。全体を通して Flexbox と Grid の良いトレーニングになり、余白の取り方や視覚的な階層（情報の優先順位）の設計も学べます。
7. ポートフォリオサイト
自分の作品を紹介する複数セクションからなるページです。現時点での「作品」が、先ほど作った2つのトリビュートページとレシピカードだけでも問題ありません。ナビゲーション付きのヘッダー、ヒーローセクション、プロジェクト一覧のグリッド、自己紹介セクション、お問い合わせセクションを作成します。プロジェクト一覧のレイアウトには Grid を使い、ナビゲーションやヒーローセクションには Flexbox を使いましょう。
まだポートフォリオは必要ないと思っている方にとっても、これは非常に有用なプロジェクトです。就職活動を始めたり、フリーランスとして案件を探したりするようになった瞬間、すぐに提示できるポートフォリオが手元にある状態を作れます。
8. 料金プラン表
3つの料金プランを横並びに配置し、それぞれのカードにプラン名、機能リスト、CTAボタンを掲載します。中央のプランには「一番人気」などのハイライトを追加してみましょう。料金プラン表は一見シンプルに見えますが、実は細かい調整が必要です。カードの高さを揃える、箇条書きリストの配置を整える、ボタンのホバーエフェクトを設定するなど、Flexboxの素晴らしい練習になります。
9. ブログのホームページ
ブログのトップページです。ナビゲーションと検索バー付きのヘッダー、上部にはおすすめ記事、その下には最新記事のグリッド、サイドバーにはカテゴリ一覧と最新のコメント、そして最下部にフッターを配置します。このプロジェクトでは、複数の領域を持つ複雑なコンテンツレイアウトの扱い方を学べます。これは、実際の現場でのフロントエンド開発に非常に近い形です。
Coddyの実践重視のCSSレッスンでは、AIアシスタントのBugsyがサポート。要素が中央に配置されない理由などをその場で解説してくれるため、Stack Overflowのタブを何個も開いて一人で悩む必要はありません。
10. ログイン＆新規登録ページ
ログイン用と新規登録用の2つの関連ページを作成します。中央に配置されたフォーム、ブランドロゴ入りのヘッダー、そして2つのページを行き来するためのリンクを設置します。ここでの課題は、過剰な装飾を避けつつ、洗練されたデザインに仕上げることです。優れたログインページは、整列が美しく、ユーザーの期待を少し上回る心地よさを持っています。デザインセンスを磨くのに最適な、隠れた名作プロジェクトです。
11. ダッシュボードのモックアップ
静的なダッシュボードのレイアウトです。左側にサイドバーナビゲーション、上部にユーザー情報を表示するトップバー、メインコンテンツエリアにはいくつかの統計カード、グラフのプレースホルダー、そして最近のアクティビティリストを配置します。インタラクティブな機能（JavaScript）は不要です。これは純粋なレイアウトプロジェクトです。Gridが大部分の処理を担います。これを終える頃には、なぜCSS Gridが存在するのか、そしてなぜGridを使ったことがない人がレイアウト構築に苦戦し続けているのかが理解できるはずです。
応用：CSSアニメーション＆エフェクト
ここからは楽しいパートです。規模は小さめですが、CSSを駆使します。トランジション、キーフレーム、トランスフォーム、そして :hover や :focus などの疑似クラスを習得するのに最適です。
12. ローディングスピナー
CSSだけで作るローディングスピナーです。回転するリング、バウンドする3つのドット、脈打つ円、繰り返し満たされるプログレスバーなど、いくつかのバリエーションに挑戦してみましょう。それぞれ15行ほどのCSSで作成でき、@keyframes、animation、transform の使い方を学べます。
13. ホバーエフェクト付き画像ギャラリー
写真のグリッドレイアウトで、各画像にホバーすると、スムーズなトランジションでキャプションが表示されるようにします。スライドするオーバーレイ、画像のズーム、フェードアウトするカラーフィルターなど、さまざまなエフェクトを試してみましょう。このプロジェクトを通じて、多くの人が transition の仕組みを直感的に理解できるようになります。また、position: absolute を使って要素を重ねる方法も学べます。
14. アニメーション付きナビゲーションバー
左側にロゴ、右側にメニュー項目を配置したナビゲーションバーです。メニュー項目にホバーすると、スライドするアニメーションとともに下線が表示され、現在のアクティブなページには下線が表示されたままになります。モバイル表示では、メニューがハンバーガーアイコンに折りたたまれ、タップするとドロップダウンが開くようにします。インタラクティブな要素のアニメーション状態や、画面サイズに応じたレスポンシブ対応など、今後ずっと使い続けるパターンを学べます。
15. CSSカードフリップ（カード反転）
ホバーするとカードがくるっと裏返り、裏面のコンテンツ（名言、定義、詳細情報など）が表示されるエフェクトです。transform: rotateY と backface-visibility を使用します。これらは普段あまり使わないCSSプロパティですが、初めて思い通りに動いたときには魔法のように感じられるはずです。短時間で作れて、大きな自信につながるプロジェクトです。
16. CSSのみで作る画像スライダー
JavaScriptを一切使わず、CSSだけで構築する、前へ/次へボタン付きの横スクロール画像カルーセルです。画面外に隠したラジオボタンと :checked セレクタを使って、表示する画像を切り替えるのがコツです。非常にスマートなパターンであり、JavaScriptに頼る前にCSSだけでどれだけのことができるかを実感できます。普段はJavaScriptで実装するような機能であっても、一度は挑戦してみる価値があります。
上級：本格的な挑戦
最後のいくつかのプロジェクトは、基本がすっかり身につき、本格的な挑戦をしてみたい人向けです。これらも純粋なHTMLとCSSのみ（JavaScript不要）で作成しますが、レイアウトの複雑さ、正確さ、端正さ、そして忍耐力が求められます。
17. 有名サイトのホームページ模写
実在するサイト（Netflixのホームページ、Spotifyのランディングページ、Appleの特定の製品ページなど）を選び、目に見える部分をHTMLとCSSでできるだけ正確に再現（模写）します。機能を実装する必要はありません。レイアウト、タイポグラフィ、余白、配色を完璧にマッチさせることだけを目指します。
「どうやってこの絶妙なパディングを実現しているんだろう？」と何時間も悩むことになるでしょう。しかしその過程で、なぜグリッドがそのように設計されているのかを理解し、普段訪れるあらゆるサイトのレイアウト設計に目が向くようになります。フロントエンド開発者が何年経っても「やってよかった」と語る定番の練習方法です。
18. CSSアート
div 要素とCSSだけを使って絵を描きます。この方法で、アニメのキャラクター、風景、動物、さらには肖像画まで、驚くほど詳細なイラストを作り上げる人たちがいます。まずはコーヒーカップ、スマイリーフェイス、シンプルなロボットなど、簡単なものから始めてみましょう。
実際にやってみるまでは馬鹿らしく思えるかもしれません。しかし、いざ始めてみると、position、border-radius、box-shadow、グラデーション、そして transform の素晴らしい学習になります。長方形の中に円を描こうと試行錯誤するだけで、最終的にはほとんどの初心者が到達できないレベルでCSSを理解できるようになります。
Coddyがサポートできること
Coddyの HTMLレッスン と CSSレッスン は、「これを学びたい」という気持ちと「実際にプロジェクトを作れる」という状態の間にあるギャップを埋めるために設計されています。
各レッスンは約5分で完了し、ブラウザ上で実際にコードを書きます。margin: auto で要素が上下中央に配置されない理由など、途中で行き詰まったときは、レッスン内AIアシスタントのBugsyがいつでもサポートします。
全体の仕組みは、毎日の習慣化を中心に設計されています。毎朝語学アプリを開くのと同じように、「ここで5分、あそこで5分」というパターンをプログラミング学習に応用しています。もし、これまでに自習用の教材を3割ほど進めたところで挫折した経験があるなら、この「一口サイズ」のフォーマットこそが足りなかったピースかもしれません。
HTMLとCSSは、すべてのレッスンが無料プランで提供されており、環境構築も不要です。これには多くの人が驚きます。Flexboxの学習の途中で、突然有料プランへの移行を求められるようなことはありません！
役立ついくつかの習慣
プロジェクトを選ぶ前に、意識するだけで驚くほど差がつく3つの小さな習慣を紹介します。
ブラウザのデベロッパーツールを活用する。 任意の要素を右クリックして「検証」を選択し、スタイルパネルを確認します。ブラウザ上でCSSをリアルタイムに編集して、表示がどう変わるかを確認できます。これまでに使う中で最高のデバッグツールになるはずです。どのブラウザにも最初から無料で搭載されています。
モバイルファーストで構築する。 まず小さな画面向けのCSSを書き、その後メディアクエリを追加して大きな画面でもきれいに見えるように調整します。逆の手順（デスクトップからモバイル）は難易度が上がります。これは現代のフロントエンド開発の主流パターンであるため、今から習慣にしておくことで、後々の手戻りを減らすことができます。
まずは「不格好なバージョン」を完成させる。 プレースホルダーのコンテンツと大まかなスタイリングで、まずはページを機能させましょう。ブラッシュアップは後回しです。多くの初心者が陥る罠は、完璧なボタンを作るために3時間を費やした挙句、ページ全体のレイアウトが機能していないことに気づき、すべてをやり直す羽目になることです。
次に何を作るべきか
1つのプロジェクトを終えて、次に何を作るべきかが自然と見えてきたら、それは良い兆候です。準備は万端です！
このリストから次のプロジェクトを選んで、すぐに始めましょう。「十分に準備ができた」と感じるのを待つ必要はありません。なぜなら、その瞬間は永遠に訪れないからです。ある日突然、「気づけばもう6つも作っていて、7つ目もできそうだ」と思えるようになるものなのです。
次に何を選ぶべきか迷ったら、少し「難しそうだな」と感じるものを選んでみてください。スキルが飛躍的に向上するのは、快適な領域（コンフォートゾーン）の真ん中ではなく、その境界線にいるときです。
もし基本部分で壁にぶつかったら（セレクタが機能しない、レイアウトが崩れる、Flexboxが全く動かないなど）、一度プロジェクトから離れて、そのギャップを埋めるための集中レッスンを受けてみましょう。
CoddyのHTML・CSSコースは、まさにそのために設計されています。行き詰まっているコンセプトについて、短時間で的を絞った練習を行い、すぐに自分のプロジェクトに戻ることができます。
Coddyは、XP、継続日数（ストリーク）、そしてすべてのHTML・CSSレッスンをカバーする充実した無料プランにより、プログラミングを毎日の5分間の習慣に変えます。継続する力を身につけ、本物のプロジェクトを完成させましょう。
Share this article
About the Author
Coddy Team
Editorial Team
Frequently Asked Questions
完全な初心者に最適な、最初のHTMLとCSSのプロジェクトは何ですか？
トリビュートページ（人物紹介ページ）や、個人の「自己紹介（About Me）」ページです。どちらも基本的なHTMLと少量のCSSだけで作成でき、数時間で完成させることができます。
HTMLとCSSのプロジェクトを始める前に、JavaScriptを学ぶ必要がありますか？
いいえ、必要ありません。HTMLとCSSだけでも、ランディングページ、ポートフォリオ、画像ギャラリー、アニメーション付きのナビゲーション、さらには実際に動作する画像スライダーなど、驚くほど多くのものを作ることができます。JavaScriptが必要になるのは、CSSでは対応できないインタラクティブ性が必要な場合のみで、通常は5つ目か6つ目のプロジェクト以降になります。
初心者の場合、HTMLとCSSのプロジェクトにはどのくらいの時間をかけるべきですか？
最初のプロジェクトは、長くても週末の2日間程度で終わらせるべきです。もし2週間も行き詰まっているなら、スコープ（規模）が大きすぎます。リリース可能な状態になるまで機能を削り、そのバージョンを完成させましょう。さらに機能を追加したい場合は、完成した後にのみ行うようにしてください。
バックエンド開発者を目指す場合でも、CSSのプロジェクトに取り組む価値はありますか？
はい、少なくともいくつか取り組む価値はあります。ほとんどのバックエンドのポジションでも、基本的なフロントエンドのタスク、社内ツール、管理画面などのために、HTMLとCSSを扱えることが期待されます。3〜4つのプロジェクトを経験すれば、「全く手が出ない」段階を脱し、「必要なときに何とか形にできる」段階に進むことができます。
ポートフォリオに掲載するHTMLとCSSのプロジェクトとして、どのようなものが最も効果的ですか？
バラエティを持たせましょう。洗練されたランディングページを1つ、レスポンシブなレイアウト（ブログやダッシュボードなど）を1つ、CSSアニメーションのスキルを示すプロジェクトを1つ、そしてデザインを再現できることを証明するために、実際のサイトのクローンを1つ作成するのが理想的です。中途半端な15個のプロジェクトよりも、しっかりと作り込まれた4つのプロジェクトの方が価値があります。
HTMLとCSSのプロジェクトをレスポンシブ対応にするにはどうすればよいですか？
まずは小さな画面のレイアウトから始め、CSSのメディアクエリを追加して大きな画面向けに調整していきます。いたるところで固定のピクセル幅を使用するのではなく、remや%などの相対単位を使用してください。ブラウザのウィンドウサイズを変更するか、開発者ツールのデバイスツールバーを使用してテストします。
CoddyでHTMLとCSSを無料で学ぶことはできますか？
はい、学べます。HTMLとCSSはどちらも無料プランに含まれており、すべてのレッスンを受講できます。無料プランでは、1セッションあたりに実行できる量に制限（時間経過で回復するエネルギーシステム）がありますが、コンテンツが有料ウォールの後ろにロックされることはありません。
中級者向けのプロジェクトに取り組む前に、どのようなCSSの概念を理解しておくべきですか？
ボックスモデル、Flexbox、CSS Grid、ポジショニング（relative、absolute、fixed）、そして少なくともメディアクエリを使用した基本的なレスポンシブデザインです。もしこれらの中に曖昧なものがあれば、レイアウトプロジェクトに飛び込む前に、いくつかの練習レッスンを行ってください。そうしないと、プロジェクト作成時間のほとんどを、構築ではなくGoogle検索に費やすことになってしまいます。
