0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

メモ帳とMSEDGEだけでSlickを呼び出し、スライドショーを作りました。

Last updated at Posted at 2020-01-22

#プログラミングの学習環境の話
今日はJQuery(超便利なライブラリ)の学習の一環として、Slick(スライドショーを作成するのに便利なプラグイン)を使ってスライドショーを実装する予定だったのですが・・・
教科書『いちばんやさしいJavaScriptの教本』

・学習用PCでソフトをインストールしてはいけない
・プラグインダウンロードもだめっぽい

学習場所の上記のルールのせいでかなり!苦労しました。
そもそもプログラミングの学習をすることを想定したPCを使っていませんからね・・・
てか教本は推奨ソフトインストールさせる場面が多すぎ!!
てことで、WindowsPCに最初から入っているPCにある

・メモ帳
・Microsoft EDGE

だけで学習してる私が、JqueryとSlickを何とか呼び出して実装する話です。

#やり方の要約
・HTMLファイルのheadにSlickのCDN(プラグインやライブラリがアップロードされているところ)のURL(css)を貼り付ける。
・headにSlickのTheme。cssファイルがあるURLを貼り付ける(今回やってみたら失敗したので割愛)
・BODYタグ終了の直前にJqueryのURLを貼る
・その下にSlickのjsのURLを貼り付ける。
・jsファイルを呼び出す

#Head部分に貼り付けるURL

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
// 他に各自cssファイルとかGoogleフォントとか呼び出してくださいな

#Scriptタグのあたりに貼るURL

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
// この後JSファイルを読み込ませる

これであとは教本なり学習サイトなりに書いてあるSlickの使い方を見れば、各種ライブラリ、プラグインをダウンロードしたときと同じように使えるはずです。
但し体裁は整ってないけど・・・SlickのTheme.cssが読み込めないから・・・
上記URLを探すのに参考にした記事はこちらです、助かります。
https://qiita.com/wifeofvillon/items/0d1f6844533c7bed95c8

0
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?