トップに関する質問 swiperでメニューボタンを押した時に、センター表示にしたい。

編集履歴

質問編集履歴

2020/02/25 14:34

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

2020/02/25 14:34

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

File without changes

2020/02/25 14:33

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -269,3 +269,115 @@
 }
 `````
+```````**JavaScript**
+``jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
+var galleryThumbs  = new Swiper('.swiper-navigation', {
+    spaceBetween: 2,
+    slidesPerView: 5,
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    grabCursor: true,
+    slideToClickedSlide: true,
+   freeMode: true,
+    on: {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
+          galleryThumbs.slideTo(this.clickedIndex);
+        }
+      }
+    }
+});
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
+コード
+```

2020/02/25 14:00

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -268,120 +268,4 @@
 }
-`````````**JavaScript**
-``jQuery(function($){
-$(document).ready(function(){
-window.addEventListener('DOMContentLoaded', function() {
-// グローバルメニューの固定
-var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
-var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
-jQuery( window ).on( 'scroll', function() {
-  if ( jQuery( this ).scrollTop() > navPos ) {
-    jQuery( 'body' ).css( 'padding-top', navHeight );
-    jQuery( '#global-nav' ).addClass( 'm_fixed' );
-  } else {
-    jQuery( 'body' ).css( 'padding-top', 0 );
-    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
-  }
-});
-var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 2,
-    slidesPerView: 5,
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    grabCursor: true,
-    slideToClickedSlide: true,
-   freeMode: true,
-    on: {
-      tap: function(event) {
-        // 選択されてないタブをタップしたら下のスライダーを動かす
-        if (this.clickedIndex !== galleryThumbs.activeIndex &&
-            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
-          ) {
-          galleryThumbs.slideTo(this.clickedIndex);
-        }
-      }
-    }
-});
-var galleryTop = new Swiper('.tab-contents', {
-     direction: 'horizontal',
-     loop: false,
-     slideToClickedSlide: true,
-     thumbs: {swiper: galleryThumbs},
-});
-});
-});
-});
-コード
-```
+`````
-```
-コード
-```

2020/02/25 14:00

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -268,6 +268,114 @@
 }
+`````````**JavaScript**
+``jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
+var galleryThumbs  = new Swiper('.swiper-navigation', {
+    spaceBetween: 2,
+    slidesPerView: 5,
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    grabCursor: true,
+    slideToClickedSlide: true,
+   freeMode: true,
+    on: {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
+          galleryThumbs.slideTo(this.clickedIndex);
+        }
+      }
+    }
+});
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
 コード
 ```

2020/02/25 13:58

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -84,113 +84,189 @@
-``````**JavaScript**
-``jQuery(function($){
-$(document).ready(function(){
-window.addEventListener('DOMContentLoaded', function() {
-// グローバルメニューの固定
-var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
-var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
-jQuery( window ).on( 'scroll', function() {
-  if ( jQuery( this ).scrollTop() > navPos ) {
-    jQuery( 'body' ).css( 'padding-top', navHeight );
-    jQuery( '#global-nav' ).addClass( 'm_fixed' );
-  } else {
-    jQuery( 'body' ).css( 'padding-top', 0 );
-    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
-  }
-});
-var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 2,
-    slidesPerView: 5,
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    grabCursor: true,
-    slideToClickedSlide: true,
-   freeMode: true,
-    on: {
-      tap: function(event) {
-        // 選択されてないタブをタップしたら下のスライダーを動かす
-        if (this.clickedIndex !== galleryThumbs.activeIndex &&
-            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
-          ) {
-          galleryThumbs.slideTo(this.clickedIndex);
-        }
-      }
-    }
-});
-var galleryTop = new Swiper('.tab-contents', {
-     direction: 'horizontal',
-     loop: false,
-     slideToClickedSlide: true,
-     thumbs: {swiper: galleryThumbs},
-});
-});
-});
-});
+body{
+}
+.contener1{
+width: auto;
+margin-left:2%;
+}
+global-nav {
+width: auto;
+height: 40px;
+margin-left:0%;
+background: #fff;
+width: 100%;
+z-index:999;
+}
+global-nav.m_fixed {
+left: 0;
+position: fixed;
+top: 0;
+}
+.swiper-container {
+margin: 0 auto 30px;
+}
+/* 下線*/
+.swiper-navigation {
+width: auto;
+border-bottom:2px solid #e6e6e6;
+}
+.swiper-slide-thumb-active {
+transform:translateX(-50%)
+opacity: .7;
+background-color: rgb(242, 56, 121) !important;
+border-bottom: 10px solid rgb(242, 56, 121) !important;
+color: rgb(250,250, 250) !important;
+font-weight: bold;
+}
+/* タブ*/
+.swiper-navigation .swiper-slide{
+/* widthに１００％を4で割る指定*/
+content:"";
+text-align: center;
+width: auto;
+height: 35px;
+line-height:40px;
+background-color: #a7f2e4;
+font-weight: bold;
+font-size: calc(70% + 0.12vw)
+}
+/* タブの色の濃さ　さわらない*/
+.tab-menu .swiper-slide {
+cursor: pointer;
+opacity: .7;
+}
+.swiper-navigation .swiper-wrapper{
+/*    タブからコンテンツの距離   */
+height:40px;
+}
+/*   コンテンツ   */
+.tab-contens{
+background-color: #dcdcdc;
+text-align: center;
+margin-left:2%;
+}
+.tab-contens div a{
+display: table;
+width: 100%;
+text-decoration: none;
+padding: 10px; !important;
+border-bottom:1px solid #000;
+color:#222; !important;
+text-align: left;
+line-height: 1.5em;
+font-size: 14px;
+}
 コード
