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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• CSSアニメーションの使い方（フェードイン、フェードアウト）
• CSSアニメーションの使い方（スライド）
• CSSアニメーションの使い方（拡大、縮小）
• CSSアニメーションの使い方（移動）
• ハンバーガーメニューの作り方
• ふきだしの作り方
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• 固定サイドメニュー
• 背景の固定動画
• 透過のグラデーション
• ボタンの色々なホバー
• CSSでのフロー図の作り方
• トップへ戻るボタン
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• スクロールにあわせた画像の拡大、縮小
• スクロール時に要素を表示、非表示、スライドさせる
• スクロール時に背景画像を切り替える
• 画像を下からふわっと表示させる
• 上からスライドするハンバーガーメニューの作り方
• ホバー時にボタンの矢印を動かす
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

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

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• jQueryを使用したホバー時の画像切り替え
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• プラグイン「slick」を使用したカルーセルスライダーの実装
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• プラグイン「slick」のオプション設定を使用したカルーセルスライダーの実装
• レスポンシブ対応

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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

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

• プラグイン「Datepicker」を使用したカレンダーの実装
• 入力項目の必須チェック
• ラジオボタン変更時のテキスト切り替え

デザインカンプ（XD、Figma）

Adobe XD デザインカンプ
・XD（WEB版）
・XD（ダウンロード版）

※XDからのコーディング方法はこちら

Figma デザインカンプ
・Figma（ダウンロード版）

※Figmaからのコーディング方法はこちら

※ダウンロード版のファイルを開くには、ツールのアカウントまたはインストールが必要です。

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

＜目次＞

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

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