WEBサイト制作の勉強

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

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

既存のサイトをモデルにする レスポンシブデザイン編

授業で制作したレスポンシブデザインのサイトをモデルとして使用した既存サイトと同じ動きになるよう細かい修正を加えました。


PC・タブレットサイズでは2×2サイズの大きなピザの写真がスマートフォンサイズでは相対的に大きく見え過ぎるので、スマートフォンサイトでは2×1サイズにリサイズした別画像を表示させます。
また、共通のスタイルシートに記述していたホバーするとズームするアニメーションをPCサイズとタブレットサイズのCSSのみに適用させました。

キリン風レスポンシブ対応サイト

f:id:yachin29:20150603194008p:plain




参考サイトwww.kirin.co.jp