【デザインカンプ無料】コーディング練習用【入門編~上級編】

コーディング練習用のXDデザインカンプを無料で配布しています。

レベル別に、入門編から上級編までそろっているので、スキルにあったものからチャレンジしてみてください!

全ての練習課題に、コーディングのヒントと、解答例のソースコード、デモサイトを用意していますので、学習の参考にお役立てください。

練習で制作したサイトは、自由にポートフォリオへ掲載していただいてOKです!

<コーディング練習用 無料XDデザインカンプ一覧>

【コーディング練習用 XDデザインカンプ】
① 入門編:プロフィールサイト/LP


デモを見る

この練習課題で学べる内容

  • header、footer、main、navの使い方
  • sectionの使い方
  • リストタグ(ul、li)の使い方
  • inline-blockの使い方
  • Flexboxを使用した横並びの配置
  • CSSで画像を丸く表示
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
② 入門編:フォトサイト/LP


デモを見る

この練習課題で学べる内容

  • header、footer、mainの使い方
  • sectionの使い方
  • リストタグ(dl、dt、dd、ol、li)の使い方
  • Flexboxを使用した横並びの配置
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
③ 入門編:フォトサイト2/LP


デモを見る

この練習課題で学べる内容

  • header、footer、mainの使い方
  • sectionの使い方
  • リストタグ(dl、dt、dd、ol、li)の使い方
  • Flexboxを使用した横並びの配置
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
④ 入門編:レシピサイト/トップページ


デモを見る

この練習課題で学べる内容

  • main、footerの使い方
  • 画像の全幅表示
  • 枠線のあるボタンの作り方
  • リストタグ(ul、li)の使い方
  • Flexboxを使用した要素の横並び
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑤ 入門編:レシピサイト/レシピページ


デモを見る

この練習課題で学べる内容

  • main、footerの使い方
  • Flexboxを使用した要素の横並び
  • リストタグ(dl、dt、dd、ol、li)の使い方
  • 点線の使い方
  • 枠線のあるボタンの作り方
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑥ 入門編:ブランドサイト(ジュエリー)/LP


デモを見る

この練習課題で学べる内容

  • header、main、footer、sectionの使い方
  • Google Fontsの使い方
  • Flexboxを使用した要素の横並び
  • ページ内リンクの設定
  • リンクからのメーラー起動
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑦ 初級編:ポートフォリオサイト/LP


デモを見る

この練習課題で学べる内容

  • header、footer、main、navタグを使ったレイアウトの組み立て方
  • sectionの使い方
  • h1、h2タグの使い方
  • メインビジュアルの全幅表示(高さ固定)
  • PCとスマホでの画像切り替え
  • リストタグ(dl、dt、dd、ul、li)の使い方
  • Flexboxを使用した画像の横並び
  • コンタクトフォーム(form、input、textarea)の使い方
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑧ 初級編:ストアサイト(書店)/1カラム


デモを見る

この練習課題で学べる内容

  • 画像の全画面表示
  • 要素の重ね合わせ(position)
  • 要素の透過
  • 画像とテキストの横並び配置
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑨ 初級編:ECサイト/商品ページ


デモを見る

この練習課題で学べる内容

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑩ 初級編:コーポレートサイト/LP


デモを見る

この練習課題で学べる内容

  • header、footer、main、navタグを使ったレイアウトの組み立て方
  • sectionの使い方
  • メインビジュアルのvh表示
  • スマホの場合に要素を非表示にする方法
  • リストタグ(dl、dt、dd、ul、li)の使い方
  • Flexboxを使用した画像の横並び
  • positionを使用した要素の重ね合わせ
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑪ 初級編:ストアサイト(和菓子)/縦書きレイアウト


デモを見る

この練習課題で学べる内容

  • 縦書きレイアウトのコーディング
  • ベンダープレフィックスの使い方
  • positionを使用した透過要素の重ね合わせ
  • PCとスマホ時の背景画像切り替え
  • Google Mapの埋め込みと全幅表示
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑫ 中級編:ブログサイト/2カラム


