楽天市場/スマホ版イーザッカマニアさんのヘッダーを真似たい

Question

スマホ版のヘッダーを真似たいのですが、（お手本） https://item.rakuten.co.jp/e-zakkamania/c/0000001893/

もがいたんだけどこうなりました笑
（結果）  https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/header.html

質問1)スクロールメニューの幅ってどのくらいでしょうか？
質問2)スクロールメニューの横に丸と三角の矢印みたいなの出すのって、どうやるんでしょうか？

既存メニューの下にスペース作るやり方は調べてわかったのですが、アイフレームではめ込む、はめ込み先のコーディングがわかりません><

誰か詳しい方ご教授願いますm(._.)m
よろしくお願いします！###HR######IMG0a5b7ffd1e3b1c40bf531a8166e1e6ba8.jpegIMG0###

Answer

ECマスターズの田中です。

> 質問1)スクロールメニューの幅ってどのくらいでしょうか？

幅というのは、メニューを表示する部分の幅ということでしょうか。
その場合は、基本的にデバイスの横幅いっぱいとなります。
一般的な縦長のスマートフォンであれば、
360pxもしくは375pxになる場合が多数です。

> 質問2)スクロールメニューの横に丸と三角の矢印みたいなの出すのって、どうやるんでしょうか？

ご自身で実装しようとすると、
JavaScriptを一から組む必要があり、複雑ですので、
下記のようなjQueryプラグインを導入して作成していただくことを
オススメします。

slick.js
http://kenwheeler.github.io/slick/
Owl Carousel 2（イーザッカマニアさんで使われています）
https://owlcarousel2.github.io/OwlCarousel2/

まずは導入をお試しいただき、
不明な点がございましたらお知らせください。
無事設置ができましたら、改めてiframeタグで埋め込む方法をご案内いたします。

Answer

ありがとうございます！

幅は、、、色んな所の幅がうまくいかないのですが・・ｗ
質問した時に言った幅は、メニューのheightでした！

大きなスマホで見ても、小さなスマホで見ても、画像(メニューリンク)の割合を同じにしたかったので、幅を％で指定したらおかしくなり・・
かといってpxにするとまたおかしくなり、
https://www.rakuten.ne.jp/gold/pyokotto/pyokotto_css/header.html
ここの上メニューはスマホ画面の幅の中でいて欲しいのにはみ出して横にスライドするし
くるくるスライドするメニューは下段だけで良いのですが・・・触っていくうちにスライドメニューもスライドしなくなってしまいました＞＜
(言ってる事伝わりますか？＞＜)

教えて頂いたjQueryプラグインは無料でしょうか？？





	****
	
	
	
	
	
	
	



.menu ul {
  width: auto;
  list-style: none;
  display: flex;
}

.menu ul li a:hover,
.menu ul li a:active {
  background: #afc6e2;
}

.gnav {
  width: auto;
  height: 100px;
  background: #fff;
  overflow-x: hidden;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.gnav ul {
  width: auto;
  height: 100px;
  margin: 3px 3px 3px 3px;
  list-style: none;
  display: flex;
}
.gnav ul li {
  text-align: center;
  border-left: 0px solid #eee;
}
.gnav ul li:last-child {
  border-right: 0px solid #eee;
}
.gnav ul li a,
.gnav ul li a:link,
.gnav ul li a:visited {
  display: inline-block;
  width: 72px;
  height: 92px;
  background: #fff;
  color: #fff;
  text-decoration: none;
}
.gnav ul li a:hover,
.gnav ul li a:active {
  background: #afc6e2;
}

Answer

ECマスターズの田中です。

HTMLとCSSのみでスライドメニューを導入されようとして
うまくいかなかった、ということですね。

jQueryプラグインに任せることで、
画像のサイズ（縦横比）さえ揃えていただければ
スライダーメニュー部分のバナー配置やボタンの設置も
自動で行うことができます。

まずは、jQueryプラグインを導入することで
どのような見た目になるのか、
ご確認いただければと思います。

jQueryプラグインは、つまり
jQueryの機能を拡張するプログラムですので、
先にjQueryの導入が必要です。

jQueryの扱い方がわからない場合は、
楽天大学にて講師による解説動画が掲載されておりますので、
まずご視聴いただきますようお願いします。
https://daigaku.rms.rakuten.co.jp/rmsapp/watch/30281

> 教えて頂いたjQueryプラグインは無料でしょうか？？

はい、無料でご利用いただけます。
導入していただくことで、ページのHTMLタグの構成も大きく変わりますので、
まずはjQueryプラグインの導入を目指していただきますよう
お願いいたします。

Answer

ありがとうございます！

参考にした記事が良くなかったのですね＞＜
もういっかい、教えてもらった楽天大学の動画と合わせて勉強してからやってみます☆

教えて頂き、ありがとうございました＾＾☆