編集履歴

質問編集履歴

PC版の画像の追記

2020/09/09 20:14

投稿

takawork

スコア95

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,3 +1,9 @@
+PC版
+![イメージ説明](447a11588f14a83d3aad5d70b3a7c2f7.png)
+スマホ版
 ![![イメージ説明](a667573d88f4b6f957a8bad1a182c9e1.png)](30c23bc01697a24f49c2e392c836fc7b.png)
@@ -6,9 +12,9 @@
 ヘッダーの下にメインコンテンツをおきたいのですが、大きめの隙間が出来てしまいます。
-大きさを調べると、「あ」のところまでに、.topbarbgクラスがあると検証モードで出たので、
+検証モードで隙間を見ると、topbarbgと表示されたので、PC版のロゴの背景のボックス要素？が消えていあにんだと思います。
-それをdisplay:none;で消したらメニューの方が消えてしまいました。
+自分ではdisplay:none;で消したらスマホ版メニューが消えてしまいました。
 どうすればヘッダーの下にディスプレイをおくことが出来ますでしょうか？

全体のcssの追記

2020/09/09 20:14

投稿

takawork

スコア95

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -228,6 +228,164 @@
 ```
+全体のcssです。
+```
+body {
+  background-color: #f5f5f5;
+}
+.headerwp {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0px;
+  min-width: 320px;
+}
+.topbarbg {
+  width: 100%;
+  display: block;
+  min-height: 214px;
+  padding-top: 0px;
+  background: url(../images/topbg.jpg) top center no-repeat;
+  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
+}
+.desktoplogo {
+  padding: 49px 0px;
+  margin: 0 auto;
+  text-align: center;
+}
+.desktoplogo img{
+  width:300px;
+}
+@media only screen and (min-width: 230px) and (max-width:991px) {
+  .desktoplogo {
+    display: none;
+  }
+  .topbarbg {
+    background: none;
+    box-shadow: none;
+  }
+  .swichermainbx {
+    width: 96%;
+    margin: 0% 2%;
+    display: block;
+    background-color: rgba(255, 255, 255, 0.3);
+    padding: 15px 25px;
+    border-radius: 14px;
+  }
+  .swichermainleft {
+    width: 98%;
+    margin: 1% 1%;
+  }
+  .swichermainright {
+    width: 98%;
+    margin: 1% 1%;
+  }
+  .wscolorcode {
+    width: 12.5%;
+  }
+  .swichertxt {
+    display: none;
+  }
+  .swichertxt02 span {
+    display: none;
+  }
+}
+```
 ↓メニューだけのcssです。
 css1つ目

cssとjqueryの追加

2020/09/09 19:25

投稿

takawork

スコア95

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -80,154 +80,160 @@
 ```