@@ -198,196 +274,6 @@
 ```
-body{
-}
-.contener1{
-width: auto;
-margin-left:2%;
-}
-global-nav {
-width: auto;
-height: 40px;
-margin-left:0%;
-background: #fff;
-width: 100%;
-z-index:999;
-}
-global-nav.m_fixed {
-left: 0;
-position: fixed;
-top: 0;
-}
-.swiper-container {
-margin: 0 auto 30px;
-}
-/* 下線*/
-.swiper-navigation {
-width: auto;
-border-bottom:2px solid #e6e6e6;
-}
-.swiper-slide-thumb-active {
-transform:translateX(-50%)
-opacity: .7;
-background-color: rgb(242, 56, 121) !important;
-border-bottom: 10px solid rgb(242, 56, 121) !important;
-color: rgb(250,250, 250) !important;
-font-weight: bold;
-}
-/* タブ*/
-.swiper-navigation .swiper-slide{
-/* widthに１００％を4で割る指定*/
-content:"";
-text-align: center;
-width: auto;
-height: 35px;
-line-height:40px;
-background-color: #a7f2e4;
-font-weight: bold;
-font-size: calc(70% + 0.12vw)
-}
-/* タブの色の濃さ　さわらない*/
-.tab-menu .swiper-slide {
-cursor: pointer;
-opacity: .7;
-}
-.swiper-navigation .swiper-wrapper{
-/*    タブからコンテンツの距離   */
-height:40px;
-}
-/*   コンテンツ   */
-.tab-contens{
-background-color: #dcdcdc;
-text-align: center;
-margin-left:2%;
-}
-.tab-contens div a{
-display: table;
-width: 100%;
-text-decoration: none;
-padding: 10px; !important;
-border-bottom:1px solid #000;
-color:#222; !important;
-text-align: left;
-line-height: 1.5em;
-font-size: 14px;
-}
 コード
 ```
-```
-コード
-```

2020/02/25 13:56

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -84,7 +84,119 @@
-```**css**
+``````**JavaScript**
+``jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
+var galleryThumbs  = new Swiper('.swiper-navigation', {
+    spaceBetween: 2,
+    slidesPerView: 5,
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    grabCursor: true,
+    slideToClickedSlide: true,
+   freeMode: true,
+    on: {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
+          galleryThumbs.slideTo(this.clickedIndex);
+        }
+      }
+    }
+});
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
+コード
+```
+```
@@ -96,47 +208,45 @@
 .contener1{
-  width: auto;
+width: auto;
-  margin-left:2%;
+margin-left:2%;
-}
+}
-#global-nav {
+global-nav {
-   width: auto;
+width: auto;
-  height: 40px;
+height: 40px;
-  margin-left:0%;
+margin-left:0%;
-  background: #fff;
+background: #fff;
-  width: 100%;
+width: 100%;
-  z-index:999;
+z-index:999;
-}
+}
-#global-nav.m_fixed {
+global-nav.m_fixed {
-  left: 0;
+left: 0;
-  position: fixed;
+position: fixed;
-  top: 0;
+top: 0;
 }
@@ -144,7 +254,7 @@
 .swiper-container {
-   margin: 0 auto 30px;
+margin: 0 auto 30px;
 }
@@ -154,33 +264,31 @@
 .swiper-navigation {
-   width: auto;
+width: auto;
-   border-bottom:2px solid #e6e6e6;
+border-bottom:2px solid #e6e6e6;
-}
+}
- .swiper-slide-thumb-active {
+.swiper-slide-thumb-active {
-　transform:translateX(-50%)
+transform:translateX(-50%)
-   opacity: .7;
+opacity: .7;
-   background-color: rgb(242, 56, 121) !important;
+background-color: rgb(242, 56, 121) !important;
-   border-bottom: 10px solid rgb(242, 56, 121) !important;
+border-bottom: 10px solid rgb(242, 56, 121) !important;
-   color: rgb(250,250, 250) !important;
+color: rgb(250,250, 250) !important;
-   font-weight: bold;
+font-weight: bold;
-}
+}
@@ -188,25 +296,25 @@
 .swiper-navigation .swiper-slide{
-  /* widthに１００％を4で割る指定*/
+/* widthに１００％を4で割る指定*/
-　content:"";
+content:"";
-  text-align: center;
+text-align: center;
-  width: auto;
+width: auto;
-  height: 35px;
+height: 35px;
-  line-height:40px;
+line-height:40px;
-  background-color: #a7f2e4;
+background-color: #a7f2e4;
-  font-weight: bold;
+font-weight: bold;
-  font-size: calc(70% + 0.12vw)
+font-size: calc(70% + 0.12vw)
 }
@@ -216,9 +324,9 @@
 .tab-menu .swiper-slide {
-  cursor: pointer;
+cursor: pointer;
-  opacity: .7;
+opacity: .7;
 }
@@ -230,11 +338,9 @@
 /*    タブからコンテンツの距離   */
-  height:40px;
+height:40px;
-}
+}
@@ -244,156 +350,44 @@
 .tab-contens{
-    background-color: #dcdcdc;
+background-color: #dcdcdc;
-    text-align: center;
+text-align: center;
-    margin-left:2%;
+margin-left:2%;
-}
+}
 .tab-contens div a{
-    display: table;
+display: table;
-    width: 100%;
+width: 100%;
-    text-decoration: none;
+text-decoration: none;
-    padding: 10px; !important;
+padding: 10px; !important;
-    border-bottom:1px solid #000;
+border-bottom:1px solid #000;
-    color:#222; !important;
+color:#222; !important;
-    text-align: left;
+text-align: left;
-    line-height: 1.5em;
+line-height: 1.5em;
-    font-size: 14px;
+font-size: 14px;
-}
+}
-``````**JavaScript**
-``jQuery(function($){
-$(document).ready(function(){
-window.addEventListener('DOMContentLoaded', function() {
-// グローバルメニューの固定
-var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
-var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
-jQuery( window ).on( 'scroll', function() {
-  if ( jQuery( this ).scrollTop() > navPos ) {
-    jQuery( 'body' ).css( 'padding-top', navHeight );
-    jQuery( '#global-nav' ).addClass( 'm_fixed' );
-  } else {
-    jQuery( 'body' ).css( 'padding-top', 0 );
-    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
-  }
-});
-var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 2,
-    slidesPerView: 5,
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    grabCursor: true,
-    slideToClickedSlide: true,
-   freeMode: true,
-    on: {
-      tap: function(event) {
-        // 選択されてないタブをタップしたら下のスライダーを動かす
-        if (this.clickedIndex !== galleryThumbs.activeIndex &&
-            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
-          ) {
-          galleryThumbs.slideTo(this.clickedIndex);
-        }
-      }
-    }
-});
-var galleryTop = new Swiper('.tab-contents', {
-     direction: 'horizontal',
-     loop: false,
-     slideToClickedSlide: true,
-     thumbs: {swiper: galleryThumbs},
-});
-});
-});
-});
 コード
 ```
