スマホの横スクロールUIをCSSで実装する方法

コメント

1. 名前:山田 :投稿日：2019/11/19(火) 12:48:04 ID：U2OTcyNDM

   こちらのサイトを参考にさせていただいております。

   初心者のため分からないことが多く、もし可能でしたら教えていただきたいことがあります。
   今回の「スマホの横スクロールUIをCSSで実装する方法」を実装した場合、PCでの表示は設定している横幅に合わせて画像が縮小されます。

   これを下記のようなサイトのような表示にしたい場合、どこを変更すれば良いのでしょうか。

   https://paypay.ne.jp/guide/start/

   上手く説明できませんが、PC表示では画像の大きさを統一しつつ、スマホではそれらを横スクロールで表示にしたいと考えています。

   ご回答いただけますと幸いです。
   よろしくお願いいたします。

   返信
• 名前:ざきひー :投稿日：2019/11/20(水) 15:01:03 ID：k2NTQ0NjM

  はじめまして！
  本サイトをご覧いただきありがとうございます。

  PayPayのサイト拝見しました。PCではグリッド表示にしたいということで良かったでしょうか？

  ↓本ページのCSSを修正しました。よければ試してみてください。

  .horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex;
  }

  /* 画面幅が768px以上の場合、横スクロールを解除 */
  @media screen and (min-width: 768px) {
  .horizontal_scroll {
  overflow-x: inherit;
  padding: 0 0 6px 5px;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  }
  }

  .horizontal_scroll>li {
  min-width: 140px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: calc(33.33333% - 5px);
  }

  @media screen and (min-width: 768px) {
  .horizontal_scroll>li {
  min-width: inherit;
  margin-bottom: 48px;
  }
  }

  .horizontal_scroll>li:not(:last-child) {
  margin-right: 5px;
  }

  .horizontal_scroll>li:last-child {
  padding-right: 5px;
  }

  @media screen and (min-width: 768px) {
  .horizontal_scroll>li:last-child {
  padding-right: 0;
  }
  }

  .horizontal_scroll img {
max-width: 100%;
vertical-align: bottom;
}

  不明点等ありましたらお気軽にどうぞ。

  返信
2. 名前:中川 :投稿日：2020/02/20(木) 06:54:50 ID：c5MzUxNjQ

   お世話になっております、大変参考させていただきました。
   本当にありがとうございます。
   ただ、申し訳ございませんが、
   上記のHTML,CSS通り、ヤフーショッピングのスマホ商品ページに実装致しましたが、横並びでなく、縦並びになっています。
   失礼ですが、調整方法をお伝え頂けますでしょうか？
   心よりご返事をお待ちしております。
   お手数ですが、どうぞよろしくお願いいたします。

   返信
• 名前:ざきひー :投稿日：2020/02/20(木) 17:41:15 ID：k3NDI0MjQ

  こちらこそ、本サイトをご覧いただきありがとうございます。

  前提としてYahooショッピングのスマホページは外部CSSが利用できません。インラインスタイル（style属性）に変換して実装してください。詳しくは別記事で解説しております。
  » Yahooショッピングのスマホページに横スクロールを設置する

  インラインで書いている場合、.horizontal_scrollにdisplay:flexを書いていない可能性があります。
  display:flexが記述されている場合は.horizontal_scrollにflex-wrap:nowrapを記述すると横並びになるかもしれません。

  よければ参考にしてください。

  返信
• 名前:高橋 :投稿日：2020/03/08(日) 08:05:28 ID：Y0MzUzODg

  こちら大変参考にさせて頂いております。
  私の方もヤフーショッピングにて使用したいと思っておりますが、横並びでなく
  縦並びになってしまいます。
  CSS,HTMLは全て上のHTMｌをコピペで使用しています。

  ヤフートリプルへCSSはファイル名を「horizontal_scroll.css」として
  アップロードしています。HTML記述にも
  .horizontal_scroll {
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 12px 8px;
  display: -ms-flexbox;
  display: flex; }

  この部分は入っています、またflex-wrap:wrapというのも試してみましたがうまくいきません。他に調整方法がございましたらぜひお返事をお待ちしております。

  返信
• 名前:ざきひー :投稿日：2020/03/10(火) 10:37:39 ID：AwNjY2ODI

  本サイトをご活用いただきありがとうございます！

  ※まずYahooショッピングのスマホ商品ページは外部CSS利用不可ですので本記事の方法では実装できません。
  ↓こちらの記事の方法で実装します。
  » Yahooショッピングのスマホページに横スクロールを設置する

  Yahooトリプルのページでしたら本記事の方法で実装できます。
  下の流れで実装状況を確認して誤りがあれば修正してください。

  １.　linkタグのCSSへのパスが間違いがないか確認する。
  ２.　パスが合っていれば.horizontal_scrollにflex-wrap:nowrapを追記する。

  検証して改善しない場合は下の別の方法で試してみてください。
  .horizontal_scroll {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
padding: 0 0 12px 8px;
display: -ms-flexbox;
display: flex;
list-style: none;
}

  .horizontal_scroll>li {
  min-width: 140px;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  width: calc(33.33333% - 5px);
  }

  .horizontal_scroll>li:not(:last-child) {
  margin-right: 5px;
  }

  .horizontal_scroll>li:last-child {
  padding-right: 5px;
  }

  .horizontal_scroll img {
max-width: 100%;
vertical-align: bottom;
}

  以上です。よろしくおねがいします。

  返信
• 名前:高橋 :投稿日：2020/03/14(土) 04:19:12 ID：gzMTYzOTE

  ご連絡ありがとうございました！出来ました(*^^*)
  CSSはあまりいじったことが無かったですが、出来て良かったです。
  丁寧にご連絡ありがとうございました！