-body {
-  background-color: #f5f5f5;
-}
-.headerwp {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0px;
-  min-width: 320px;
-}
-.topbarbg {
-  width: 100%;
-  display: block;
-  min-height: 214px;
-  padding-top: 0px;
-  background: url(../images/topbg.jpg) top center no-repeat;
-  box-shadow: 0 0 20px rgba(0, 0, 0, .3);
-}
-.desktoplogo {
-  padding: 49px 0px;
-  margin: 0 auto;
-  text-align: center;
-}
-.desktoplogo img{
-  width:300px;
-}
-@media only screen and (min-width: 230px) and (max-width:991px) {
-  .desktoplogo {
-    display: none;
-  }
-  .topbarbg {
-    background: none;
-    box-shadow: none;
-  }
-  .swichermainbx {
-    width: 96%;
-    margin: 0% 2%;
-    display: block;
-    background-color: rgba(255, 255, 255, 0.3);
-    padding: 15px 25px;
-    border-radius: 14px;
-  }
-  .swichermainleft {
-    width: 98%;
-    margin: 1% 1%;
-  }
-  .swichermainright {
-    width: 98%;
-    margin: 1% 1%;
-  }
-  .wscolorcode {
-    width: 12.5%;
-  }
-  .swichertxt {
-    display: none;
-  }
-  .swichertxt02 span {
-    display: none;
-  }
-}
-```
+/* global jQuery */
+/* global document */
+jQuery(function () {
+  'use strict';
+  document.addEventListener("touchstart", function () {}, false);
+  jQuery(function () {
+    jQuery('body').wrapInner('<div class="wsmenucontainer" />');
+    jQuery('<div class="overlapblackbg"></div>').prependTo('.wsmenu');
+    jQuery('#wsnavtoggle').click(function () {
+      jQuery('body').toggleClass('wsactive');
+    });
+    jQuery('.overlapblackbg').click(function () {
+      jQuery("body").removeClass('wsactive');
+    });
+    jQuery('.wsmenu > .wsmenu-list > li').has('.sub-menu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
+    jQuery('.wsmenu > .wsmenu-list > li').has('.wsmegamenu').prepend('<span class="wsmenu-click"><i class="wsmenu-arrow"></i></span>');
+    jQuery('.wsmenu-click').click(function () {
+      jQuery(this).toggleClass('ws-activearrow')
+        .parent().siblings().children().removeClass('ws-activearrow');
+      jQuery(".wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu").not(jQuery(this).siblings('.wsmenu > .wsmenu-list > li > .sub-menu, .wsmegamenu')).slideUp('slow');
+      jQuery(this).siblings('.sub-menu').slideToggle('slow');
+      jQuery(this).siblings('.wsmegamenu').slideToggle('slow');
+    });
+    jQuery('.wsmenu > .wsmenu-list > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
+    jQuery('.wsmenu > .wsmenu-list > li > ul > li > ul > li').has('.sub-menu').prepend('<span class="wsmenu-click02"><i class="wsmenu-arrow"></i></span>');
+    jQuery('.wsmenu-click02').click(function () {
+      jQuery(this).children('.wsmenu-arrow').toggleClass('wsmenu-rotate');
+      jQuery(this).siblings('li > .sub-menu').slideToggle('slow');
+    });
+    jQuery(window).on('resize', function () {
+      if (jQuery(window).outerWidth() < 992) {
+        jQuery('.wsmenu').css('height', jQuery(this).height() + "px");
+        jQuery('.wsmenucontainer').css('min-width', jQuery(this).width() + "px");
+      } else {
+        jQuery('.wsmenu').removeAttr("style");
+        jQuery('.wsmenucontainer').removeAttr("style");
+        jQuery('body').removeClass("wsactive");
+        jQuery('.wsmenu > .wsmenu-list > li > .wsmegamenu, .wsmenu > .wsmenu-list > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu, .wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu').removeAttr("style");
+        jQuery('.wsmenu-click').removeClass("ws-activearrow");
+        jQuery('.wsmenu-click02 > i').removeClass("wsmenu-rotate");
+      }
+    });
+    jQuery(window).trigger('resize');
+  });
+  //Mobile Search Box
+  jQuery(window).on("load", function () {
+    jQuery('.wsmobileheader .wssearch').on("click", function () {
+      jQuery(this).toggleClass("wsopensearch");
+    });
+    jQuery("body, .wsopensearch .wscloseicon").on("click", function () {
+      jQuery(".wssearch").removeClass('wsopensearch');
+    });
+    jQuery(".wssearch, .wssearchform form").on("click", function (e) {
+      e.stopPropagation();
+    });
+  });
+}());
+```
+↓メニューだけのcssです。
+css1つ目
+https://harigami.jp/cd?hsh=2acb3522-665d-4853-a09f-05babd9500af
+css２つ目
+https://harigami.jp/cd?hsh=021f80bb-7d65-4621-a21d-1e6c55672288

ブートストラップを使用してることの説明の追記。

2020/09/09 18:44

投稿

takawork

スコア95

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -12,7 +12,7 @@
 どうすればヘッダーの下にディスプレイをおくことが出来ますでしょうか？
-よろしくお願いします。
+ブートストラップのグリッドで作成しています。よろしくお願いします。
 ```