【WordPress コーディング練習】入門編：フォトサイト

完成イメージの確認

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

課題内容

写真集を出版することになった友人のために、紹介用のWebページを制作します。
スマホやタブレットでも表示できるようにレスポンシブの対応も行います。

素材（画像）

素材をダウンロードする

デザインデータ

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

※ダウンロード版のファイルを開くには、Adobe XDのインストールが必要です。

コーディング仕様

コーディングに迷ったらヒントをみよう！

コーディングで悩んだ場合は、下記の「レイアウト構成」と「コーディングポイント」を参考にしてみてください。

レイアウト構成

HTML版のレイアウト構成を参考にしてください。
※一部、WordPressと構成が異なる場合があります。

コーディングポイント

WordPressのコーディングポイントについての簡単なメモです。

コーディングポイント

コーディングが完了したら確認しよう！

コーディングが完了したら、下記の「ソースコード」を参考に、自分の作ったコードとサイトをチェックしてみてください。

ソースコード

コーディング例です。コーディングの方法は1パターンだけではないので、あくまでも参考として自分のソースコードと比較しながらチェックしてみましょう。

ソースコードをダウンロード

コーディングを仕事にしていきたい方へ

Codejump Proでは、実際の案件をモデルにした仮想案件で実務レベルのスキルと経験を身につけていきます。

• ポートフォリオに載せる実績がない・・・
• 実務経験がゼロ・・・
• 案件獲得に不安がある・・・

1つでも当てはまる場合は、今すぐ実務レベルの案件をスタートしてみてください。

模写の次に何を学ぶべきか迷っていませんか？

以下のようなお悩みに1つでも当てはまる場合、無料のメール講座をお受け取りください。

• 模写はできるようになってきたけど、実務に通用するか不安
• ポートフォリオに悩んでいる・載せる実績がない
• 案件に挑戦したいけど、自信がなくて一歩踏み出せない

今登録すると、特典PDFとして、『コーディング中級者が案件獲得前にやるべきこと8選』をプレゼント中です。

現場レベルのスキルを身につけたい方へ

現場レベルのコーディングスキルを身につけたい方は、書籍『HTML&CSS Webデザイン 現場レベルのコーディング・スキルが身につく実践入門』（出版社：技術評論社）がおすすめです。

本書は、入門編から実践編の6つのWebサイト制作を通して、現場で必要なコーディングスキルをステップアップしながら1冊で身につけていきます。

• 第1章【入門編】プロフィールサイト〜フレックスボックス
• 第2章【初級編】ブランドサイト〜ポジション
• 第3章【中級編】サービスサイト〜複数ページ
• 第4章【上級編】カフェサイト〜複数レイアウト
• 第5章【応用編】ランディングページ〜動きのあるWebサイト
• 第6章【実践編】コーポレートサイト〜実務を想定したWebサイト制作

現場レベルのコーディングスキルを身につけたい方は、こちらの書籍を一通り学習した後、Codejumpの練習課題に取り組むと効率良く学習できます。