編集履歴

質問編集履歴

修正

2019/10/29 03:12

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -328,13 +328,13 @@
 <div class="single-item">
- <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_boots_icow.jpg"></div>
+ <div><img src="img.jpg"></div>
- <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_pumps_icow.jpg"></div>
+ <div><img src="img.jpg"></div>
- <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_boots_icom.jpg"></div>
+ <div><img src="img.jpg"></div>
- <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_sabot_icom.jpg"></div>
+ <div><img src="img.jpg"></div>
 </div>

再記述等しました。

2019/10/29 03:12

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -293,3 +293,85 @@
 デベロッパーツールは
 「slick.min.js:17 Uncaught TypeError: a.type is not a function」となりました。
+【再々々記述】
+お仕事でお忙しい中、初心者の分不相応の愚問にお答えいただき本当にすみません。そして、ありがとうございます。
+```ここに言語を入力
+<html>
+<head>
+<link rel="stylesheet" href="css/slick.css">
+<link rel="stylesheet" href="css/slick-theme.css">
+</head>
+<body>
+<div class="single-item">
+ <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_boots_icow.jpg"></div>
+ <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_pumps_icow.jpg"></div>
+ <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_boots_icom.jpg"></div>
+ <div><img src="https://image.rakuten.co.jp/kodawarigurashi/cabinet/tool/kgind_sabot_icom.jpg"></div>
+</div>
+<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
+<script type="text/javascript">
+$(function() {
+	$('.single-item').slick();
+});
+</script>
+</body>
+</html>
+```
+お教えくださっている順番
+①jQuery本体js→ https://code.jquery.com/jquery-2.2.4.min.js
+②jQueryプラグイン本体js→ https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js
+③jQueryプラグイン利用の記述→ <script type="text/javascript">～</script>
+であっておりますでしょうか？

記述を修正しました。

2019/10/29 03:10

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -208,9 +208,11 @@
 －－－－－－－－－－－－－－－－－－－－－
-【再記述】
+【再再記述】
+◎順番を直しました。
-スクリプトをまず最低限のものにするのと、ご回答を参照しながら記述しました。
+◎変えるつもりがないのでjs/slick.min.js だけにしました。
@@ -222,51 +224,49 @@
 <head>
+<link rel="stylesheet" href="css/slick.css">
+<link rel="stylesheet" href="css/slick-theme.css">
+<script type="text/javascript">
+$(function() {
+	$('.single-item').slick();
+});
+</script>
+</head>
+<body>
+<div class="single-item">
+ <div><img src="img1.jpg"></div>
+ <div><img src="img2.jpg"></div>
+ <div><img src="img3.jpg"></div>
+ <div><img src="img4.jpg"></div>
+</div>
 <script src="js/jquery.js"></script>
-<link rel="stylesheet" href="css/slick.css">
-<link rel="stylesheet" href="css/slick-theme.css">
-<script type="text/javascript">
-$(function() {
-	$('.single-item').slick();
-});
-</script>
-</head>
-<body>
-<div class="single-item">
- <div><img src="img1.jpg"></div>
- <div><img src="img2.jpg"></div>
- <div><img src="img3.jpg"></div>
- <div><img src="img4.jpg"></div>
-</div>
-<script src="js/slick.js"></script>
+<script src="js/slick.min.js"></script>
-<script type="text/javascript" src="js/slick.min.js"></script>
 </body>
@@ -276,9 +276,19 @@
-別業務と並行作業中のため、プラグインをCDNにして試すのはまだやっていません。
+プラグインをCDNにというのは、
+こちら側でファイルを落としてリンクさせるのではなく、
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+のように、リンク先で記述するということの認識でよろしいでしょうか。
+まだやっていませんが、改めて確認です。
-（すみません、別業務終わり次第やります）
+（別業務終わり次第、着手やります）
 デベロッパーツールは

記述を追加しました。

2019/10/28 08:22

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -201,3 +201,85 @@
 （2回目の質問でやっと初心者マークなどが分かったようなレベルです、すみません）
 お手数ですが、ご回答よろしくお願いいたします。
+－－－－－－－－－－－－－－－－－－－－－
+【再記述】
+スクリプトをまず最低限のものにするのと、ご回答を参照しながら記述しました。
+```ここに言語を入力
+<html>
+<head>
+<script src="js/jquery.js"></script>
+<link rel="stylesheet" href="css/slick.css">
+<link rel="stylesheet" href="css/slick-theme.css">
+<script type="text/javascript">
+$(function() {
+	$('.single-item').slick();
+});
+</script>
+</head>
+<body>
+<div class="single-item">
+ <div><img src="img1.jpg"></div>
+ <div><img src="img2.jpg"></div>
+ <div><img src="img3.jpg"></div>
+ <div><img src="img4.jpg"></div>
+</div>
+<script src="js/slick.js"></script>
+<script type="text/javascript" src="js/slick.min.js"></script>
+</body>
+</html>
+```
+別業務と並行作業中のため、プラグインをCDNにして試すのはまだやっていません。
+（すみません、別業務終わり次第やります）
+デベロッパーツールは
+「slick.min.js:17 Uncaught TypeError: a.type is not a function」となりました。

