実技課題

インターネット上のソース転用練習

  • リンクされている各ページのファイルをコードエディタで開き問題をクリアしましょう。
  • 最低クリア条件:2問解答
  • おおよその難易度順に並んでいますので、上から順にクリアしていくとスムーズです。
  • 未回答の問題はリンクを外しておきましょう(テキストは残しリンクを#に変更する)。
1.CSSのドロップダウンメニュー

test6-1.html

CSSのみでドロップダウンメニューを実装する
2.CSSのホバーアニメーション

test6-2.html

CSSのみでさまざまなホバーアニメーションを実装する
3.slickを利用したカルーセル

test6-3.html

slickでカルーセルスライダー(カルーセルバナー)を実装する
4.Swiperを利用した無限ループスライダー

test6-4.html

Swiperで無限スクロールスライダーを実装する
5.スクロールに応じて要素をフェードインさせる

test6-5.html

CSSとJavaScript(jQuery等)を利用し、スクロールに応じて要素をフェードインさせるアニメーションを実装する