+```
 コード
 ```
-コード
-```

2020/02/25 13:55

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -82,7 +82,203 @@
   </div>
+```**css**
+body{
+}
+.contener1{
+  width: auto;
+  margin-left:2%;
+}
+#global-nav {
+   width: auto;
+  height: 40px;
+  margin-left:0%;
+  background: #fff;
+  width: 100%;
+  z-index:999;
+}
+#global-nav.m_fixed {
+  left: 0;
+  position: fixed;
+  top: 0;
+}
+.swiper-container {
+   margin: 0 auto 30px;
+}
+/* 下線*/
+.swiper-navigation {
+   width: auto;
+   border-bottom:2px solid #e6e6e6;
+}
+ .swiper-slide-thumb-active {
+　transform:translateX(-50%)
+   opacity: .7;
+   background-color: rgb(242, 56, 121) !important;
+   border-bottom: 10px solid rgb(242, 56, 121) !important;
+   color: rgb(250,250, 250) !important;
+   font-weight: bold;
+}
+/* タブ*/
+.swiper-navigation .swiper-slide{
+  /* widthに１００％を4で割る指定*/
+　content:"";
+  text-align: center;
+  width: auto;
+  height: 35px;
+  line-height:40px;
+  background-color: #a7f2e4;
+  font-weight: bold;
+  font-size: calc(70% + 0.12vw)
+}
+/* タブの色の濃さ　さわらない*/
+.tab-menu .swiper-slide {
+  cursor: pointer;
+  opacity: .7;
+}
+.swiper-navigation .swiper-wrapper{
+/*    タブからコンテンツの距離   */
+  height:40px;
+}
+/*   コンテンツ   */
+.tab-contens{
+    background-color: #dcdcdc;
+    text-align: center;
+    margin-left:2%;
+}
+.tab-contens div a{
+    display: table;
+    width: 100%;
+    text-decoration: none;
+    padding: 10px; !important;
+    border-bottom:1px solid #000;
+    color:#222; !important;
+    text-align: left;
+    line-height: 1.5em;
+    font-size: 14px;
+}
-```**JavaScript**
+``````**JavaScript**
@@ -190,206 +386,10 @@
 });
-```**css**
-body{
-}
-.contener1{
-  width: auto;
-  margin-left:2%;
-}
-#global-nav {
-   width: auto;
-  height: 40px;
-  margin-left:0%;
-  background: #fff;
-  width: 100%;
-  z-index:999;
-}
-#global-nav.m_fixed {
-  left: 0;
-  position: fixed;
-  top: 0;
-}
-.swiper-container {
-   margin: 0 auto 30px;
-}
-/* 下線*/
-.swiper-navigation {
-   width: auto;
-   border-bottom:2px solid #e6e6e6;
-}
- .swiper-slide-thumb-active {
-　transform:translateX(-50%)
-   opacity: .7;
-   background-color: rgb(242, 56, 121) !important;
-   border-bottom: 10px solid rgb(242, 56, 121) !important;
-   color: rgb(250,250, 250) !important;
-   font-weight: bold;
-}
-/* タブ*/
-.swiper-navigation .swiper-slide{
-  /* widthに１００％を4で割る指定*/
-　content:"";
-  text-align: center;
-  width: auto;
-  height: 35px;
-  line-height:40px;
-  background-color: #a7f2e4;
-  font-weight: bold;
-  font-size: calc(70% + 0.12vw)
-}
-/* タブの色の濃さ　さわらない*/
-.tab-menu .swiper-slide {
-  cursor: pointer;
-  opacity: .7;
-}
-```ここに言語を入力
 コード
 ```
