模写コーディング⑥武田商事株式会社のデザインカンプ
560 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
今回は倉庫会社のサイトのデザインカンプです。
私が配布しているデザインカンプは難易度が難しく感じるかもしれませんがこれができたら拾ってくれる制作会社は絶対にあります。
説明しないといけないことが色々とあるので説明しますが全て読んでからコーディングに使ってください。
なおデザインカンプは1からありそれをやってないと色々と支障が出るのでそれをまだやってない人はやってから今回のデザインカンプを使うことをお勧めします。
今回は全てのページがありWordPressサイトにしてもらっていいしHTMLコーディングだけでもいいです。
今回のサイトですがこれが本当にサイトになった場合は普通のサイトだけど少しポップな感じを混ぜてサイト閲覧者が離脱しにくくなるデザインにするのを心がけています。
コーディングに使う画像について
私が作った画像以外は写真ACとかの素材サイトを使っていますが著作権上配布ができない為画像のURLを掲載するのでそこから画像のダウンロードをしてください。
丸にくり抜かれている画像はクリッピングマスクで切り抜いています。
私が作った画像は↓からダウンロードしてください。
武田商事株式会社 (296 ダウンロード)
クリックすると画像が切り替わる
事業案内のページですが↓の画像があります。
青枠の画像をクリックすると赤枠の画像が青枠の画像に切り替わるのを実装して欲しいです。
JQueryがJavaScriptでやりますがjQueryでいい方は↓の記事で実装してください。
デザインカンプのURL
↓からデザインカンプを見てください。