2026年4月27日
「何を作ればいいかわからない」を解決しよう
HTML・CSSの基礎を学んだけど、「次に何を作ればいいかわからない」と手が止まっていませんか？
プログラミングは「作りながら学ぶ」のが一番の上達法です。でも、いきなり「自由に作ってみよう」と言われても困りますよね。
この記事では、HTML・CSSで作れる作品アイデアを10個紹介します。初級→中級→上級の3段階に分けているので、自分のレベルに合ったものから挑戦してみてください。
どれも実際に完成させれば、ポートフォリオ（作品集）として残せます。
初級：HTMLが書ければ作れる作品
① 自己紹介ページ
難易度: ★☆☆｜所要時間: 1〜2時間｜使う技術: HTML（見出し・段落・リスト・画像・リンク）、CSS（色・余白）
名前・学年・趣味・好きなものを載せた1ページのプロフィールサイト。写真やイラストも配置します。
最初の作品に最適。HTMLの基本タグをすべて使う練習になります。完成したらGitHub Pagesで公開してみましょう。
② 好きなものランキングページ
難易度: ★☆☆｜所要時間: 1〜2時間｜使う技術: HTML（見出し・リスト・画像・テーブル）、CSS（色・ボーダー）
好きなゲーム・アニメ・音楽などのランキングを、順位付きで紹介するページ。画像と説明文を添えます。
順序付きリスト（ol）や表（table）の練習になります。自分の好きなものがテーマなので、楽しく作れます。
③ 時間割ページ
難易度: ★☆☆｜所要時間: 1〜2時間｜使う技術: HTML（テーブル）、CSS（背景色・ボーダー・余白）
月曜〜金曜の時間割を表で表示するページ。教科ごとに背景色を変えて見やすくします。
tableタグの練習に最適。CSSで色分けすると、見た目がぐっと良くなります。
④ レシピ紹介ページ
難易度: ★☆☆｜所要時間: 1〜3時間｜使う技術: HTML（見出し・リスト・画像）、CSS（レイアウト・余白）
好きな料理のレシピを紹介するページ。材料リスト・手順（番号付きリスト）・完成写真を載せます。
順序なしリスト（ul）と順序付きリスト（ol）の使い分けを練習できます。実用的なページなので、家族に見せても喜ばれます。
中級：CSSでデザインにこだわる作品
⑤ ポートフォリオサイト（作品集）
難易度: ★★☆｜所要時間: 3〜5時間｜使う技術: HTML・CSS（Flexbox・カードレイアウト・レスポンシブ）
自分が作った作品を一覧で紹介するサイト。各作品をカード型で表示し、クリックすると詳細ページに飛びます。
Flexboxを使ったカードレイアウトの実践。推薦入試やAO入試のアピール材料にもなります。
⑥ 架空のカフェのWebサイト
難易度: ★★☆｜所要時間: 3〜5時間｜使う技術: HTML・CSS（ヘッダー・フッター・ナビバー・画像配置・Flexbox）
架空のカフェのトップページ。ヘッダーにロゴとナビ、メインにメニュー紹介、フッターに営業時間を配置します。
実際のWebサイトに近い構成を練習できます。ヘッダー・メイン・フッターの3構成を学べます。
⑦ イベント告知ページ（文化祭・部活など）
難易度: ★★☆｜所要時間: 2〜4時間｜使う技術: HTML・CSS（背景画像・中央配置・ボタンデザイン・レスポンシブ）
文化祭や部活の発表会を告知するランディングページ。大きな見出し・日時・場所・申し込みボタンを配置します。
実際に使える実用的なページ。background-imageとFlexboxの中央配置を練習できます。
⑧ 写真ギャラリー
難易度: ★★☆｜所要時間: 2〜4時間｜使う技術: HTML・CSS（CSS Grid・hover効果・border-radius）
旅行や日常の写真をグリッド状に並べたギャラリーページ。マウスを乗せると写真が少し拡大します。
CSS Gridの実践的な使い方を学べます。:hoverとtransformで動きをつける練習になります。
上級：JavaScriptも少し使う作品
⑨ ダークモード切り替え付きサイト
難易度: ★★★｜所要時間: 3〜5時間｜使う技術: HTML・CSS（CSS変数）・JavaScript（少し）
ボタンを押すとライトモード⇔ダークモードが切り替わるサイト。CSS変数で色を管理します。
CSS変数（カスタムプロパティ）の実践。JavaScriptでclass名を切り替える方法を学べます。実用的な機能なので、他の作品にも応用できます。
⑩ カウントダウンタイマー
難易度: ★★★｜所要時間: 3〜5時間｜使う技術: HTML・CSS（デザイン）・JavaScript（日付計算・DOM操作）
イベント（文化祭・テスト・誕生日など）までの残り日数・時間・分・秒をリアルタイムで表示するページ。
JavaScriptのDateオブジェクトとsetIntervalを使います。CSSで数字を大きく見やすくデザインしましょう。実用的で友達にも見せやすい作品です。
季節別おすすめアイデア
季節のイベントに合わせた作品を作ると、モチベーションが上がります。
| 季節 | おすすめアイデア |
|---|---|
| 夏休み | 自由研究まとめサイト、旅行記ページ、読書感想文ページ |
| 文化祭 | イベント告知ページ、投票フォーム、文化祭サイト |
| 冬休み | 年賀状風ページ、新年の目標ページ、カウントダウンタイマー |
| 通年 | ポートフォリオ、推し紹介ページ、趣味のブログ風ページ |
季節に関係なく作れるポートフォリオは、推薦入試の活動実績としても使えるのでおすすめです。夏休みにプログラミングで何を作るか迷っている人は夏休みプログラミングアイデア10選も参考にしてください。
作品を作るときの3つのコツ
① 完璧を目指さない
最初から完璧なデザインを目指す必要はありません。まず「動くもの」を完成させて、あとから少しずつ改善しましょう。完璧より完成が大事です。
② 模写から始めてもOK
「ゼロから考えるのが難しい」と感じたら、好きなサイトを模写（まね）して作るところから始めてもOKです。模写で型を覚えてから、オリジナルに挑戦しましょう。
③ 完成したら公開する
作品が完成したら、GitHub Pagesで公開してみましょう。「自分のサイトがインターネットに公開されている」という体験は、大きなモチベーションになります。
📖 模写コーディングのやり方は「HTML・CSSの模写コーディングのやり方」で解説しています。
🔗 ポートフォリオの作り方は「中高生がWebポートフォリオを作る方法」で詳しく紹介しています。
作品のクオリティを上げる5つのポイント
基本が完成したら、以下の5つを意識するとプロっぽい仕上がりになります。
① 配色は3色以内にまとめる
メインカラー・サブカラー・アクセントカラーの3色で統一すると、まとまりのあるデザインになります。CSSで色を指定する方法で配色の基本を学べます。
② 余白（padding/margin）をしっかり取る
初心者の作品は余白が少なく窮屈に見えがちです。要素の間に十分な余白を取るだけで、見やすさが大幅に向上します。marginとpaddingの違いを参考にしてください。
③ フォントサイズに強弱をつける
見出しは大きく、本文は読みやすいサイズに。メリハリをつけると情報の優先度が伝わります。
④ レスポンシブ対応する
最低限スマホで崩れないようにしましょう。レスポンシブデザインの作り方で基本を学べます。
⑤ ファビコンとtitleタグを設定する
ブラウザのタブに表示されるアイコンとタイトルを設定すると、完成度がぐっと上がります。
作品を公開する方法
完成した作品はGitHub Pagesで無料公開できます。手順は3ステップです。
- GitHubアカウントを作成する
- リポジトリを作成してHTMLファイルをアップロードする
- Settings → Pages で公開設定をオンにする
詳しい手順はGitHub Pagesで無料公開する方法で解説しています。
公開後は、URLをSNSで共有したり、友達に見せてフィードバックをもらいましょう。複数の作品ができたらポートフォリオにまとめるのもおすすめです。
まとめ
- ✅ HTML・CSSで作れる作品は初級〜上級まで幅広い
- ✅ 初級：自己紹介・ランキング・時間割・レシピ（HTMLの基本タグ練習）
- ✅ 中級：ポートフォリオ・カフェサイト・イベント告知・ギャラリー（CSS活用）
- ✅ 上級：ダークモード切り替え・カウントダウンタイマー（JavaScript少し）
- ✅ 完璧より完成を優先。まず動くものを作ってから改善する
- ✅ 完成したらGitHub Pagesで公開してポートフォリオにしよう
あわせて読みたい記事
- HTMLとは？初心者向けにわかりやすく解説 — HTMLの基礎をゼロから学ぶ
- CSSとは？初心者向けにわかりやすく解説 — CSSの基礎をゼロから学ぶ
- HTML練習問題10選【初心者向け】 — HTMLの基礎を問題で確認
- CSS練習問題｜初心者向け無料ドリル30問 — CSSの知識を問題で確認
- HTML・CSSの模写コーディングのやり方 — 模写で型を覚える練習法
- 中高生がWebポートフォリオを作る方法 — 作品集の作り方
- 夏休みにプログラミングで何作る？中学生向けアイデア10選 — 夏休み向けのアイデア集