chevron_left

デザインパターン基礎

PREMIUM
第5回

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

2016年9月5日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 12

授業の概要

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

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

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

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

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

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

こんな人にオススメ

実践的に使えるデザインパターンを学びたいWebデザイナー

授業で使用する教材

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

チャプター

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