読者です 読者をやめる 読者になる 読者になる

WEBサイト制作の勉強|フェリカテクニカルアカデミー

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