WEBサイト制作の勉強

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

第6回実技試験|レスポンシブサイトの制作

  • モバイルファーストでレスポンシブサイトにする事(ブレイクポイントは自由)
  • ロゴはsvg形式にする事
  • flexboxを1箇所以上で使用する事
  • .containerの幅には最大値を指定する事
  • img要素をフルード化する事
  • 画像のホバーアニメーションにcssのfilter機能を使う事
  • css3のanimation機能を使う事
  • cssのカスタムプロパティを1つ以上指定する事
  • コピーライトの西暦部分を動的(2019年になったら表示が2019になるよう)にする
  • 適切な余白、文字の大きさを各メディアクエリー内で指定する事
PCレイアウト

f:id:yachin29:20181109113040j:plain




SPレイアウト
f:id:yachin29:20181109113115j:plain




参考サイト
http://yachin29.com/school/test-5/