制作日

2013年7月29日〜9月24日

概要

こちらのサイトのデザインを使わせて頂きました "Gelateria SINCERITA オンラインショップ"
フラットデザインでおしゃれな印象のオンラインショップをレスポンシブデザインにコーディングしました。

対象ブラウザ

• Firefox25+
• Safari6.1+
• Google Chrome31+
• IE9+、出来れば10+

技術

• html5
• css3
• animation
• jQuery (smoothscroll.js)
• Mediaquery
• iconfont (IcoMoon)
• webfont (Google Fonts)
• 画像 (写真素材 足成)

感想

ロゴマークやタグラインを作りました。参考にした元のサイトはリストマークやアイコンをcssスプライトで実装されていましたが、この作品ではiconfontや疑似要素で実装しました。メディアクエリのブレイクポイントは表示幅1160px、980px、640pxにしました。640px以下の時のドロワーメニューをcss3で実装しました。PCファーストでコーディングしたので、表示幅が狭くなるにつれてコーディングが難しくなりました。