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

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

第6回実技テスト 全面レイアウトのレスポンシブサイト制作

web制作 レスポンシブデザイン

以下の指示に沿ってサイトを制作すること。

  • スマートフォン時にはナビをハンバーガーメニューにすること。
  • ロゴはSVG化をすること。
  • タグラインにはgoogle fonts を使用すること。
  • スムーススクロールを導入すること。
  • スムーススクロール・ハンバーガーメニュー共にプラグインの使用不可
  • ゴーストボタンにはトランジションの設定をすること。
  • その他のボタンにもホバーアクションの設定をすること。
  • PC~タブレット間は可変で推移。SPレイアウトは767pxから。
  • footerにはコピーライトを挿入(その他は適宜)
  • 数値の指示が無い箇所は適宜

f:id:yachin29:20161227010724p:plain


使用する画像
http://yachin29.webcrow.jp/test6_img.zip


Google Fonts + 日本語 早期アクセス
googlefonts.github.io