おためし受講中

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

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

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

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

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

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

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

学生代表

  • 新井 利佳

    新井 利佳

    スクー放送部

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

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