デモを見る

この練習課題で学べる内容

  • 2カラムのレイアウト
  • article、asideの使い方(article、aside)
  • Flexboxを使用した横並びの配置
  • スマホ時のグローバルナビ横スクロール
  • Google Fontsの使い方
  • Twitter埋め込み
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑬ 中級編:ストアサイト(カフェ)/LP


デモを見る

この練習課題で学べる内容

  • 固定ヘッダー
  • 背景画像の固定
  • 要素の横並び配置(flexbox)
  • リストタグの使い方(dl、dt、dd、ul、li)
  • ボックスの重ね合わせ(position)
  • Google Mapのモノトーン化と埋め込み

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑭ 中級編:ストアサイト(インテリア)/グリッドレイアウト


デモを見る

この練習課題で学べる内容

  • グリッドレイアウト
  • 固定ヘッダー
  • リストタグの使い方(dl、dt、dd、ul、li)
  • Google Mapのモノトーン化と埋め込み
  • ハンバーガーメニュー
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑮ 上級編:メディアサイト/グリッドレイアウト


デモを見る

この練習課題で学べる内容

  • グリッドレイアウト
  • 動画の埋め込み(video)
  • ハンバーガ―メニュー(css、jquery)
  • カルーセルスライダー(jquery)
  • スムーススクロール(jquery)
  • スクロール時の画像フェード表示(jquery)
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑯ 番外編:疑似要素の練習


デモを見る

この練習課題で学べる内容

  • 疑似要素(before)の使い方
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑰ 番外編:positionの練習


デモを見る

この練習課題で学べる内容

  • position(relative、absolute)を使った要素の重ね方
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑱ 番外編:アコーディオンメニューの練習


デモを見る

この練習課題で学べる内容

  • jQueryを使ったアコーディオンメニュー
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑲ 番外編:行数が異なる画像の横並びの練習


デモを見る

この練習課題で学べる内容

  • 行数が異なる画像の横並びの方法
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
⑳ 番外編:画像を斜めに表示する練習


デモを見る

この練習課題で学べる内容

  • CSSで画像などの要素を斜めにする方法
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

【コーディング練習用 XDデザインカンプ】
㉑ 番外編:ドロップダウンメニューの練習


デモを見る

この練習課題で学べる内容

  • CSSでドロップダウンメニューを作る方法
  • レスポンシブ対応

XDデザインカンプのダウンロード

XDデータのダウンロードはこちら
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています。

コーディング練習をはじめよう!

<目次>

  • 課題内容
  • 設定単価
  • 素材のダウンロード
  • デザインイメージ
  • コーディングポイント
  • コーディングのヒント(レイアウト構成)
  • 解答例(ソースコード)
  • 解答例(デモサイト)

こちらのコーディング練習は、下記から挑戦できます!

自分のスキルにあった課題からチャンレジしよう!

XDのデザインカンプを、入門編から上級編までご紹介してきました。

デザインカンプからのコーディング練習は、HTMLの練習の中でもより実践に近い練習方法です。

まだ、HTMLのコーディングに慣れていないうちから、いきなりデザインカンプの練習をはじめると、挫折の原因になってしまう恐れがあるので、自分のスキルにあった練習からはじめてくださいね。

目安としては、入門編や初級編のデザインカンプを見て難しいなと感じた場合は、デザインカンプからのコーディングではなく、デモサイトと同じものを作る「模写コーディング」をしてみてください。

完成サイトで動きが確認できたり、デベロッパーツールでコードが確認できるので、デザインからコーディングをするよりもハードルが下がります。

模写コーディングに慣れてきたら、またデザインカンプからのコーディングにリトライしてみてくださいね。

模写コーディングに挑戦する際は、こちらの模写コーディングのやり方を参考にしてみてください。

デザインカンプのご紹介は以上です。

それでは、コーディング練習がんばってください!

学習の進捗を #codestep をつけてツイッターでシェアしていただけたら、楽しみに拝見させていただきます!

コーディング解説