-.swiper-navigation .swiper-wrapper{
-/*    タブからコンテンツの距離   */
-  height:40px;
-}
-/*   コンテンツ   */
-.tab-contens{
-    background-color: #dcdcdc;
-    text-align: center;
-    margin-left:2%;
-}
-.tab-contens div a{
-    display: table;
-    width: 100%;
-    text-decoration: none;
-    padding: 10px; !important;
-    border-bottom:1px solid #000;
-    color:#222; !important;
-    text-align: left;
-    line-height: 1.5em;
-    font-size: 14px;
-}
 コード
 ```

2020/02/25 13:51

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,129 +14,381 @@
-4番目〜6番目を押した時にセンターに
+4番目から6番目を押した時にセンターに表示したいです。
-移動したい。
+今現地のものです。
+**html**
+```<div class="container1">
+<nav id="global-nav">
+ <div class="swiper-container swiper-navigation">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
+   </div>
+    <div class="swiper-pagination"></div>
+     </div>
+  </div>
+  <div class="swiper-container tab-contents">
+     <div class="swiper-wrapper">
+      <div class="swiper-slide">ボックス9</div>
+　　<div class="swiper-slide">ボックス10</div>
+      <div class="swiper-slide">ボックス11</div>
+      <div class="swiper-slide">ボックス12</div>
+      <div class="swiper-slide">ボックス13</div>
+　　　<div class="swiper-slide">ボックス14</div>
+      <div class="swiper-slide">ボックス15</div>
+      <div class="swiper-slide">ボックス16</div>
+    </div>
+  </div>
+```**JavaScript**
+``jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
+var galleryThumbs  = new Swiper('.swiper-navigation', {
+    spaceBetween: 2,
+    slidesPerView: 5,
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    grabCursor: true,
+    slideToClickedSlide: true,
+   freeMode: true,
+    on: {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
+          galleryThumbs.slideTo(this.clickedIndex);
+        }
+      }
+    }
+});
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
+```**css**
+body{
+}
+.contener1{
+  width: auto;
+  margin-left:2%;
+}
+#global-nav {
+   width: auto;
+  height: 40px;
+  margin-left:0%;
+  background: #fff;
+  width: 100%;
+  z-index:999;
+}
+#global-nav.m_fixed {
+  left: 0;
+  position: fixed;
+  top: 0;
+}
+.swiper-container {
+   margin: 0 auto 30px;
+}
+/* 下線*/
+.swiper-navigation {
+   width: auto;
+   border-bottom:2px solid #e6e6e6;
+}
+ .swiper-slide-thumb-active {
+　transform:translateX(-50%)
+   opacity: .7;
+   background-color: rgb(242, 56, 121) !important;
+   border-bottom: 10px solid rgb(242, 56, 121) !important;
+   color: rgb(250,250, 250) !important;
+   font-weight: bold;
+}
+/* タブ*/
+.swiper-navigation .swiper-slide{
+  /* widthに１００％を4で割る指定*/
+　content:"";
+  text-align: center;
+  width: auto;
+  height: 35px;
+  line-height:40px;
+  background-color: #a7f2e4;
+  font-weight: bold;
+  font-size: calc(70% + 0.12vw)
+}
+/* タブの色の濃さ　さわらない*/
+.tab-menu .swiper-slide {
+  cursor: pointer;
+  opacity: .7;
+}
+```ここに言語を入力
+コード
 ```
