デザインパターン基礎

第5回|デザインパターン基礎 -カルーセルスライダーslickを用いたスライドの実装-

おためし受講中
  • 授業で使用する教材

    ※授業以外での利用は禁止します

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

【前半】授業
  • 授業の流れ
  • 00:00:30〜(01:29)
  • jQueryのプラグインslickについての理解
  • 00:01:59〜(00:55)
  • 質問:皆さんはslickを用いたことがありますか?
  • 00:02:54〜(03:48)
  • slickをダウンロードしてみよう。
  • 00:06:42〜(12:10)
  • ダウンロードしたslickの中身を見てみよう
  • 00:18:52〜(05:50)
  • サンプルファイル内のindex.htmlの確認
  • 00:24:42〜(02:43)
  • slick(プラグイン)のインポートをしてみよう
  • 00:27:25〜(01:52)
  • slick.jsの中身も見てみよう
  • 00:29:17〜(03:19)
  • cssの部分を見てみよう
  • 00:32:36〜(02:52)
  • 画像を1スライドずつ表示出来るように設定しよう
  • 00:35:28〜(01:04)
  • 画像の位置を設定しよう
  • 00:36:32〜(04:43)
  • スライドを実装してみよう
  • 00:41:15〜(03:08)
  • 自動的に写真が送られる設定をしよう
  • 00:44:23〜(00:44)
  • 切り替えスピードを設定しよう
  • 00:45:07〜(00:19)
  • スライド下のドットを表示しよう
  • 00:45:26〜(00:30)
  • jQueryのプラグインであるslickの記述部分を見てみよう
  • 00:45:56〜(03:49)
  • まとめ
  • 00:49:45〜(00:57)
【後半】質疑応答
  • Q.先生がこれはJQueryのプラグインを使うかJQueryにコードをゴリゴリ書くかを見極めるポイントはどこですか?どういうときコードを書こうと考えますか??
  • 00:50:55〜(01:16)
  • Q.スライダー、以前はやっていたのですが、ファイルサイズが大きくなるのでやめました。どのくらいのサイズまでなら適正と考えられますか?また、画像ファイルのサイズを小さくするツールでオススメがあったら教えてください。
  • 00:52:11〜(01:23)
  • Q.slickはwordpressに導入することはできますか?
  • 00:53:34〜(01:26)
  • Q.slickは制作の現場で、よく使われていますか?今は、どれが支流ですか?
  • 00:55:00〜(00:42)
  • Q..cat-in { width: 480px; height: 330px; overflow: hidden;がスライド画面の大きさだとしたら、縦横の数値を変えると画面サイズが変えられるんですか?
  • 00:55:42〜(02:04)
  • Q.超初歩的な質問ですみません。HTMLの38行と39行はjqueryを使う時に必須の記述なのでしょうか?特に38行にあるURLのリンク先のプログラムとかがチンプンカンプンです。出来れば詳細を教えて欲しいです
  • 00:57:46〜(00:53)
  • お知らせ
  • 00:58:39〜

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全8回 2016年9月5日公開
    デザインパターン基礎 -カルーセルスライダーslickを用いたスライドの実装-

    この授業では、Web制作におけるPCサイト及びスマートフォン(スマホ)サイトのデザインパターンとコーディングテクニックを学びます。

    CSSのみで実装できるものからjQueryを用いて表現するものまで、Webサイトを作る上で最低限必要になってくる表現方法を抜粋して紹介していきます。

    「HTMLとCSSの知識はあるけれど、レスポンシブ実装は勘でやっている」
    「jQueryの実装の仕組みがいまいちよくわからない」

    今まで“なんとなく”で実装していたコーディングを“確実”なものにするために、根拠のある知識をつけましょう。

    第5回目の授業は、WebサイトやアプリのTOPで画像を切り替えるスライドデザインの実装を学んでいきます。今回はjQueryのプラグインで高機能かつ実装も簡単なカルーセルスライダーslickを用いてスライドを作っていきます。

    slickには様々なカスタマイズ機能が用意されているので、自分のサイトにあったスライドが作成できるよう、きっちり学んでいきましょう。

    受講生代表

    • 新井 利佳

      新井 利佳

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!