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

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

WEBサイト制作の勉強の為の解説ブログ。東京池袋のフェリカテクニカルアカデミーでは求職者支援訓練の一環として、WEBサイト制作を学ぶことができます。

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

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


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

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

f:id:yachin29:20150603194008p:plain




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