-<div class="container">
-        <!-- Swiper -->
-        <div class="swiper-container tab-menu">
-            <div class="swiper-wrapper">
-                <div class="swiper-slide">トップ</div>
-                <div class="swiper-slide">ランキング</div>
-                <div class="swiper-slide">国内</div>
-                <div class="swiper-slide">エンタメ</div>
-                <div class="swiper-slide">スポーツ</div>
-                <div class="swiper-slide">経済</div>
-              <div class="swiper-slide">グルメ</div>
-              <div class="swiper-slide">sns
-</div>
-            </div>
-        </div>
-        <div class="swiper-container tab-contents">
-            <div class="swiper-wrapper">
-                <div class="swiper-slide">トップ</div>
-                <div class="swiper-slide">ランキング</div>
-                <div class="swiper-slide">国内</div>
-                <div class="swiper-slide">エンタメ</div>
-                <div class="swiper-slide">スポーツ</div>
-                <div class="swiper-slide">経済</div>
-              <div class="swiper-slide">グルメ</div>
-              <div class="swiper-slide">sns
-</div>
-            </div>
-        </div>
-</div>
-```<script>
-  var galleryThumbs = new Swiper('.tab-menu', {
-    spaceBetween: 20,
-    slidesPerView: 'auto',
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    slideActiveClass: 'swiper-slide-active'
-  });
-  galleryThumbs.on('tap', function () {
-    var current = galleryTop.activeIndex;
-    galleryThumbs.slideTo(current, 500, true);
-  });
-  var galleryTop = new Swiper('.tab-contents', {
-    autoHeight: true,
-    thumbs: {
-      swiper: galleryThumbs
-    }
-});
-</script>
-```ここに言語を入力
+.swiper-navigation .swiper-wrapper{
+/*    タブからコンテンツの距離   */
+  height:40px;
+}
+/*   コンテンツ   */
+.tab-contens{
+    background-color: #dcdcdc;
+    text-align: center;
+    margin-left:2%;
+}
+.tab-contens div a{
+    display: table;
+    width: 100%;
+    text-decoration: none;
+    padding: 10px; !important;
+    border-bottom:1px solid #000;
+    color:#222; !important;
+    text-align: left;
+    line-height: 1.5em;
+    font-size: 14px;
+}
 コード
