2026年4月26日
CSSは「手を動かす」のが一番の上達法
夏休みにCSSデザインを練習したいけど、「何を作ればいいかわからない」と悩んでいませんか？
CSSは教科書を読むだけでは身につきません。実際に手を動かして、いろいろなデザインを作ってみるのが一番の上達法です。
この記事では、初心者向けのCSSミニ課題を6つ紹介します。1つ30分〜1時間で完成するので、夏休みに毎日1つずつ取り組めば、1週間でCSSの基礎力がぐっと上がります。
各課題には難易度・所要時間・学べるCSSプロパティを書いているので、自分のレベルに合ったものから始めてください。
ミニ課題一覧
| # | 課題 | 難易度 | 所要時間 | 学べるプロパティ |
|---|---|---|---|---|
| 1 | おしゃれなボタン | ★☆☆ | 20〜30分 | background-color, border-radius, padding |
| 2 | プロフィールカード | ★☆☆ | 30〜40分 | box-shadow, border-radius, text-align |
| 3 | ナビゲーションバー | ★★☆ | 30〜50分 | display: flex, justify-content, gap |
| 4 | ホバーアニメーション付きボタン | ★★☆ | 20〜30分 | :hover, transition, transform |
| 5 | 3カラムのカードレイアウト | ★★☆ | 40〜60分 | display: flex, flex-wrap, gap |
| 6 | レスポンシブ対応ヒーローセクション | ★★★ | 50〜70分 | background-image, media query, flexbox |
📖 CSSの基礎がまだ不安な人は、先に「CSSとは？初心者向けにわかりやすく解説」を読んでおきましょう。
課題① おしゃれなボタン
難易度: ★☆☆（入門）｜所要時間: 20〜30分｜学べるプロパティ: background-color, color, padding, border-radius, border, font-size
完成イメージ
角が丸くて、背景色がついたボタン。文字は白色で、左右に余白がある。ボーダーはなし。
やること
- HTMLで <button> タグを1つ作る
- 背景色を好きな色に変える（例: #0d9488）
- 文字色を白にする
- padding で上下・左右に余白をつける（例: 12px 24px）
- border-radius で角を丸くする（例: 8px）
- border: none でボーダーを消す
💡 ヒント: ボタンの文字が小さいと感じたら font-size を大きくしましょう。cursor: pointer を追加すると、マウスを乗せたとき指マークになります。
課題② プロフィールカード
難易度: ★☆☆（入門）｜所要時間: 30〜40分｜学べるプロパティ: box-shadow, border-radius, text-align, padding, margin, max-width
完成イメージ
白い背景に影がついたカード。中央に名前・自己紹介文が表示される。角は丸い。
やること
- HTMLで <div> の中に名前（h2）と自己紹介文（p）を書く
- max-width で幅を制限する（例: 320px）
- margin: 0 auto で中央寄せにする
- padding で内側に余白をつける
- border-radius で角を丸くする
- box-shadow で影をつける（例: 0 2px 8px rgba(0,0,0,0.1)）
💡 ヒント: 画像を追加したい場合は、カードの上部に <img> を配置しましょう。text-align: center で文字を中央揃えにするとカードらしくなります。
課題③ ナビゲーションバー
難易度: ★★☆（中級）｜所要時間: 30〜50分｜学べるプロパティ: display: flex, justify-content, align-items, gap, background-color, padding
完成イメージ
ページ上部に横並びのメニューが表示される。背景色がついていて、リンクが等間隔に並んでいる。
やること
- HTMLで <nav> の中に <ul> と <li> でメニュー項目を3〜5個作る
- ul に display: flex を指定して横並びにする
- gap でリンク同士の間隔を調整する
- list-style: none で箇条書きの点を消す
- nav に背景色と padding をつける
- リンク（a タグ）の色と下線を調整する
💡 ヒント: justify-content: space-between にすると左端と右端にメニューが分かれます。justify-content: center にすると中央にまとまります。
📖 Flexboxの詳しい使い方は「CSSフレックスボックス入門」で学べます。
課題④ ホバーアニメーション付きボタン
難易度: ★★☆（中級）｜所要時間: 20〜30分｜学べるプロパティ: :hover, transition, transform, box-shadow, background-color
完成イメージ
マウスを乗せると、色が変わり、少し浮き上がるボタン。変化はなめらかにアニメーションする。
やること
- 課題①のボタンをベースにする
- transition: all 0.3s を追加する（変化をなめらかにする）
- :hover で背景色を少し暗い色に変える
- :hover で transform: translateY(-2px) を追加する（少し上に浮く）
- :hover で box-shadow を追加する（影で浮いている感じを出す）
💡 ヒント: transition の秒数を変えるとアニメーションの速さが変わります。transform: scale(1.05) にすると、少し大きくなるアニメーションになります。
🔗 ホバーの詳しい使い方は「CSSのhoverで動きをつける方法」で解説しています。
📖 アニメーションをもっと学びたい人は「CSSアニメーションの作り方」もチェックしてみましょう。
課題⑤ 3カラムのカードレイアウト
難易度: ★★☆（中級）｜所要時間: 40〜60分｜学べるプロパティ: display: flex, flex-wrap, gap, max-width, margin
完成イメージ
3枚のカードが横に並んでいる。各カードには見出し・テキスト・ボタンがある。画面幅が狭くなると縦に並ぶ。
やること
- HTMLで親の <div> の中に、カード用の <div> を3つ作る
- 各カードの中に見出し（h3）・テキスト（p）・ボタン（button）を配置する
- 親に display: flex と flex-wrap: wrap を指定する
- gap でカード同士の間隔を調整する
- 各カードに flex: 1 と min-width: 280px を指定する
- 課題②で学んだ box-shadow と border-radius をカードに適用する
💡 ヒント: flex-wrap: wrap があると、画面幅が狭くなったとき自動的に折り返します。min-width を指定すると、カードが小さくなりすぎるのを防げます。
課題⑥ レスポンシブ対応のヒーローセクション
難易度: ★★★（上級）｜所要時間: 50〜70分｜学べるプロパティ: background-image, background-size, min-height, media query, flexbox, font-size
完成イメージ
画面いっぱいの背景画像の上に、大きな見出しとボタンが中央に表示される。スマホでは文字サイズが小さくなり、余白が調整される。
やること
- HTMLで <section> の中に見出し（h1）とボタンを配置する
- section に background-image で画像を設定する（フリー素材サイトから取得）
- background-size: cover で画面いっぱいに表示する
- min-height: 100vh で画面の高さいっぱいにする
- display: flex と align-items: center, justify-content: center で中央配置する
- @media (max-width: 768px) でスマホ用のスタイルを書く（文字サイズ・余白を調整）
💡 ヒント: 背景画像の上に文字を置くとき、読みにくい場合は半透明の黒い overlay を重ねましょう。フリー素材は Unsplash（unsplash.com）で探せます。
課題に取り組むときの3つのコツ
① 完成イメージを先にスケッチする
いきなりコードを書かず、紙やノートに完成イメージを簡単にスケッチしましょう。「ここにボタン」「ここに見出し」と配置を決めてからコードを書くと、迷わず進められます。
② HTMLを先に完成させてからCSSを書く
HTMLで構造を作ってからCSSで見た目を整える、という順番を守りましょう。見た目を先に考えると、HTML構造がぐちゃぐちゃになりがちです。
③ 開発者ツールで確認しながら進める
ブラウザの開発者ツール（F12）を開いて、CSSの値をリアルタイムで変えながら調整すると効率的です。「この余白はもう少し大きい方がいいかな？」と試行錯誤できます。
まとめ
- ✅ CSSは手を動かして練習するのが一番の上達法
- ✅ ミニ課題6つで、ボタン・カード・ナビバー・アニメーション・レイアウト・レスポンシブを練習できる
- ✅ 1つ30分〜1時間で完成するので、夏休みに毎日1つずつ取り組める
- ✅ HTMLを先に完成させてからCSSを書く順番を守る
- ✅ 開発者ツールでリアルタイムに調整しながら進めると効率的
あわせて読みたい記事
- CSSとは？初心者向けにわかりやすく解説 — CSSの基礎をゼロから学ぶ
- CSSフレックスボックス入門 — 横並びレイアウトの基本
- CSSのhoverで動きをつける方法 — ホバーアニメーションの詳しい解説
- CSSアニメーションの作り方 — @keyframesを使った本格アニメーション
- CSS練習問題｜初心者向け無料ドリル30問 — 知識の確認に
- 夏休みにプログラミングを始めよう！中高生向け完全ガイド — 夏休みの学習スケジュール