ホームページ制作WORKS制作実績BLOGブログRECRUIT採用情報COMPANY会社概要CONTACTお問い合わせ03-6659-5220WordPress・レスポンシブが得意!ホームページ制作BLOGslickの使い方からカスタマイズまで【スライダープラグイン決定版】slickの使い方からカスタマイズまで【スライダープラグイン決定版】2020/01/24ツイート「スライダーを実装したい!」「でも何を使えばいいの?」という方に朗報です。この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし!(かもしれません。)目次slick(スリック)とはslickの使い方~導入編~slickの使い方~実践編~slickの使い方~カスタマイズ編~slickの使い方~レベルアップ編~slickの使い方~もっとレベルアップ編~slickの使い方~まとめ~slick(スリック)とはslickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。商用の利用もOK(※ちょっぴり条件があります)なので我々のような制作会社で導入するのにも安心です。※slickはMITライセンスというライセンスの中でトップクラスに緩い制限のライセンスを採用しています。MITライセンスはざっくりいうと「このソフトウェアは誰でもタダで使っていいよー。改造もしていいし商用利用もいいよ!でも著作権表示か本許諾表示はちゃんと書いてね。」という感じになります。詳しくは英語ですがこちらをご確認ください。slickで何ができるの?他と何が違うの?slickを使えば、文字や画像が切り替わるスライダーを簡単に作成することができます。カルーセル(真横にスライドするスライダー。シンプルなやつですね。)に関するオプションが豊富でカスタマイズしやすいです。レスポンシブ対応もしやすくて、スマホで見たとき・タブレットで見たとき、PCで見たとき...という風にブレイクポイントを設定すればデバイスに応じた見せ方が可能です。シンプルな使い方もできるので初心者~上級者まで幅広く使えるプラグインだといえるでしょう。slickの使い方~導入編~便利なスライダープラグイン・slick。あなたの開発環境に導入してみましょう。slickの導入方法slickを使うためには大きく分けて「オンライン上のslickを使う」か「ローカルにslickをダウンロードする」という二通りの方法があります。ひとつずつ説明していきましょう。どちらの場合でも必要なのが「slick.min.js」と「slick.css」です。JSファイルはminがついているものとそうでないものがありますが、minの方が軽量化されており、私たちがそのソースを触ることはないので導入するならminの方がおすすめです。slickはjQueryベースのプラグインなのでjQueryそのものを用意するのもお忘れなきよう!オンラインのslickを使う方法HTMLに以下のソースをコピペするだけ(2020年1月時点)。src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>この方法だとオンライン環境でないと使えない(=ローカルで検証できない)、cdnのサーバーにエラーがあったりサービスが廃止になったときに使えなくなるというデメリットもあります。Now」をクリックするとZipファイルがダウンロードされます。こちらを解凍したら、任意の場所にCSSファイルとJSファイルを置いて、HTMLにパスを書いたら完了です。今回は以下のような配置にしてみましょう。赤枠の「slick.css」「slick.js」が今回DLしたものです。スライダーをカスタマイズする際はslick.cssは触らずにcommon.cssで上書きしていきます。JSも同様にcommon.cssで動きを設定します。読み込みの順番にも注意してください。下に書いてある方で上書きされるのでcommon~を下に書きましょう。src="js/common.js"></script>困ったときは?もし上記の方法でうまくいかない(slickが動かない)場合は以下を確認しましょう。書き方はあっているかセレクタの指定が間違っていないか、タイプミスがないかなど、深呼吸して一度落ち着いてからソースをみましょう。余談ですがトイレに行くとか珈琲を入れるために席を離れると、いい具合にスイッチが切り替わるのでおすすめです。他のプラグインを入れていたりするとうまくいかない場合があるので、jsの記述だけbodyの閉じタグ(/body)の直前に書いてみてください。src="js/common.js"></script>↑bodyの閉じタグ直前に書く</body>それでもうまくいかない場合slickのバージョンを変えてみるとうまくいくかもしれません。最新版より前のバージョンが必要な場合はGitHubからの入手になります。Code(zip)」を入手します。あとは上述したローカルにダウンロードする方法と同じです。それでも・・・それでもうまくいかなかった場合はぜひ弊社にご連絡ください!slickの使い方~実践編~導入ができたところで、実際にslickでスライダーを作ってみましょう。HTMLファイルに以下のように書いていきます。Picsum様よりお借りしました。スタイリッシュなダミー画像がダウンロードできるのでおすすめです。/></li></ul>構造はリストでもdivでもなんでもいいのですが、ポイントは画像を囲むブロックにクラス(idでも大丈夫です)をつけることです。JSでそのクラスをもとにメソッドを呼び出す、という感じになります。「Previous」「Next」をクリックすると2枚目3枚目の画像に変わります。この状態だとアレですよね...すごくダサいですよね。次からはカスタマイズする方法をご紹介していきます!※ちなみに「カスタマイズめんどくさい、いじらないでいい感じに見せたい」という場合は「slick-theme.css」を読み込んでおくと見た目がいい感じに調整されますが、多くの場合カスタマイズしていくと思いますので割愛します。slickの使い方~カスタマイズ編~初期状態だとあまりカッコよくないので、ここからは「見た目のカスタマイズ」と「動きのカスタマイズ」のやり方をご紹介します。slickのオプションについてslickの動きや、スライダー操作に関する見た目を管理するのがオプションです。かなりの種類があるので使用頻度が高そうなものをご紹介しておきます。オプション」などで調べてみるといいでしょう。オプションの使い方は以下の通りです。値」の形式で書く」「オプションを複数設定する場合は”,”でつなぐ」の3点です。//複数書く場合は「,」でつなぐ});これだけでは見た目が非常に残念な感じになるので、CSSも修正していきます。それぞれのパーツはデフォルトだと以下のように出力されるので、これを見つつカスタマイズしてみましょう!(バージョンによって多少の違いはあるので、うまくいかない場合は検証ツールなどでご確認ください。li”あたりで対応できるということです。ちなみにナビのカレント部分を修正したい場合は”.slick-active”を修正してください。このあたりを踏まえて修正してみると・・・なんということでしょう。スタイリッシュな感じになりましたね!slickの使い方~レベルアップ編~slickの基本的なカスタマイズ方法をご紹介しましたが、これからはより表現の幅を広げた応用編となります。サンプルのコードを用意しているので参考にして作ってみてください。前後の画像がちょい見えするスライダー(centerMode)このような前後の画像が見えるようなスライドはオプション「centerMode」を使用します。前後の画像がどのくらい見せるかを設定する「centerPadding」と一緒に使うのが一般的。'25%',});centerPaddingはpxなど固定値でも大丈夫ですし、%やvwなど相対的に設定することも可能です。2]した幅がスライダー内の画像の幅以上になると何も見えなくなるのでご注意ください。サイズがバラバラな画像を入れたスライダー(variableWidth)ここまではスライダー内で使用した画像のサイズを統一させていました。ところがサイズが違う画像を入れたい!ということだってあるかもしれません。そんなときに便利なのが「variableWidth」です。違う幅の画像を扱う場合は検討するとよいオプションです。上記のちょい見えするスライダーに幅が違う画像を足した状態で比較してみましょう。これがvariableWidth設定なしの状態です。画像と画像の間の余白がぐちゃぐちゃですね。幅がバラバラでもうまく真ん中に収めてくれていますね!なお、この状態だと画像が上辺揃えになっていて気持ち悪い!高さもうまく揃えたい!という場合はさらにカスタマイズが必要になります。それぞれ最新版で検証しました)でも見え方は変わらず、きれいに表示されるようになります!ちなみにブラウザの幅を変えても崩れません!ポイント1:高さをvwで指定するpxでも%でもなく、vwで設定してください。(emでもCSSによったらできるかもしれません)。pxだと画面幅を変えたときに崩れてしまう、%だと親要素の幅の影響を受けてしまうのでうまくいかない...となり、vwを設定すると画面幅の変更にも柔軟に対応できるようになります。例ではvwを30に設定していますがこれは1でも100でも大丈夫です。「高さがvwで指定されてある」ということが重要になります。ポイント2:最大高さと最小高さを設定する高さをvwで設定すると、画面幅によって高さが変化します。幅が広くなればなるほど画像の高さも高く、狭くなればなるほど小さくなります。なると見た目が非常に残念なことになるので、最大高さと最小高さを設定して、最低限の見た目を担保しようというわけです。レスポンシブ対応のスライダーにする(responsive)いよいよslickの強みであるレスポンシブ対応について解説していきます。オプションは「responsive」を使います。コードは以下のような感じで書きます。false,}},]});ちょっとややこしいですね・・・。値」という形式なのですが値の部分が配列になります。その中にブレイクポイントとその時の設定を書いていきます。‘slider’」と設定するとスライダーの幅で切り替えをすることもできます。slickの使い方~もっとレベルアップ編~ここまでカスタマイズできればかなりslickを使いこなせたといっても過言ではないかもしれませんが、まだまだslickはカスタマイズができるんです!ここでは「イベント」について解説して、実際の使用例をご紹介したいと思います。slickのイベントについて簡単にいうと「○○したときにXXする」という処理を指定できるのがslickのイベントであり、この○○のバリエーションをslickが用意してくれているというわけです。代表的なものをご紹介します。各スライドや画像ではなく、スライダー本体(サンプルだと.slider01ですね)を指定するのがミソのようです。});下記の例では画像が中央にくるときに大きくなる、という動きをつけています。);}切り替わる前のスライドのサイズを小さくしておき、切り替わると100%の大きさになるように調整しました。beforeChangeとafterChangeでそれぞれクラスの切り替えをしておかないと、画像が大きくなったままになるので注意が必要です。slickの使い方~まとめ~slickの使い方を導入からカスタマイズまで説明してきました。ホームページに地図を設定したい時ありますよね。使われるのがGoogleマップを埋め込む方法です。デザインされたフォームを設置したいとき、select要素(プルダウン・セレクトボックス)の装飾はcssだけではなかなかうまくいきません。