@@ -145,443 +397,3 @@
 コード
 ```
-container {
-   max-width: 375px;
-   margin: 30px auto;
-   border: 1px solid #CCC;
-}
-.swiper-container {
-   margin: 0 auto 30px;
-}
-.tab-menu {
-   border-bottom: 1px solid #CCC;
-}
-.tab-menu .swiper-slide {
-   width: auto;
-   padding: 10px 0;
-}
-.tab-contents {
-   margin: 30px auto;
-}
-.swiper-slide-thumb-active {
-   border-bottom: 2px solid rgb(9, 8, 53);
-   color: rgb(9, 8, 53) !important;
-   font-weight: bold;
-}
-```
-よろしくお願いします。
-今現地のものです。
-**html**
-```<div class="container1">
-<nav id="global-nav">
- <div class="swiper-container swiper-navigation">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
-   </div>
-    <div class="swiper-pagination"></div>
-     </div>
-  </div>
-  <div class="swiper-container tab-contents">
-     <div class="swiper-wrapper">
-      <div class="swiper-slide">ボックス9</div>
-　　<div class="swiper-slide">ボックス10</div>
-      <div class="swiper-slide">ボックス11</div>
-      <div class="swiper-slide">ボックス12</div>
-      <div class="swiper-slide">ボックス13</div>
-　　　<div class="swiper-slide">ボックス14</div>
-      <div class="swiper-slide">ボックス15</div>
-      <div class="swiper-slide">ボックス16</div>
-    </div>
-  </div>
-```**JavaScript**
-``jQuery(function($){
-$(document).ready(function(){
-window.addEventListener('DOMContentLoaded', function() {
-// グローバルメニューの固定
-var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
-var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
-jQuery( window ).on( 'scroll', function() {
-  if ( jQuery( this ).scrollTop() > navPos ) {
-    jQuery( 'body' ).css( 'padding-top', navHeight );
-    jQuery( '#global-nav' ).addClass( 'm_fixed' );
-  } else {
-    jQuery( 'body' ).css( 'padding-top', 0 );
-    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
-  }
-});
-var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 2,
-    slidesPerView: 5,
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    grabCursor: true,
-    slideToClickedSlide: true,
-   freeMode: true,
-    on: {
-      tap: function(event) {
-        // 選択されてないタブをタップしたら下のスライダーを動かす
-        if (this.clickedIndex !== galleryThumbs.activeIndex &&
-            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
-          ) {
-          galleryThumbs.slideTo(this.clickedIndex);
-        }
-      }
-    }
-});
-var galleryTop = new Swiper('.tab-contents', {
-     direction: 'horizontal',
-     loop: false,
-     slideToClickedSlide: true,
-     thumbs: {swiper: galleryThumbs},
-});
-});
-});
-});
-```**css**
-body{
-}
-.contener1{
-  width: auto;
-  margin-left:2%;
-}
-#global-nav {
-   width: auto;
-  height: 40px;
-  margin-left:0%;
-  background: #fff;
-  width: 100%;
-  z-index:999;
-}
-#global-nav.m_fixed {
-  left: 0;
-  position: fixed;
-  top: 0;
-}
-.swiper-container {
-   margin: 0 auto 30px;
-}
-/* 下線*/
-.swiper-navigation {
-   width: auto;
-   border-bottom:2px solid #e6e6e6;
-}
- .swiper-slide-thumb-active {
-　transform:translateX(-50%)
-   opacity: .7;
-   background-color: rgb(242, 56, 121) !important;
-   border-bottom: 10px solid rgb(242, 56, 121) !important;
-   color: rgb(250,250, 250) !important;
-   font-weight: bold;
-}
-/* タブ*/
-.swiper-navigation .swiper-slide{
-  /* widthに１００％を4で割る指定*/
-　content:"";
-  text-align: center;
-  width: auto;
-  height: 35px;
-  line-height:40px;
-  background-color: #a7f2e4;
-  font-weight: bold;
-  font-size: calc(70% + 0.12vw)
-}
-/* タブの色の濃さ　さわらない*/
-.tab-menu .swiper-slide {
-  cursor: pointer;
-  opacity: .7;
-}
-```ここに言語を入力
-コード
-```
-.swiper-navigation .swiper-wrapper{
-/*    タブからコンテンツの距離   */
-  height:40px;
-}
-/*   コンテンツ   */
-.tab-contens{
-    background-color: #dcdcdc;
-    text-align: center;
-    margin-left:2%;
-}
-.tab-contens div a{
-    display: table;
-    width: 100%;
-    text-decoration: none;
-    padding: 10px; !important;
-    border-bottom:1px solid #000;
-    color:#222; !important;
-    text-align: left;
-    line-height: 1.5em;
-    font-size: 14px;
-}
-コード
-```
-コード
-```

2020/02/25 13:47

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,8 @@
+```ここに言語を入力
+コード
-メニュータブを8個つくって
+```メニュータブを8個つくって
@@ -94,9 +98,7 @@
-<script>
+```<script>
   var galleryThumbs = new Swiper('.tab-menu', {
@@ -134,6 +136,16 @@
 </script>
+```ここに言語を入力
+コード
+```
+コード
+```
@@ -258,15 +270,11 @@
   </div>
-**JavaScript**
+```**JavaScript**
-```jQuery(function($){
+``jQuery(function($){
 $(document).ready(function(){
@@ -372,7 +380,7 @@
-**css**
+```**css**
@@ -418,16 +426,6 @@
 #global-nav.m_fixed {
   left: 0;
@@ -440,18 +438,6 @@
 .swiper-container {
    margin: 0 auto 30px;
@@ -522,10 +508,6 @@
 /* タブの色の濃さ　さわらない*/
 .tab-menu .swiper-slide {
@@ -595,3 +577,11 @@
     font-size: 14px;
 }
+コード
+```
+コード
+```

2020/02/25 13:43

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -96,464 +96,452 @@
+<script>
+  var galleryThumbs = new Swiper('.tab-menu', {
+    spaceBetween: 20,
+    slidesPerView: 'auto',
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    slideActiveClass: 'swiper-slide-active'
+  });
+  galleryThumbs.on('tap', function () {
+    var current = galleryTop.activeIndex;
+    galleryThumbs.slideTo(current, 500, true);
+  });
+  var galleryTop = new Swiper('.tab-contents', {
+    autoHeight: true,
+    thumbs: {
+      swiper: galleryThumbs
+    }
+});
+</script>
+container {
+   max-width: 375px;
+   margin: 30px auto;
+   border: 1px solid #CCC;
+}
+.swiper-container {
+   margin: 0 auto 30px;
+}
+.tab-menu {
+   border-bottom: 1px solid #CCC;
+}
+.tab-menu .swiper-slide {
+   width: auto;
+   padding: 10px 0;
+}
+.tab-contents {
+   margin: 30px auto;
+}
+.swiper-slide-thumb-active {
+   border-bottom: 2px solid rgb(9, 8, 53);
+   color: rgb(9, 8, 53) !important;
+   font-weight: bold;
+}
 ```
+よろしくお願いします。
+今現地のものです。
+**html**
+```<div class="container1">
+<nav id="global-nav">
+ <div class="swiper-container swiper-navigation">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
-```<script>
+   </div>
+    <div class="swiper-pagination"></div>
+     </div>
+  </div>
+  <div class="swiper-container tab-contents">
+     <div class="swiper-wrapper">
+      <div class="swiper-slide">ボックス9</div>
+　　<div class="swiper-slide">ボックス10</div>
+      <div class="swiper-slide">ボックス11</div>
+      <div class="swiper-slide">ボックス12</div>
+      <div class="swiper-slide">ボックス13</div>
+　　　<div class="swiper-slide">ボックス14</div>
+      <div class="swiper-slide">ボックス15</div>
+      <div class="swiper-slide">ボックス16</div>
+    </div>
+  </div>
+**JavaScript**
+```jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
-  var galleryThumbs = new Swiper('.tab-menu', {
+var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 20,
+    spaceBetween: 2,
-    slidesPerView: 'auto',
+    slidesPerView: 5,
     watchSlidesVisibility: true,
     watchSlidesProgress: true,
+    grabCursor: true,
-    slideActiveClass: 'swiper-slide-active'
+    slideToClickedSlide: true,
+   freeMode: true,
-  });
+    on: {
-  galleryThumbs.on('tap', function () {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
-    var current = galleryTop.activeIndex;
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
-    galleryThumbs.slideTo(current, 500, true);
+          galleryThumbs.slideTo(this.clickedIndex);
-  });
+        }
-  var galleryTop = new Swiper('.tab-contents', {
-    autoHeight: true,
-    thumbs: {
+      }
-      swiper: galleryThumbs
     }
 });
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
+**css**
+body{
+}
+.contener1{
+  width: auto;
+  margin-left:2%;
+}
+#global-nav {
+   width: auto;
+  height: 40px;
+  margin-left:0%;
+  background: #fff;
+  width: 100%;
+  z-index:999;
+}
+#global-nav.m_fixed {
+  left: 0;
+  position: fixed;
+  top: 0;
+}
+.swiper-container {
+   margin: 0 auto 30px;
+}
-</script>
+/* 下線*/
+.swiper-navigation {
+   width: auto;
+   border-bottom:2px solid #e6e6e6;
+}
+ .swiper-slide-thumb-active {
+　transform:translateX(-50%)
+   opacity: .7;
+   background-color: rgb(242, 56, 121) !important;
+   border-bottom: 10px solid rgb(242, 56, 121) !important;
+   color: rgb(250,250, 250) !important;
+   font-weight: bold;
+}
+/* タブ*/
+.swiper-navigation .swiper-slide{
+  /* widthに１００％を4で割る指定*/
+　content:"";
+  text-align: center;
+  width: auto;
+  height: 35px;
+  line-height:40px;
+  background-color: #a7f2e4;
+  font-weight: bold;
+  font-size: calc(70% + 0.12vw)
+}
+/* タブの色の濃さ　さわらない*/
+.tab-menu .swiper-slide {
+  cursor: pointer;
+  opacity: .7;
+}
+```ここに言語を入力
+コード
 ```
