既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。
見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。
開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課題の1番のポイントです。
今回はまず中央のギャラリー部分の作成をします。
- 960px幅
- 5カラム
- 画像同士の隙間 20px
まずはギャラリーを作る際に、どういうサイズで画像をレイアウトしていけば良いか考えましょう。
Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール
またスマホレイアウトで、どういう見せ方にするべきか、またその為にどういう工夫がされているかを、制作しながら理解していきましょう。
PC時のギャラリー部分
スマホ時のギャラリー部分
画像素材
header周りの画像
http://yachin29.webcrow.jp/kirin/header-icon.zip