質問内容を改めて書き直しました。

2019/10/28 07:52

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,7 @@
+【内容書き直しました】
 スマホサイトを制作中です。
@@ -22,25 +26,115 @@
+※先記述の＜CSS＞は＜Javascript＞の誤りでした。申し訳ありません。
-記述としては、
+該当記述の順番です。↓
+```ここに言語を入力
+<html>
-▼head上部に
+<head>
 <link rel="stylesheet" href="css/slick.css" />
 <link rel="stylesheet" href="css/slick-theme.css">
+<script>
+$(document).ready(function(){
+$('.slick').slick({
+  dots: true,
+  infinite: false,
+  speed: 300,
+  slidesToShow: 4,
+  slidesToScroll: 4,
+  responsive: [
+    {
+      breakpoint: 1024,
+      settings: {
+        slidesToShow: 3,
+        slidesToScroll: 3,
+        infinite: true,
+        dots: true
+      }
+    },
+    {
+      breakpoint: 600,
+      settings: {
+        slidesToShow: 2,
+        slidesToScroll: 2
+      }
+    },
+    {
+      breakpoint: 480,
+      settings: {
+        slidesToShow: 1,
+        slidesToScroll: 1
+      }
+    }
+    // You can unslick at a given breakpoint now by adding:
+    // settings: "unslick"
+    // instead of a settings object
+  ]
+});
+</script>
+</head>
+<body>
-（cssフォルダの中に収納しています）
+（看板と看板直下に検索入力ボックスとボタン）
-＜html＞
-```ここに言語を入力
 <div class="slick">
@@ -58,109 +152,23 @@
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
+<script src="js/slick.js"></script>
+</body>
+</html>
 ```
-＜CSS＞
-```ここに言語を入力
-<script>
-$(document).ready(function(){
-$('.slick').slick({
-  dots: true,
-  infinite: false,
-  speed: 300,
-  slidesToShow: 4,
-  slidesToScroll: 4,
-  responsive: [
-    {
-      breakpoint: 1024,
-      settings: {
-        slidesToShow: 3,
-        slidesToScroll: 3,
-        infinite: true,
-        dots: true
-      }
-    },
-    {
-      breakpoint: 600,
-      settings: {
-        slidesToShow: 2,
-        slidesToScroll: 2
-      }
-    },
-    {
-      breakpoint: 480,
-      settings: {
-        slidesToShow: 1,
-        slidesToScroll: 1
-      }
-    }
-    // You can unslick at a given breakpoint now by adding:
-    // settings: "unslick"
-    // instead of a settings object
-  ]
-});
-</script>
-```
-▼</body>のすぐ上に
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-<script src="js/slick.js"></script>
-を記述しています。
-これ以外の記述としては
-看板と看板直下に検索入力ボックスとボタンを入れているくらいなのですが、動作しません。
 img1～5が縦並び状態です。
@@ -168,6 +176,14 @@
+Chromeのデベロッパーツールのコンソールには
+「Uncaught SyntaxError: Unexpected end of input」の赤バツがでており
+ソースを見ると</script>に赤バツがついています。
 －－－－－－－－－－
 まず、ちゃんと動作するようにしたいです。
@@ -185,23 +201,3 @@
 （2回目の質問でやっと初心者マークなどが分かったようなレベルです、すみません）
 お手数ですが、ご回答よろしくお願いいたします。
-【追記】
-ご指摘ありがとうございます。追加の質問は削除いたしました。
-Chromeのデベロッパーツールのコンソールには
-「Uncaught SyntaxError: Unexpected end of input」の赤バツがでており
-ソースを見ると</script>に赤バツがついています。
-よろしくお願いいたします。

文章を一部削除したのと、情報を追加しました。

2019/10/28 05:34

投稿

tabaya

スコア10

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -176,20 +176,6 @@
-加えて、
-可能であればもう1つ質問させてください。
-同じページに、カルーセルメニューを複数設置したいのですが
-その場合は、前述における「responsive→slick」に変更したように
-class名分（設置個数分）スクリプトを貼りつけていけば良いのでしょうか？
-（画像の大きさなどが変わるのでclass名同様オプションも変更しますが、基本の記述は同じものをコピペする）
-それとも、bxSliderやOwl carousel みたいな別のものを用意した方がいいのでしょうか？
@@ -199,3 +185,23 @@
 （2回目の質問でやっと初心者マークなどが分かったようなレベルです、すみません）
 お手数ですが、ご回答よろしくお願いいたします。
+【追記】
+ご指摘ありがとうございます。追加の質問は削除いたしました。
+Chromeのデベロッパーツールのコンソールには
+「Uncaught SyntaxError: Unexpected end of input」の赤バツがでており
+ソースを見ると</script>に赤バツがついています。
+よろしくお願いいたします。