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

目次

コーディング練習課題

課題内容
写真集を出版することになった友人のために、紹介用のWebページを制作します。
スマホやタブレットでも表示できるようにレスポンシブの対応も行います。
素材
学習用の素材をダウンロードする
※素材の中で使用している画像は当サイトのものではない為、グレー画像に置き換えています
デザインイメージ

▼PC表示

▼SP表示

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

下記の「デザインカンプ」と「コーディング仕様」をもとに、WordPressサイトを制作してみましょう!
特に指示のない所は、ユーザビリティを考慮しながら自分で考えてコーディングしてみましょう!

デザインカンプ
▼XDデータ
Windows用:ダウンロード
Mac用:ダウンロード
※ファイルを開くには、Adobe XDのインストールが必要です。
コーディング仕様
コンテンツ幅
メインビジュアルが1000px、中のコンテンツが600pxです。
INDEX
固定ページから編集できるようにします。
DETAIL
画像とテキストを横並びに配置します。
著者、出版社、発行年のエリアの上下には罫線を引きます。
レスポンシブ
ブレークポイントは1024pxです。
DETAILのコンテンツは縦積みにします。

ヒント(レイアウト構成、コーディングポイント)

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

レイアウト構成

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

コーディングポイント

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

コーディングポイント

解答例(ソースコード、デモサイト)

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

ソースコード

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

ソースコードはこちら

デモサイト

デモサイトと自分で作成したサイトを比較して、デザインや動きなどをチェックしてみてください。

デモサイトはこちら

関連記事