HTML & CSS 腕試し

写経・模写コーナー

見本のデザインを見ながら、自分でHTML/CSSを書いて再現してみよう。
正解は1つじゃないから、自分なりに挑戦してみてね！

難易度は ⭐ 1〜5。HTML&CSSコースを終えた方から、上級者まで楽しめます。

★1 難易度 1 — かんたん
★ ★ ★ ★ ★
シンプルな名刺サイト
名前・自己紹介・連絡先を表示する1ページの名刺風サイトです。header・main・sectionタグを使って構造を作り、CSSでスタイルを整えましょう。
見本を見る 挑戦する
★2 難易度 2 — すこし慣れてきたら
★ ★ ★ ★ ★
カフェのお店紹介ページ
カフェの紹介ページを作ります。メイン画像・メニュー表・営業時間のセクションを用意しましょう。tableタグでメニュー一覧を表現するのがポイントです。
見本を見る 挑戦する
★3 難易度 3 — チャレンジ
★ ★ ★ ★ ★
ニュース記事一覧ページ
カードレイアウトを繰り返して記事一覧を作ります。CSS Grid や flexbox を使って、カードを横並びに並べましょう。同じ構造のカードを複数作るのがポイントです。
見本を見る 挑戦する
★ ★ ★ ★ ★
プロフィールカード
SNSアイコン・フォローボタンを持つプロフィールカードを作ります。中央揃えのカードデザインや、ボタンのスタイリングに挑戦しましょう。
見本を見る 挑戦する
★4 難易度 4 — 上級
★ ★ ★ ★ ★
ランディングページ風1ページ
ヒーローセクション・特徴3点・CTAボタンを持つランディングページを作ります。ページ全体の流れと、各セクションのデザインバランスを意識しましょう。
見本を見る 挑戦する