-```.container {
-   max-width: 375px;
-   margin: 30px auto;
-   border: 1px solid #CCC;
-}
-.swiper-container {
-   margin: 0 auto 30px;
-}
-.tab-menu {
-   border-bottom: 1px solid #CCC;
-}
-.tab-menu .swiper-slide {
-   width: auto;
-   padding: 10px 0;
-}
-.tab-contents {
-   margin: 30px auto;
-}
-.swiper-slide-thumb-active {
-   border-bottom: 2px solid rgb(9, 8, 53);
-   color: rgb(9, 8, 53) !important;
-   font-weight: bold;
-}
-```
-よろしくお願いします。
-今現地のものです。
-**html**
-```<div class="container1">
-<nav id="global-nav">
- <div class="swiper-container swiper-navigation">
-    <div class="swiper-wrapper">
-      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
-      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
-   </div>
-    <div class="swiper-pagination"></div>
-     </div>
-  </div>
-  <div class="swiper-container tab-contents">
-     <div class="swiper-wrapper">
-      <div class="swiper-slide">ボックス9</div>
-　　<div class="swiper-slide">ボックス10</div>
-      <div class="swiper-slide">ボックス11</div>
-      <div class="swiper-slide">ボックス12</div>
-      <div class="swiper-slide">ボックス13</div>
-　　　<div class="swiper-slide">ボックス14</div>
-      <div class="swiper-slide">ボックス15</div>
-      <div class="swiper-slide">ボックス16</div>
-    </div>
-  </div>
-**JavaScript**
-```jQuery(function($){
-$(document).ready(function(){
-window.addEventListener('DOMContentLoaded', function() {
-// グローバルメニューの固定
-var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
-var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
-jQuery( window ).on( 'scroll', function() {
-  if ( jQuery( this ).scrollTop() > navPos ) {
-    jQuery( 'body' ).css( 'padding-top', navHeight );
-    jQuery( '#global-nav' ).addClass( 'm_fixed' );
-  } else {
-    jQuery( 'body' ).css( 'padding-top', 0 );
-    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
-  }
-});
-var galleryThumbs  = new Swiper('.swiper-navigation', {
-    spaceBetween: 2,
-    slidesPerView: 5,
-    watchSlidesVisibility: true,
-    watchSlidesProgress: true,
-    grabCursor: true,
-    slideToClickedSlide: true,
-   freeMode: true,
-    on: {
-      tap: function(event) {
-        // 選択されてないタブをタップしたら下のスライダーを動かす
-        if (this.clickedIndex !== galleryThumbs.activeIndex &&
-            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
-          ) {
-          galleryThumbs.slideTo(this.clickedIndex);
-        }
-      }
-    }
-});
-var galleryTop = new Swiper('.tab-contents', {
-     direction: 'horizontal',
-     loop: false,
-     slideToClickedSlide: true,
-     thumbs: {swiper: galleryThumbs},
-});
-});
-});
-});
-**css**
-body{
-}
-.contener1{
-  width: auto;
-  margin-left:2%;
-}
-#global-nav {
-   width: auto;
-  height: 40px;
-  margin-left:0%;
-  background: #fff;
-  width: 100%;
-  z-index:999;
-}
-#global-nav.m_fixed {
-  left: 0;
-  position: fixed;
-  top: 0;
-}
-.swiper-container {
-   margin: 0 auto 30px;
-}
-/* 下線*/
-.swiper-navigation {
-   width: auto;
-   border-bottom:2px solid #e6e6e6;
-}
- .swiper-slide-thumb-active {
-　transform:translateX(-50%)
-   opacity: .7;
-   background-color: rgb(242, 56, 121) !important;
-   border-bottom: 10px solid rgb(242, 56, 121) !important;
-   color: rgb(250,250, 250) !important;
-   font-weight: bold;
-}
-/* タブ*/
-.swiper-navigation .swiper-slide{
-  /* widthに１００％を4で割る指定*/
-　content:"";
-  text-align: center;
-  width: auto;
-  height: 35px;
-  line-height:40px;
-  background-color: #a7f2e4;
-  font-weight: bold;
-  font-size: calc(70% + 0.12vw)
-}
-/* タブの色の濃さ　さわらない*/
-.tab-menu .swiper-slide {
-  cursor: pointer;
-  opacity: .7;
-}
-```ここに言語を入力
-コード
-```
 .swiper-navigation .swiper-wrapper{

2020/02/25 13:38

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -203,3 +203,407 @@
 よろしくお願いします。
+今現地のものです。
+**html**
+```<div class="container1">
+<nav id="global-nav">
+ <div class="swiper-container swiper-navigation">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide" data-type="article　active" data-tag="ボックス1"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス2"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス3"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス4"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス5"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス6"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス7"></div>
+      <div class="swiper-slide" data-type="article" data-tag="ボックス8"></div>
+   </div>
+    <div class="swiper-pagination"></div>
+     </div>
+  </div>
+  <div class="swiper-container tab-contents">
+     <div class="swiper-wrapper">
+      <div class="swiper-slide">ボックス9</div>
+　　<div class="swiper-slide">ボックス10</div>
+      <div class="swiper-slide">ボックス11</div>
+      <div class="swiper-slide">ボックス12</div>
+      <div class="swiper-slide">ボックス13</div>
+　　　<div class="swiper-slide">ボックス14</div>
+      <div class="swiper-slide">ボックス15</div>
+      <div class="swiper-slide">ボックス16</div>
+    </div>
+  </div>
+**JavaScript**
+```jQuery(function($){
+$(document).ready(function(){
+window.addEventListener('DOMContentLoaded', function() {
+// グローバルメニューの固定
+var navPos = jQuery( '#global-nav' ).offset().top; // グローバルメニューの位置
+var navHeight = jQuery( '#global-nav' ).outerHeight(); // グローバルメニューの高さ
+jQuery( window ).on( 'scroll', function() {
+  if ( jQuery( this ).scrollTop() > navPos ) {
+    jQuery( 'body' ).css( 'padding-top', navHeight );
+    jQuery( '#global-nav' ).addClass( 'm_fixed' );
+  } else {
+    jQuery( 'body' ).css( 'padding-top', 0 );
+    jQuery( '#global-nav' ).removeClass( 'm_fixed' );
+  }
+});
+var galleryThumbs  = new Swiper('.swiper-navigation', {
+    spaceBetween: 2,
+    slidesPerView: 5,
+    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
+    grabCursor: true,
+    slideToClickedSlide: true,
+   freeMode: true,
+    on: {
+      tap: function(event) {
+        // 選択されてないタブをタップしたら下のスライダーを動かす
+        if (this.clickedIndex !== galleryThumbs.activeIndex &&
+            $(this.clickedSlide).data('tag') !== $(galleryThumbs.slides[galleryThumbs.activeIndex]).data('tag')
+          ) {
+          galleryThumbs.slideTo(this.clickedIndex);
+        }
+      }
+    }
+});
+var galleryTop = new Swiper('.tab-contents', {
+     direction: 'horizontal',
+     loop: false,
+     slideToClickedSlide: true,
+     thumbs: {swiper: galleryThumbs},
+});
+});
+});
+});
+**css**
+body{
+}
+.contener1{
+  width: auto;
+  margin-left:2%;
+}
+#global-nav {
+   width: auto;
+  height: 40px;
+  margin-left:0%;
+  background: #fff;
+  width: 100%;
+  z-index:999;
+}
+#global-nav.m_fixed {
+  left: 0;
+  position: fixed;
+  top: 0;
+}
+.swiper-container {
+   margin: 0 auto 30px;
+}
+/* 下線*/
+.swiper-navigation {
+   width: auto;
+   border-bottom:2px solid #e6e6e6;
+}
+ .swiper-slide-thumb-active {
+　transform:translateX(-50%)
+   opacity: .7;
+   background-color: rgb(242, 56, 121) !important;
+   border-bottom: 10px solid rgb(242, 56, 121) !important;
+   color: rgb(250,250, 250) !important;
+   font-weight: bold;
+}
+/* タブ*/
+.swiper-navigation .swiper-slide{
+  /* widthに１００％を4で割る指定*/
+　content:"";
+  text-align: center;
+  width: auto;
+  height: 35px;
+  line-height:40px;
+  background-color: #a7f2e4;
+  font-weight: bold;
+  font-size: calc(70% + 0.12vw)
+}
+/* タブの色の濃さ　さわらない*/
+.tab-menu .swiper-slide {
+  cursor: pointer;
+  opacity: .7;
+}
+```ここに言語を入力
+コード
+```
+.swiper-navigation .swiper-wrapper{
+/*    タブからコンテンツの距離   */
+  height:40px;
+}
+/*   コンテンツ   */
+.tab-contens{
+    background-color: #dcdcdc;
+    text-align: center;
+    margin-left:2%;
+}
+.tab-contens div a{
+    display: table;
+    width: 100%;
+    text-decoration: none;
+    padding: 10px; !important;
+    border-bottom:1px solid #000;
+    color:#222; !important;
+    text-align: left;
+    line-height: 1.5em;
+    font-size: 14px;
+}

2020/02/25 13:36

投稿

kenshin

スコア7

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,4 +1,4 @@
-**__ボールドテキスト__**メニュータブを8個つくって
+メニュータブを8個つくって