WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

グリッドレイアウト部分の作成

f:id:yachin29:20160801121918j:plain

既存のサイトをトレースし、コーディングをするのは非常に良い勉強になります。
見ているだけでは解らない事も自身で組み直す事で、見えてきたり、理解出来たりする事があります。
開発者の意図や設計思想をしっかりと理解し、コーディングし直す事がこの課題の1番のポイントです。

今回はまず中央のギャラリー部分の作成をします。

  • 960px幅
  • 5カラム
  • 画像同士の隙間 20px

まずはギャラリーを作る際に、どういうサイズで画像をレイアウトしていけば良いか考えましょう。


Gridpx:グリッドデザイン計算ツール | Webデザイン便利ツール


またスマホレイアウトで、どういう見せ方にするべきか、またその為にどういう工夫がされているかを、制作しながら理解していきましょう。


PC時のギャラリー部分
f:id:yachin29:20160801122411j:plain


スマホ時のギャラリー部分
f:id:yachin29:20160801122914p:plain



画像素材

http://yachin29.com/grid.zip

header周りの画像
http://yachin29.webcrow.jp/kirin/header-icon.zip